Building a Custom HTML Web Email Form

For web pages where you want input and correspondence, you will need to create an HTML web email form. This form will of course have an email field as well as other contact information if you so choose. 

The look and feel of the form is up to you to create using CSS and HTML. However, to have the form work properly, you will need to create a PHP file as well. Once you learn the basics of how to set up a form, you can use your creativity to not only customize the aesthetics of the form, but you can customize the fields to suit your specific purpose. 

After going through this email form HTML tutorial, you should have a better understanding of creating custom PHP contact forms. These can be really useful in your projects, as well as projects for clients.

Creating an Email Form

To create the HTML mail form is a two-step process involving the creation of two types of files that will talk to each other. 

Note: To test this out, you will need to upload the two finished files to your web server.

Step 1: Creating a PHP Page

In a text editor, save the file as “mail.php” and add the following into the page:

Notice the three name tags we have created for the form. We have Name, Email, Phone and Message. These are the four that we created in our form. This is the information that will be sent from our contact form by way of email.

The $recipient area will need to be modified to fit your specific email address where you wish to have the user send the email to. You can also modify the other information as needed such as the subject, and success message. 

Step 2: Creating an HTML/CSS Email Form Page

Save the file as “form.htm” in your text editor.

At the top of your page, enter the following to let the server know this is an HTML page, and also let the server know the name of the page. The name of the page gets displayed on the browser tab when you open the file.

Now enter the CSS directly onto the page right underneath. The CSS will determine your layout, look and feel, colors, and will control your font, font size, Margins and Padding. You can always play with the CSS and try out different layout, colors, font sizes, and anything else you see on the page.

As to your HTML body that lays out your actual form fields, you will need to add the following. This will finalize your HTML page.

Feel free to copy the following code:

Here is what the code means:

Now you should have the following two files:

• form.htm
• mail.php

These files both go into your website root directory. Amazingly, you can open your form.htm file and you should see the following layout.

To get the form to perform properly, you may need to load these two files onto your server depending on how your browser operates. 

Finally, think about what the purpose of your forms will be as this will provide self-guidance on your journey into creating the perfect forms and form fields.

See the HTML Font Families Udacity blog for more information on creating some special fonts for your forms.

Where to Next?

This introduction to the HTML Web Form for Email should provide a starting point for further inquiry into form design, layout, and purpose. As you can see, there are virtually unlimited creative aspects that HTML offers. 

We will continue to explore other areas of HTML design in the next blog. We hope this introduction has piqued your interest and inspired you to explore further and dive deeper into the world of web design.

Enroll in our Intro to Programming Nanodegree program today!

Start Learning