Contact Form using Google 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: 1250
Joined: Fri Aug 21, 2020 8:27 am
Contact:

Contact Form using Google 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 Sun Dec 25, 2022 11:30 am, edited 4 times in total.
User avatar
zinc
 
 
Posts: 2146
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: 482
Joined: Sat Oct 06, 2018 3:08 pm

Re: Contact form data question (Tutorial)

Post by Lasa »

Awesome thank you!
User avatar
miguelss
 
 
Posts: 135
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: 1250
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.
Post Reply