How to Create a Working Contact Form Using HTML & CSS to Receive Contact Form Data on Email

A complete, step-by-step tutorial for beginners — from basic form markup to actually emailing your form submissions.

Ready to skip the tutorial and start receiving form submissions right away? Sign up!

Step 1: Build a Basic HTML Form

Let's start with the absolute basics! A form is like a digital piece of paper that collects information from your website visitors. Here's what you need to know:

The <form> tag is like a container - it tells the browser "Hey, everything inside here is part of a form that users can fill out!"
Each <input> tag creates a box where users can type things in (like their name or email)
The <textarea> tag creates a bigger box for longer messages


<!-- Step 1: Basic Contact Form -->
<form>
    <label for="name">Your Name:</label>
    <input type="text" id="name" name="name" required>

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

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

👆 The pink <form> tags wrap around everything, and the blue <input> tags create the boxes where users type their information.

Style It with CSS

Add this CSS to transform your ugly form into a modern masterpiece:

/* Basic Form Styling */
label {
    display: block;
    margin: 1rem 0 0.5rem;
    font-weight: 500;
}

input[type="text"],
textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: #4F46E5;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background: #4338CA;
}

Step 2: Make It Work

✨ Skip to creating your form receiver

Here's the tricky part: your form needs somewhere to send its data. Traditionally, this means setting up a server, database, and writing code to process submissions (yikes! 😅).

The easier way? Use FormReceiver! Here's how:

1. Create a FormReceiver account
2. Create a new receiver (this gives you a unique URL)
3. Add that URL to your form like this 👉

<form 
    action="https://formreceiver.com/receivers/YOUR_FORM_ID/submit/" 
    method="POST">

    // ... your form fields here ...

</form>

✨ action tells the form where to send data

✨ method="POST" tells it how to send it

Step 3: Try a Live Demo

See how your contact form submissions could appear in a dashboard or email inbox, using a simulation below.

👋 Test it out!

Your FormReceiver Dashboard

Track all submissions in one place

Your Email Inbox

Get instant form submission notifications from FormReceiver

New Form Submission

From:

Form Submission Details:

Name:
Message:

🚀 Ready to Launch Your Form?

Get your form working in under 2 minutes! No coding required.

Instant email notifications

Beautiful submission dashboard

Works with any HTML form

Create Your Form Receiver

Plans from $1/month