Page 1 of 1

Contact Form using GMAIL SMTP (Tutorial) WYSIWYG WEB BUILDER

Posted: Fri Sep 18, 2020 10:51 am
by wwonderfull
wyndham wrote: Fri Sep 18, 2020 1:57 am I'm new to some of the features such as forms. I put in a contact block with name, email and phone and comment box with a submit button.
What I want is to have that information sent to my email when the submit button is pushed then clear the data fields
I don't know how to set the different options.
I hope someone can help me understand how to do this
I am just showing you a simple trick which is basic to be honest. But it will fulfill your needs.
First of all setting up your gmail as an smtp:

Image

1. Log in to your gmail and then go to settings/Forwarding and POP/IMAP
2. Enable IMAP

**Now you can use your gmail as an smtp.**

Making the form:
Try to see the images and do as exact as possible:
Image

NOTE: If you don't know much about gmail smtp see here https://www.siteground.com/kb/google_free_smtp_server/
Now this is how you use your gmail as smtp:
Image

For the reset process take a Dialog from jQuery Ui>Dialog and do as following:
NOTE: Do not check show dialog automatically or it will cause issues

Image

After that go to the contact form layout grid and go to "Form" then select the dialog box as below shown:

Image

For the form to reset, go to Dialog>Event and do as following:

Image

And the result will be something like this

Image

NOTE: Instead of using your original password of email it is safer to create an APP Password which will result better for professional and business setup for smtp.
More about APP Password: https://support.google.com/accounts/answer/185833?hl=en

After publishing your website on the web and not previewing in local you can see the dialog box containing "the Message successfully sent text box which had been dragged inside the dialog box" You can write your own text and put it inside the dialog box and also can change the title of the doalog box.

This is a quick tutorial. I hope beginners find it useful.

Re: Contact form data question (Tutorial)

Posted: Mon Sep 21, 2020 7:56 am
by zinc
Very cool and useful! Thank you for sharing!

Re: Contact form data question (Tutorial)

Posted: Sat Mar 12, 2022 2:23 pm
by Lasa
Awesome thank you!

Re: Contact form data question (Tutorial)

Posted: Sat Mar 12, 2022 7:32 pm
by miguelss
Awesome!
Thanks for sharing!
M.

Re: Contact Form using Google SMTP (Tutorial) WYSIWYG WEB BUILDER

Posted: Sun Dec 25, 2022 11:32 am
by wwonderfull
the tutorial has been updated with the app password information, now a days it is essential for those whom of you use 2 step verification turned on then app password is a must. And it is lot safer for you in every way. I used it too.

Re: Contact Form using Google SMTP (Tutorial) WYSIWYG WEB BUILDER

Posted: Sat May 04, 2024 6:46 pm
by johnsmith0251
Does this also prevent direct email access?

Meaning ... if someone types in the email and app password as a way to sign into the email account, would that work?
wwonderfull wrote: Sun Dec 25, 2022 11:32 am the tutorial has been updated with the app password information, now a days it is essential for those whom of you use 2 step verification turned on then app password is a must. And it is lot safer for you in every way. I used it too.

Re: Contact Form using Google SMTP (Tutorial) WYSIWYG WEB BUILDER

Posted: Sun May 05, 2024 10:49 am
by wwonderfull
johnsmith0251 wrote: Sat May 04, 2024 6:46 pm Does this also prevent direct email access?

Meaning ... if someone types in the email and app password as a way to sign into the email account, would that work?
wwonderfull wrote: Sun Dec 25, 2022 11:32 am the tutorial has been updated with the app password information, now a days it is essential for those whom of you use 2 step verification turned on then app password is a must. And it is lot safer for you in every way. I used it too.
No one can login to gmail using app password it only gives access for apps and not the direct account itself.

App password is something like not directly letting a code to know what your actual gmail password is. App password protects the plain text gmail password to be masked when written inside codes for smtp for example. Note that sharing app password is forbidden same as original as the same thing you can do others can do the same with this password there is no restriction when email and password is known. That means keep the app password safe and the original password safer. But if you want to delete app password you can easily delete and create one to make a new app password it is much more easy and simple than changing gmail password directly again and again.

Re: Contact Form using Google SMTP (Tutorial) WYSIWYG WEB BUILDER

Posted: Thu Oct 17, 2024 3:21 am
by wwonderfull
An update for those who have not seen googles notice. You’ll need to authenticate using OAuth 2.0 instead of just your username and password

https://support.google.com/a/answer/9003945?hl=en
Starting in Fall of 2024, Google Workspace accounts will no longer support less secure apps, third-party apps or devices that ask you to sign in to your Google Account using only your username and password. For exact dates, visit Google Workspace Updates. To access apps, you must use OAuth. To prepare for this change, review the details in Transition from less secure apps to OAuth.

