How to Create a Contact Form and Receive Emails in Gmail

0
By on HTML/CSS

Contact forms are essential for any website, enabling users to send inquiries and feedback without hassle. In this guide, we will create a simple yet fully functional contact form using HTML and CSS, and then link it to Gmail using Formspree, a free form submission service.

Step 1: Setting Up Your Project

To begin, create a new folder for your project (e.g., contact-page) and open it in VS Code. Inside this folder, create two files:

  • index.html (for the form structure)
  • style.css (for styling)

Recommended VS Code Extensions

For an optimized development experience, consider installing:

  • Live Server – Enables real-time updates in the browser.
  • HTML to CSS Autocompletion – Provides auto-suggestions when linking styles to HTML elements.

Step 2: Creating the Contact Form with HTML

Inside index.html, set up a basic HTML structure and link the CSS file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Signika&display=swap" rel="stylesheet">
</head>
<body>
    <div class="contact-section">
        <div class="contact-form">
            <h2>Contact Us</h2>
            <p>We’re excited to hear from you!</p>
            <form action="" method="post">
                <div class="input-group">
                    <input type="text" name="name" placeholder="Enter your name" required>
                    <input type="email" name="email" placeholder="Enter your email" required>
                </div>
                <input type="text" name="subject" placeholder="Subject" required>
                <textarea name="message" placeholder="Your message" required></textarea>
                <button type="submit">Send Message</button>
            </form>
        </div>
    </div>
</body>
</html>

Step 3: Styling the Contact Form with CSS

In style.css, add the following styles for a clean and modern design:

body {
    font-family: 'Signika', sans-serif;
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.contact-section {
    background: white;
    padding: 30px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
}

.input-group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.input-group input, textarea, input[type="text"], input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    font-size: 18px;
    cursor: pointer;
    margin-top: 15px;
    border-radius: 5px;
}

button:hover {
    background-color: #218838;
}

Step 4: Linking the Form to Gmail Using Formspree

Since we are not using a backend, we will use Formspree to handle form submissions and send emails to our Gmail inbox.

  1. Sign up on Formspree – Go to Formspree and create an account.
  2. Create a new form – After registering, create a new form and copy the form endpoint URL.
  3. Update the form action – Replace the form action in index.html with the copied URL, and set the method to POST.
<form action="https://formspree.io/f/{your-form-id}" method="post">

Step 5: Testing the Form Submission

  1. Open the index.html file using Live Server in VS Code.
  2. Fill out the form with dummy data and submit it.
  3. Check your Gmail inbox – you should receive an email with the submitted details.

Conclusion

You have successfully created a contact form, styled it, and linked it to Gmail using Formspree. This setup allows website visitors to send inquiries without requiring a backend. For more custom features, you can integrate a server-side solution like PHP or Node.js in the future.

Share.

Related Tutorials

Exit mobile version