How To Create A Contact Form In HTML And CSS

Creating a contact form using HTML and CSS with FabForm involves setting up a form on your HTML page and configuring it to submit data to FabForm’s endpoint. FabForm provides you with a form endpoint URL that you’ll use as the action attribute in your HTML form tag.

Here’s a step-by-step guide:

1. Create an Account on FabForm.io

Visit FabForm.io and sign up for an account.
Create a new form, and you will be provided with a form endpoint URL.

2. HTML Markup (index.html)

Create an HTML file with a simple contact form:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Contact Form with FabForm</title>
</head>

<body>
    <div class="container">
        <form action="https://fabform.io/f/{form_id}" method="post" class="contact-form">
            <h2>Contact Us</h2>
            <div class="form-group">
                <label for="name">Your Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Your Email</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">Message</label>
                <textarea id="message" name="message" rows="4" required></textarea>
            </div>
            <button type="submit">Send Message</button>
        </form>
    </div>
</body>

</html>

Replace "YOUR_FABFORM_ENDPOINT" in the action attribute with the actual endpoint URL provided by FabForm.

3. CSS (styles.css)

Style your form with CSS:

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

.container {
    width: 100%;
    max-width: 400px;
}

.contact-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

input,
textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

4. Test the Form

Open your HTML file in a web browser.
Fill out the form and click the “Send Message” button.

5. Check FabForm Dashboard

After submitting the form, check the submissions on the FabForm dashboard associated with your account.