Contact Form using GMAIL SMTP (Tutorial) WYSIWYG WEB BUILDER

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
wwonderfull
 
 
Posts: 1450
Joined: Fri Aug 21, 2020 8:27 am
Contact:

Contact Form using GMAIL SMTP (Tutorial) WYSIWYG WEB BUILDER

Post 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.
Last edited by wwonderfull on Thu Oct 17, 2024 3:43 am, edited 5 times in total.
User avatar
zinc
 
 
Posts: 2156
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: Contact form data question (Tutorial)

Post by zinc »

Very cool and useful! Thank you for sharing!
Running WYSIWYG Web Builder since 2007...
Lasa
 
 
Posts: 529
Joined: Sat Oct 06, 2018 3:08 pm

Re: Contact form data question (Tutorial)

Post by Lasa »

Awesome thank you!
User avatar
miguelss
 
 
Posts: 143
Joined: Thu Aug 15, 2013 12:25 pm
Location: Madrid, Spain

Re: Contact form data question (Tutorial)

Post by miguelss »

Awesome!
Thanks for sharing!
M.
wwonderfull
 
 
Posts: 1450
Joined: Fri Aug 21, 2020 8:27 am
Contact:

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

Post 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.
johnsmith0251
 
 
Posts: 269
Joined: Mon Aug 20, 2018 6:47 pm

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

Post 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.
wwonderfull
 
 
Posts: 1450
Joined: Fri Aug 21, 2020 8:27 am
Contact:

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

Post 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.
wwonderfull
 
 
Posts: 1450
Joined: Fri Aug 21, 2020 8:27 am
Contact:

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

Post 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.
johnsmith0251
 
 
Posts: 269
Joined: Mon Aug 20, 2018 6:47 pm

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

Post 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.
wwonderfull
 
 
Posts: 1450
Joined: Fri Aug 21, 2020 8:27 am
Contact:

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

Post 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
johnsmith0251
 
 
Posts: 269
Joined: Mon Aug 20, 2018 6:47 pm

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

Post 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
Post Reply