Re: Contact Form using Google SMTP (Tutorial) WYSIWYG WEB BUILDER

Posted: Thu Oct 17, 2024 5:54 pm
by johnsmith0251
does this require any new configurations in wwb?
wwonderfull wrote: Thu Oct 17, 2024 3:21 am An update for those who have not seen googles notice. You’ll need to authenticate using OAuth 2.0 instead of just your username and password

https://support.google.com/a/answer/9003945?hl=en
Starting in Fall of 2024, Google Workspace accounts will no longer support less secure apps, third-party apps or devices that ask you to sign in to your Google Account using only your username and password. For exact dates, visit Google Workspace Updates. To access apps, you must use OAuth. To prepare for this change, review the details in Transition from less secure apps to OAuth.

Re: Contact Form using Google SMTP (Tutorial) WYSIWYG WEB BUILDER

Posted: Fri Oct 18, 2024 3:23 am
by wwonderfull
johnsmith0251 wrote: Thu Oct 17, 2024 5:54 pm does this require any new configurations in wwb?
Yes, it may need some level of new configurations added in wwb if google initiates their changes

OAuth is mainly google account's safety related configuration. As google keeps updating their policy sometimes some settings get deprecated and new ones get added. Now OAuth is related to google's SMTP.

Auth 2.0 is an authorization framework that allows applications to access resources on behalf of a user without sharing their credentials. It’s widely used for secure access to APIs and services.

When it comes to Gmail SMTP, OAuth 2.0 is particularly important. Google has been transitioning away from less secure app access, which means that traditional username and password authentication for SMTP will no longer be supported. Instead, you’ll need to use OAuth 2.0 to authenticate and send emails through Gmail’s SMTP server.

Here’s a brief overview of how OAuth 2.0 works in this context:

Authorization Request: Your application requests authorization from the user to access their Gmail account.
Authorization Grant: The user grants permission, and your application receives an authorization code.
Access Token: Your application exchanges the authorization code for an access token from Google’s authorization server.
Access Resources: Your application uses the access token to authenticate and send emails via Gmail’s SMTP server.

Traditional Method:
Host Name: smtp.gmail.com
Port: 587 (TLS) or 465 (SSL)
Username: Your Gmail email address
Password: Your Gmail password or app-specific password

OAuth 2.0 Method:
Host Name: smtp.gmail.com
Port: 587 (TLS) or 465 (SSL)
Username: Your Gmail email address
OAuth Token: Access token obtained through the OAuth 2.0 flow

App Password:
https://support.google.com/accounts/answer/185833?hl=en

OAuth 2.0:
https://support.google.com/cloud/answer ... 4364087-AP

Re: Contact Form using Google SMTP (Tutorial) WYSIWYG WEB BUILDER

Posted: Sat Oct 19, 2024 5:43 pm
by johnsmith0251
The security is awesome - the process to do this seems very complicated.

wwonderfull wrote: Fri Oct 18, 2024 3:23 am
johnsmith0251 wrote: Thu Oct 17, 2024 5:54 pm does this require any new configurations in wwb?
Yes, it may need some level of new configurations added in wwb if google initiates their changes

OAuth is mainly google account's safety related configuration. As google keeps updating their policy sometimes some settings get deprecated and new ones get added. Now OAuth is related to google's SMTP.

Auth 2.0 is an authorization framework that allows applications to access resources on behalf of a user without sharing their credentials. It’s widely used for secure access to APIs and services.

When it comes to Gmail SMTP, OAuth 2.0 is particularly important. Google has been transitioning away from less secure app access, which means that traditional username and password authentication for SMTP will no longer be supported. Instead, you’ll need to use OAuth 2.0 to authenticate and send emails through Gmail’s SMTP server.

Here’s a brief overview of how OAuth 2.0 works in this context:

Authorization Request: Your application requests authorization from the user to access their Gmail account.
Authorization Grant: The user grants permission, and your application receives an authorization code.
Access Token: Your application exchanges the authorization code for an access token from Google’s authorization server.
Access Resources: Your application uses the access token to authenticate and send emails via Gmail’s SMTP server.

Traditional Method:
Host Name: smtp.gmail.com
Port: 587 (TLS) or 465 (SSL)
Username: Your Gmail email address
Password: Your Gmail password or app-specific password

OAuth 2.0 Method:
Host Name: smtp.gmail.com
Port: 587 (TLS) or 465 (SSL)
Username: Your Gmail email address
OAuth Token: Access token obtained through the OAuth 2.0 flow

App Password:
https://support.google.com/accounts/answer/185833?hl=en

OAuth 2.0:
https://support.google.com/cloud/answer ... 4364087-AP