How to create a simple contact form using HTML, CSS, and JavaScript

How to create a simple contact form using HTML, CSS, and JavaScript Picture 1

Contact forms are an important element in the web, allowing users to reach queries, feedback or requests from viewers.

Here's how to create a basic contact form for your website. From setting up your project to adding form validation and styling, make sure you have a beautiful contact form.

Project setup

Before starting to code, make sure to set up your programming environment. Open your favorite editor or one of the recommended IDEs like Visual Studio Code or Sublime Text.

Create project folders to keep your HTML and CSS files organized. In this folder, create separate files for HTML ( index.html ) and CSS ( style.css ). Finally, link the CSS file within the HTML document's body using the tag.

Create HTML structure

The foundation of a contact form is its HTML structure. Here's how you can create the necessary HTML elements for a contact form.

Welcome to my Form

The above HTML code creates a form component and contains input fields to receive user input for the contact form. Currently, your contact form will look like this:

How to create a simple contact form using HTML, CSS, and JavaScript Picture 2

Style the contact form

An attractive and user-friendly contact form will enhance the overall experience. The CSS code below uses flexbox properties and CSS box templates like padding and margin to style the contact form for a better user experience.

* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; } body { font-family: "Mulish", sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; } main { width: 40rem; box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); margin: 0 auto; height: 45rem; border-radius: 2rem; padding: 2rem; } h1 { text-align: center; font-size: 3rem; padding: 1rem 2rem; } form { margin: 3rem 0; display: flex; flex-direction: column; row-gap: 2rem; } .input__container { display: flex; flex-direction: column; row-gap: 0.5rem; } .input__container label { font-size: 1.6rem; } .input__container input, textarea { padding: 1rem 2rem; border-radius: 5px; border: 1px solid #555; resize: none; } button { align-self: flex-start; padding: 1rem 2rem; border-radius: 5px; border: none; background: #333; color: #fff; cursor: pointer; }

The contact form will look like this:

How to create a simple contact form using HTML, CSS, and JavaScript Picture 3

Contact form validation

Ensuring the accuracy and completeness of information provided by users is important. One effective method involves using JavaScript for client-side form validation. To start, create a script tag at the end of the HTML file and target the form element.

 

Then, attach an event listener to the form for users to submit information.

form.addEventListener("submit", function (event) { });

Next, prevent the default page reload action by forms and select the value in the email field.

form.addEventListener("submit", function (event) { // Prevent page reload on submit event.preventDefault(); // Selecting the email value filled by the user const email = document.getElementById("email").value; });

Finally, use a regular expression to check the authenticity of the user's email and display a notification according to the email value.

form.addEventListener("submit", function (event) { // Preventing page reload on submit event.preventDefault(); // Selecting the email value filled by the user const email = document.getElementById("email").value; // Checking for valid email using a simple regex pattern const emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/; if (!emailPattern.test(email)) { alert("Wrong email format"); return; } // If everything passes, show success message alert("Form submitted successfully"); });

Check and correct form errors

No project is complete without testing. To ensure your form works correctly, enter the necessary values, submit the form, and validate it for desired results.

Hope the article is useful to you.

3.5 ★ | 2 Vote

May be interested

  • Why write neat and organized HTML?Photo of Why write neat and organized HTML?
    you will get many benefits from writing clean and precise html code. here's why it's a good idea to write optimal html code.
  • HTML ISO Country Code ReferencePhoto of HTML ISO Country Code Reference
    in html, the country code can be used as a complement to the language code in the lang attribute.
  • HTTP status messagePhoto of HTTP status message
    when the browser requests the service from the web server, an error may occur and the server may return an error code like 404 not found .
  • Reference Canvas in HTMLPhoto of Reference Canvas in HTML
    the html canvas tag is used to draw graphics on the fly, via scripting (usually javascript). to learn more about canvas, please read the html canvas tutorial.
  • HTML color code - color code table in htmlPhoto of HTML color code - color code table in html
    the color displayed is a combination of 3 colors red, green and blue. below is a table of color codes in html and how to use color codes in html
  • Basic Markdown syntaxPhoto of Basic Markdown syntax
    there are many reasons to use markdown, but the biggest reason is due to the convenience of using custom designed syntax to help you save time.