How To Create An Html Email Form

Strategically placed, thoughtfully-made forms are an excellent way to collect information about your audience so you can resolve their issues.

As more and more businesses migrate to cloud storage, it makes sense that you want to know how to create a form that will allow you to store data and email subscribers. It's seamless, and it keeps your data in one place.

Your initial thought might be to create an HTML form that emails responses—but will HTML support this type of activity?

In this post, we'll take a look at your options for creating an HTML form and some other, more modern, alternatives.

Can you create an HTML form that emails responses?

The answer to this is tricky. Depending on your goals, the answer is—well, yes and no.

If you're working strictly with HTML, you can use a code such as the one below.

<form action="mailto:[email protected]"

method="POST"

enctype="multipart/form-data"

name="EmailTestForm">

Name:<br>

Message:<br> <textarea name="VisitorComment" rows="4″ cols="20″>

</textarea><br><br> <input type="submit" value="Submit"> </form>

Which would create something that looks like this:

Example of an HTML form that emails responses

This form may seem fairly basic, but you can adjust the size, color, font, and other aesthetic factors to create a form that fits with your website design. There's just one big problem: It doesn't send directly to an email address. Instead, HTML code can only open an email client window to submit the form.

The HTML code requires some JavaScript to validate the form and PHP coding to communicate with your email server and seamlessly send the content to a mailbox. The three sets of code below can help you get the job done.

HTML:

<form method="post" name="contact_form" action="contact-form-handler.php"> Your Name: <input type="text" name="name"> Email Address:

<input type="text" name="email"> Message:

</form>

JavaScript:

var frmvalidator = new Validator("contactform"); frmvalidator.addValidation("name","req","Please provide your name"); frmvalidator.addValidation("email","req","Please provide your email"); frmvalidator.addValidation("email","email", "Please enter a valid email address"); </script>

PHP:

<?php

$errors = ";

$myemail = '[email protected]';//<—–Put Your email address here. if(empty($_POST['name']) ||

empty($_POST['email']) ||

empty($_POST['message']))

{

$errors .= "\n Error: all fields are required";

}

$name = $_POST['name'];

$email_address = $_POST['email'];

$message = $_POST['message'];

if (!preg_match(

"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", $email_address))

{

$errors .= "\n Error: Invalid email address";

}

if( empty($errors))

{

$to = $myemail;

$email_subject = "Contact form submission: $name";

$email_body = "You have received a new message. ".

" Here are the details:\n Name: $name \n ".

"Email: $email_address\n Message \n $message";

$headers = "From: $myemail\n";

$headers .= "Reply-To: $email_address";

mail($to,$email_subject,$email_body,$headers);

//redirect to the 'thank you' page

header('Location: contact-form-thank-you.html');

}

This would again create a very simple black and white form that you could edit to suit the design of the rest of your website.

How to create an HTML form and make it email its content to your mailbox: 3 options

Although it sounds simple to create an HTML form that emails responses, the code is actually pretty complicated, since it needs to verify things on the visitor's end and communicate with your email server.

This also means that your website hosting company needs to support PHP which, while fairly standard these days, is still tricky to get right without screwing up your delicate PHP file.

If you don't want to deal with the different types of code above, you can take advantage of the options below. Instead of worrying about creating an HTML form that will submit to an email, these options already did the work.

You can spend more time customizing the aesthetics and questions and less time worrying about the code. Plus, you can trust that these forms are coded with mobile browsing in mind. Since they're responsive, they'll look right on every device. (Always run some tests just to be sure.)

1. Email form plugins for WordPress

WordPress offers countless free, paid, and partially free form plugins for designers to use. With these plugins, you can create beautiful forms that function correctly.

Ninja Forms

Ninja Forms is free, unlimited, and easy to use for beginners. Coding veterans, you can still play with different features like built-in hooks and filters.

With Ninja Forms, you can create custom forms, modify each field, and save them to use later. Do you need to indicate required fields or custom input masks for international phone numbers? No problem. You can even add your own raw HTML to include videos or custom graphics for branding.

