Learn how to create a web form to collect information from website viewers.
create-web-form_1408x792

This tutorial describes how to test your forms using the email app on your computer. However, when you add forms to a web page, it will be likely be part of a larger project to collect form information that is saved to a database or integrated with software such as a contact management system. So, your final solution will involve some server-based technology, such as PHP which is a server-side scripting language, when you use web forms in your website.

Creating a web form is an essential essential tool for collecting information from your website’s viewers. Forms are used everywhere on the web, to contact someone in a company, subscribe to a mailing list, register for an event, collect payment information, submit surveys, and much more.

This tutorial will show how to get a first name, last name, email, and address from your users.

Create a web form
Create a web form to obtain viewer information

Before you start

Download and save the project files. Open web-form.html in Dreamweaver and view the Source Code in Split view.

To split the view top and bottom, choose View and uncheck Split Vertically.

Uncheck Split vertically
Uncheck Split vertically to view code top and bottom

Add an email form field

Find the <!-- Step 1 --> section around line 26.

To create a new form field, add an <input> tag. In this example, the input tag will need 4 properties:

  • id="email" gives this field a unique identifier for the CSS styling that's already in place.
  • type="email" specifies the type of input to display. In this case, it expects an email address.
  • placeholder=Email*" specifies the text inside of the field before the user types into it. It is important to give users instructions on what to type inside the field.
  • name="Email" serves as a label for the information when the form is received.

HTML

<input id="email" type="email"
placeholder="Email*" Name="Email">

Use an <input> tag to create a new form field
Use an <input> tag to create a new form field

Add an address form field

Find the <!-- Step 2 --> section around line 28.

Create a new form field by adding an <input> tag. In this example, the input tag will need 4 properties:

  • id="address" gives this field a unique identifier for the CSS styling that's already in place.
  • type="text" specifies the type of input to display. <input> tags are set to "text" by default, but it's best practice to specify.
  • placeholder="Address" specifies the text inside of the field before the user types into it. It is important to give users instructions on what to type inside the field.
  • name="Address" serves as a label for the information when the form is received.

HTML

<input id="address" type="text" placeholder="Address" name="Address">

Use an <input> tag to create an address form field
Use an <input> tag to create an address form field

Add a submit button

Find the <!-- Step 3 --> section around line 30.

Create a new form field to serve as the button by adding an <input> tag. In order to make this into a submit button, the input tag will need 3 properties:

  • id="submit" gives this field a unique identifier for the CSS styling that's already in place.
  • type="submit" specifies the action of the button. In this case, the button will submit the information from the form fields.
  • value="Send" sets the word that displays on the button.

HTML

<input id="submit" type="submit" value="Send">

Use an <input> tag to create a submit button
Use an <input> tag to create a submit button

Set a required field

Go back to the Email field from 
<!-- Step 1 --> around line 27.

You can require a user to fill out certain form fields by adding required to the <input>  tag. If a user tries to submit the form without filling out a required field, a contextual alert will pop up letting the user know which fields still need to be filled out.

HTML

<input id="email" type="email"
placeholder="Email*" name="Email" required>

Set a required field
Return to the Email field to set a required field

Add required to the <input> tag
Add required to the <input> tag

Submit to email

When you create a web form, you will need to send the collected information so it can be used in some way. Where and how you end up sending the information depends on the type of site you are creating and the reasons for collecting the data. A quick way to test form submission is to send it from your website to an email address. In this example, the opening form tag needs additional attributes and values:

  • method="post" indicates the form data is to be sent to a specific source.
  • action=
    "mailto:youremail@email.com"
    sends the data to the email address after the mailto. Change this to your email address so you can test it.
  • enctype="text/plain" sends the information as plain text.

Test your form in the next step, by filling out the form fields and clicking the Submit button. This will open your local email client that you can use to send the email. You should receive an email with the values you entered into the form that looks similar to the following:

  • First Name=Joe
  • Last Name=Smith
  • Email=test@testemail.com
  • Address=100 Main St.
Test a form submission
Test a form submission

Done!

Click Preview in Browser and choose your preferred browser to test your web form!

You will need to save your files to view the changes.

Test your web form in a browser
Test your web form in a browser

02/11/2015
Was this page helpful?
Yes
No