Photo by Melinda Gimpel on Unsplash
Dealing with an improved user experience can cost time and money. Often your website visitor problems have simple tweaks to fix. This raises the following question:
“How do you know if customers are enjoying your website experience?”
The answer may be simpler than you think. Strategically placed and carefully crafted web forms are critical to resolving dissatisfaction in customer experiences and understanding if they’re truly enjoying the experience you’ve created for them.
If you don’t have a form on your website, you could be missing out on more leads, higher conversions, and more satisfied customers in the long run. We’ll show you how to create a certain type of form: one that sends an email to you, as well as to the customer, to make sure the form was received.
We’ll start with the dirty old way, then we’ll show the easier and more customizable way using Getform.
Getting Email from an HTML Form
Let’s start with the basics first.
Option-1: Using HTML Basics
Send an email using only HTML after the form is submitted. Here is some sample code to use:
Name:
Email:
Message:
Simple HTML form that “Triggers” an email.
This sample HTML code will create a form that requests the contact name, email, and message, and includes a button to submit to the form.
Another thing to note with this code is that it doesn’t submit directly to email addresses, but instead opens an email client or tool window to submit the form.
As long as you can use only basic HTML, this is not the ideal choice. Because browsers would allow you to route form submissions directly to an email address. However, the reason they don’t is that sending an email directly from an HTML web form would reveal the visitor’s email address, leaving the user vulnerable to malicious activity such as phishing.
Another problem with the mailto option is that it is not 100% compatible with all browsers, it is not very easy to use, and it is not possible to control the format of the data when the browser submits the form.
Let’s move on to the second option.
Option-2: Manage your own form backend. Really?
This is a more technical and dirty form that definitely requires specific technical skills. It can also take your time and effort. To make your form work with your email server and send it to a mailbox, the response is a backend framework, in this case PHP.
When the form is submitted, the browser sends the information to the backend using the link mentioned in the “action” attribute of the form tag, submitting the form data to that URL.
Use PHP to create a new page
- When you’re creating a web page, instead of using the “.html” extension, type “.php” instead.
- By doing this, the server will know to host the PHP you write. Instead of saving the empty HTML page as such, save it as something like this: “subscription form.php”. After creating and saving your page, you’ll be able to create the form.
Use PHP to create a new page
In this step, I’ll write the code to create the form. The following code is what is needed for a basic form:
Since this is similar to HTML-only compose, these lines will also create a name for the form and an area for subscribers to write a message personalized and send it. we send it to you.
One important difference is the “action=contact.php” part. This part of the code is what will cause the page to submit the form when it is submitted. This is the part added to the first option.
Make the forms send by email.
After creating the form and adding all the appropriate bindings according to your design preferences , it’s time to create the email part. To enable sending data in email, we need to add some code that will process the data. Copy the following code or create something similar:
Remember that everything inside the first and last lines will tell the web page to make these functions happen as PHP. This code also checks if a subscriber uses the form. From there, it checks if the form was submitted.
If we break down the code above.
- The “mail()” part sends the completed form as an email to “john@johndoe.com” and the subject line is as follows.
- On the next line, you can type a copy of the email within the quotes, so that it is sent from the email address of your choice. In this case from “jane@janedoe.com”
Once the form is submitted, the page sends the data to itself. If the data has been submitted successfully, the page sends it as an email. The browser then loads the HTML of the page, including the form.
Managing your own form backend can be complicated and is not an optimal option. This brings us to the third and easiest option.
Option-3: Use a form backend platform like Getform
We know that the first option is not really useful and the second option is definitely not easy and not for everyone either.
That’s why form back-end platforms like Getform are a great way to make your HTML forms send an email. Another advantage of a forms back-end platform is that they don’t have any framework or language dependencies and it works well with static sites like Hugo, Gatsby, 11ty and Jekyll.
1. Creating a form in Getform
Any form created in Getform can easily send an email to multiple recipients. Let’s set up a form that sends an email to multiple recipients.
- Log in to your form panel and create a form called “HTML Email Form”. This is what your dashboard looks like after creating your form:
- Getform automatically creates a single form endpoint and displays simple HTML form code with it.
- We’ll change our HTML a bit so that it can be used on any HTML page. The sample code below is sample form code with 3 basic fields; full name, email, and message fields.
- At this point, we are ready to fill out our sample form to begin receiving our first shipments.
- After we complete it and click “Submit”, your details will automatically be submitted to Getform and will be seen below:
2. Setting up an email notification for your form
We have successfully received our first submission. But our form still doesn’t send us an email. Let’s set up an email notification.
- Go to “Settings” and select “Notifications”.
- In the “Email Notification” section, you have a text field where you can enter the email addresses you want to receive shipping notifications. For our case, we have entered “info@getform.io” and “help@getform.io”. Click “Save Changes” to finish this step.
- Let’s send another submission to our form and see if these email addresses will receive the submission data as a email
- And more importantly, the sending email arrived at the email addresses that we did. They have entered!
We have created an HTML form that sends you an email with a couple of clicks. It’s that easy and free!
3. Setting up custom email notifications
If you want full control of the email you are sending from your HTML form, Getform has a “Custom Email Notification” option.
After successfully receiving the first form submission, the section of your custom email template will have email, name, and message form fields as embeddable tags. You must use double square brackets with the related fields. For example, if you have an input named email, you can inject its value by typing {{email}} into the template.
Note: if you want to get the name of your form, you can embed {{@form_name}} inside your template.
- When you receive a new submission to your form, your email notification will be sent to your email on file with your new settings. The sample email template will look like this:
4. Setting up autoresponders for form submitters
Like custom email templates, you can also send autoresponders via email to form submitters by setting up autoresponder emails.
After your first form submission is successfully received, the email template section of your autoresponder will have email, name, and message form fields as embeddable tags.Please note that your form must contain the type=”email” field in order to receive the email address to send the autoresponder emails.
- When you receive a new submission to your form, Your autoresponder will send an email to the submitter of the form. The sample autoresponder will look like this:
Option 3 provides a much simpler solution for sending basic email from your HTML form and also gives you the ability to set up custom email notifications and autoresponders to help you create a rich form experience.
Final Thoughts
We hope this article helps you learn the easiest way to submit a email from an HTML form. If you like this article, please share it and follow us on Facebook and Twitter for more updates from our blog.
Ready to get started?
Get started by creating your first form and send an email to multiple recipients in just a couple of clicks.
Thanks for reading! We keep improving Getform by listening, please leave us your feature requests at https://getform.nolt.io or vote for existing ones.
Check out our Codepen page, Codesandbox page, Github page, and documentation for get more information and samples.
Mertcan from GetformForm backend platform for designers and developers
.