Ninja Forms helps you avoid spam at your discretion with Google reCaptcha features, honeypot options, and more. Want to know how to create a form and make it email its content to your mailbox? Ninja Forms will send an email with all of the data each time someone successfully submits their answers.

WPForms

WPForms includes another user-friendly interface with a drag-and-drop builder to create beautiful and functional forms. You can use their free lite option or take advantage of the reasonable $39.50 per year pro version.

The defining feature of WPForms is the conditional smart logic. With this feature, you can choose whether or not to display additional fields based on previous answers.

WPForms also securely integrates with multiple payment options, like PayPal and Stripe, so it's perfect for e-commerce applications.

You can also use WPForms to build your email list thanks to its Campaign Monitor and MailChimp add-ons. Not only does WPForms help you comply with GDPR opt-ins, but you can also ask additional questions like how often your subscribers would like to receive emails and which type of content they enjoy.

Gravity Forms

Gravity Forms is all about saving time. The interface makes it easy to use for coding novices, and it integrates well with many popular services like Slack, PayPal, Zapier, Stripe, and Campaign Monitor.

Don't want to spend an entire afternoon building the perfect form? No problem. Gravity Forms offers over 30 premade customizable templates to get you started.

You can also use conditional logic technology to create dynamic entry fields based on answers to different questions. Of course, Gravity Forms is committed to responsive design, so their forms look incredible on every device.

Do you need to create an HTML form that emails responses? Gravity Forms will send you a notification with every submission.

Gravity Forms offers a free trial and charges an annual fee of $59 per year for their basic version.

2. Shopify email form apps

Shopify provides its own series of apps so you can figure out how to create a form and make it email its content to your mailbox.

Form Builder–Easy to Advance from Hulk Apps

This form builder app is specially designed for beginners to advance as their comfort level increases. The interface is user-friendly and requires absolutely no coding skills.

The Hulk Apps Easy to Advance form builder allows you to use premade templates or design your own forms for a variety of purposes such as lead generation, payment collection, or customer management.

You can easily create an HTML form that emails multiple addresses with notifications. Plus, you can design completely responsive forms for free.

Form builder for custom forms by AAAeCommerce Inc

This form builder by AAAeCommerce Inc provides an easy to use drag-and-drop builder to create mobile responsive forms.

You get many of the same features most WordPress plugins offer such as integration with email apps and PayPal as well as conditional logic options. As an added bonus, you can also make sticky forms that cling to the side of a page for easy access.

If you want an HTML form that will submit to an email, this app will let you choose multiple recipients.

Prices start at just $9 per month with a 2-day free trial.

3. Google forms

With Google Forms, you can create beautiful surveys and forms for your email campaigns or website. Since it's Google, you and your team will have easy access to the information for collaborating.

The cool thing about Google Forms is that you can upload your brand's logo or graphic and the builder will select the perfect colors to match. Not only are the forms mobile-responsive, but Google will automatically convert your data into real-time charts and graphs.

Your email service provider's customizable templates

Your email service provider should either provide you with customizable forms or allow you to integrate form building apps directly in your email seamlessly.

At Campaign Monitor, you can easily design and distribute forms through email with apps like Ninja Forms, FormMule, FormCraft, and Gravity Forms.

Not only will this integration help you create an HTML form that emails responses, but you can also easily track your data across other locations, like Salesforce.

Wrap up

You can't create a strictly HTML form that will submit to an email. The technology simply won't communicate with your email server. You can, however, create an HTML form that emails responses by incorporating JavaScript and PHP code to get the job done.

A better option still is to take advantage of user-friendly drag-and-drop apps and plugins. You have so many options to learn how to create a form and make it email its content to your mailbox. Plus, they're mobile-responsive and include a bunch of cool features and beautiful templates.

Are you ready to create surveys that accomplish their task? Read this post about survey best practices to get started.