How to create a html contact form

by

This tutorial will cover the basic elements of a contact form, including input fields for the user’s name, email, and message, and a submit button. We’ll also include some basic CSS to style the form.

Tutorial: How to Create an HTML Contact Form

Introduction

In this tutorial, you will learn how to create a basic HTML contact form that can be embedded on any website. This form will include fields for a user’s name, email address, and a message. It’s a great way to allow your site visitors to communicate with you directly.

Requirements

  • Basic knowledge of HTML and CSS.
  • A text editor (like VSCode, Sublime Text, or Atom).
  • A web browser to test the form.

Step 1: Set Up Your HTML File

First, create a new HTML file named contact.html. You can do this using any text editor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- We will add our form here in the next steps -->
</body>
</html>

Step 2: Create the HTML Form

Inside the <body> tag of your HTML file, add the following HTML to create a form.

<form action="submit_form.php" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>

    <button type="submit">Send</button>
</form>

Here, the action attribute should point to the script that will process the form data. We’re using submit_form.php as a placeholder.

Step 3: Add Some Styles with CSS

Create a CSS file named styles.css and add the following styles to make your form look better.

body {
    font-family: Arial, sans-serif;
    margin: 40px;
}

form {
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 5px;
}

label {
    margin-top: 10px;
    display: block;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

Bonus: Free HTML5 Contact Form Generator

We have created a form generator that you can use to build your own contact forms and copy/paste into your own website with ease. They are free to download and can be used on your personal or commercial projects. Click here to check out our free contact form generator ↗️

Step 4: Create the PHP File

PHP script that can be used to handle the form data submitted from the HTML contact form we created. This script will process the form inputs and could be used to send an email or save the information to a database. For now, we’ll keep it simple and just display the submitted data.

Create a file named submit_form.php in the same directory as your HTML file. This PHP script will handle the form submission.

<?php
// Check if the form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Retrieve the form data
    $name = htmlspecialchars($_POST['name']);
    $email = htmlspecialchars($_POST['email']);
    $message = htmlspecialchars($_POST['message']);

    // Simple validation
    if (!empty($email) && filter_var($email, FILTER_VALIDATE_EMAIL)) {
        // Process your form (e.g., send an email, save to a database, etc.)
        // For now, we'll just display the data.
        echo "<h1>Thank you for your message, $name!</h1>";
        echo "<p>We will get back to you at <strong>$email</strong>.</p>";
        echo "<p>Your message: $message</p>";
    } else {
        echo "Please enter a valid email address.";
    }
} else {
    // Not a POST request, redirect to the form
    header('Location: contact.html');
    exit;
}
?>

Explanation of the PHP Script

  1. Check Form Submission: The script first checks if the form has been submitted using a POST request. This is important to avoid processing data that hasn’t been sent through the form.
  2. Retrieve and Sanitize Data: It retrieves data from the form using the $_POST superglobal. The htmlspecialchars() function is used to prevent XSS (Cross-site Scripting) attacks by converting special HTML characters to their HTML entities.
  3. Validation: The script validates the email address to ensure it’s in a proper format using filter_var() with FILTER_VALIDATE_EMAIL.
  4. Processing and Response: For the purpose of this tutorial, the script simply displays a thank you message along with the submitted data. In a real application, this could be where you send an email, log a ticket, or save the data to a database.
  5. Error Handling: If the email isn’t valid, it displays an error message. If the page is accessed without submitting the form, it redirects the user back to the contact.html page.

Next Steps

  • To actually send an email, you can use the mail() function in PHP. You’ll need to configure your server to send mail for this function to work.
  • Implement further security measures like using a library for better data sanitization and validation.
  • To prevent form resubmission when refreshing the page, you could redirect to a new page or implement a token-based system to handle form submissions.

This should give you a good foundation for handling contact form data with PHP!

Step 5: Testing

Open your contact.html file in a web browser to see your form in action. Fill out the fields and press the “Send” button to ensure everything is set up correctly.

Conclusion

Congratulations! You’ve successfully created a basic HTML contact form with styling. This form can be further customized and integrated into your website as needed.

Feel free to add more fields or include advanced features like validation to enhance your form’s functionality.

Leave a Comment