Adding the Contact Form

A built-in contact form on a web page can ensure that users can get in touch without having to navigate outside of the site. In the past, we could copy and paste an email address into our mailing client to send a message. In today’s world, we want to provide a built-in way so that users don’t have to leave the site. In this lesson, we’ll take a look at how we can create a ContactForm component that we can plug into any of our pages to create a working contact form.

Creating the contact form

For this contact form, we’re going to have an email input type as well as textarea for the message. The email input type acts as a way for users to provide their email address, whereas textarea is necessary so that they can provide the body of the email.

Include as many other fields as necessary in the forms, using the method outlined in this lesson. It’s important to always use semantic HTML elements as they improve both accessibility as well as SEO.

Note: Semantic HTML refers to HTML elements that carry meaning and convey the structure of the content to both browsers and developers, unlike elements without a meaning, such as div or span.

The following interactive widget already has the ContactForm component but the file is empty. Create a new section element inside the file with the following three elements inside it:

• h2: Create a heading for the block. Inside the heading, write “Contact.”

• input: Create an input field for the email address. Add the following placeholder: “Your email address.”

• textarea: Create textarea for the message input. Add the following placeholder: “Your message.”