How Do I Make a Contact Form Using HTML and CSS?

The contact form allows customers and users to easily send feedback or inquiry to the website owner or administrator. It consists of the HTML element that helps in retrieving the data from the user and  sending  this data to a specified place to store it for later use. CSS is utilized to customize the appearance of the form elements to make the contact form more interactive and eye-catching.

This blog demonstrates the procedure for making a contact form with the help of CSS and HTML.

How to Make a Contact Form Using CSS and HTML?

To make a contact form, HTML is utilized to create the structure of the form. And the CSS properties are utilized to apply styling on the HTML structure. Follow the below step-by-step guide to make a contact form using CSS and HTML:

Step 1: Create a Contact Form Structure

The form elements like labels, input fields, buttons, etc are used to create a contact form structure. For instance, a basic contact form structure has been created using the following lines of code:

The explanation of the above code snippet:

• In the “<form>” div, a couple of “<input>” tags are utilized to enter data of “Name” and “Email” from the user.
• The “<textarea>” tag is used to get the user’s feedback or message and provide values to the “type”, “name”, and “id” attributes of the “<input>” tag.
• Then, the “required” attribute adds the validation and restricts the user to enter the data in the field.
• After that, the “<label>” attribute is used to display dummy data related to the “<input>” field.
• In the end, create a “<input>” element and set its “type” attribute to “submit” to create the submit button.

After the compilation of the code block, the webpage appears like this:

The snapshot shows that the contact form structure has been created on the webpage.

Step 2: Styling the Contact Form

To style the “form” and its “input” elements, insert the following CSS properties inside the “<style>” tag or in a separate CSS file:

The explanation of the above code snippet is described in below bullet points:

• First, the “form” element is selected for applying CSS properties to the form container.
• The values “flex”, “column”, “center” and “20px” are provided to the CSS “display”, “flex-direction”, “align-items” and “margin-top” properties.
• These properties set the layout and alignment of the child element to flex and center.
• Next, select the “input”, “label”, and “textarea” elements. And utilize the “display”, “width” and “margin-bottom” properties to set the size and alignment of these elements.

After the compilation of the above code snippet, the webpage appears like this:

The above snapshot shows that the input fields and form container is styled using CSS and the data validation is also working.

Step 3: Styling the Button Element

Select the “<button>” element by accessing its associated class “Btn” and apply the following lines of code:

The above code snippet is described in below bullet points:

• First, the values of “teal”, “white”, “10px” and “pointer” are assigned to the “background-color”, “color”, “padding” and “cursor” properties. Other properties can also be used according to the need of web page design.
• Next, attach the “hover” selector with the “Btn” class and set the value of the CSS “background-color” property to “black”.

At the end of the compilation process, the contact form looks like:

The above gif shows the final view of the contact form.

Conclusion

To make a contact form, utilize the “<label>” tag for each input HTML element inside the “<form>” tag. After that, utilize the “<input>” field having a “type” attribute “submit” to create a message/comment box. After that, select each HTML element and utilize custom CSS properties according to the need of the web page. This blog has demonstrated a procedure to make a contact form using CSS.