Contact Form using GMAIL SMTP (Tutorial) WYSIWYG WEB BUILDER

[wwonderfull]

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:



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:


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:


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



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



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



And the result will be something like this



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.

[zinc]

Very cool and useful! Thank you for sharing!

[Lasa]

Awesome thank you!

[miguelss]

Awesome!
Thanks for sharing!
M.

[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.

[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?

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.

[wwonderfull]

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?

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.

[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.

[johnsmith0251]

does this require any new configurations in wwb?

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.

[wwonderfull]

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

[johnsmith0251]

The security is awesome - the process to do this seems very complicated.

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