Add a Contact Form to Any Website - 5 Easy Ways

Every website needs a way for visitors to get in touch. A contact form for your website turns passive visitors into real conversations. It's often the single most important element on the page -- if it doesn't work, you lose leads.

But there are many ways to add a contact form, and the right choice depends on your setup. This guide covers 5 methods to add a contact form to any website, from copy-paste HTML to full custom backends, so you can compare the trade-offs and pick the one that fits your site.

Method 1: Form backend service (recommended)

A form backend service like FormWit lets you add a fully working contact form to your website using nothing but HTML. You write the form markup, point the action attribute to the service's endpoint, and every submission is processed, stored, and emailed to you automatically. No server code, no SMTP setup, no infrastructure to maintain.

Here's a complete contact form you can copy and paste into any website:

<form action="https://app.formwit.com/api/s/YOUR_FORM_ID" 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>

  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />

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

To get this working:

Sign up for a free FormWit account
Click Create Form in your dashboard
Copy the form endpoint URL
Paste it into the action attribute of your HTML form

That's it. When someone submits the form, FormWit receives the data, stores it in your dashboard, filters spam, and sends you an email notification. The hidden _gotcha field is a honeypot that catches bots. Real users never see it.

This approach works on any hosting: static sites, Netlify, Vercel, GitHub Pages, shared hosting, anywhere you can put HTML. You don't need a server, a database, or any backend language.

Best for: static sites, JAMstack, landing pages, portfolios, and anyone who wants a working contact form in minutes without writing backend code.

Method 2: JavaScript form widget

Third-party form builders like Tally, Typeform, and JotForm let you design a form using a visual drag-and-drop editor, then embed it on your website. You typically get either a <script> tag or an <iframe> to paste into your page.

The appeal is simplicity: you build the form in a browser-based editor, choose your fields, configure settings, and embed the result. No coding at all.

However, there are trade-offs:

Branding: Free plans usually display the widget provider's logo on your form. Removing it requires a paid plan.
Page speed: Embeds load external JavaScript and stylesheets, which adds weight to your page and can slow down rendering, especially on mobile.
Styling control: You're limited to the widget's built-in themes. Matching your site's exact design is difficult or impossible.
Data ownership: Your submissions live on the widget provider's servers. You may need to export them manually or pay for API access.

Best for: non-technical users who want drag-and-drop form building and don't mind third-party branding or slower page loads.

Method 3: CMS plugin

If your site runs on a content management system, you probably have access to built-in or third-party contact form options:

WordPress: Contact Form 7 (free), WPForms (freemium), Gravity Forms (paid)
Squarespace: built-in form blocks
Wix: built-in form app
Webflow: native form element with built-in submission handling

CMS plugins have the advantage of native integration. They work within your CMS admin panel, store submissions in the same system, and often match your theme's styling automatically.

The downside is that they tie you to that platform. If you migrate from WordPress to a static site, your contact form setup doesn't come with you. CMS plugins can also break after CMS updates, conflict with other plugins, or introduce security vulnerabilities if not kept up to date.

Best for: users already committed to WordPress or another CMS with built-in form support, who don't plan to change platforms.

Method 4: Custom backend (PHP, Node.js, Python)

You can build your own form handler from scratch. The form's action attribute points to a script on your server that receives the data, validates it, and sends an email using an SMTP library.

A minimal PHP example looks like this:

<?php
$name    = htmlspecialchars($_POST['name']);
$email   = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
$message = htmlspecialchars($_POST['message']);

if ($email) {
    mail(
        'you@example.com',
        'New contact form submission',
        "Name: $name\nEmail: $email\nMessage: $message",
        "From: noreply@yoursite.com"
    );
}

header('Location: /thank-you');
exit;

A Node.js equivalent would use Express to handle the route and Nodemailer to send via SMTP.

Custom backends give you complete control. You can process data however you like: store it in your own database, trigger webhooks, integrate with CRMs, or apply custom business logic.

But you also take on all the responsibility:

You need a server (or serverless function) running 24/7
You need to configure and maintain SMTP credentials
You need to build your own spam protection (CAPTCHA, rate limiting, input validation)
You need to handle errors, bounces, and edge cases
Security is entirely on you: SQL injection, XSS, CSRF protection

Best for: developers who need custom processing logic and already have server infrastructure in place.

Method 5: mailto: link

The mailto: approach isn't technically a form. It's a link that opens the user's default email client:

<a href="mailto:you@example.com">Contact us</a>

It requires zero setup. But the problems are significant:

Many users don't have a configured email client. On mobile, it might work. On desktop, many users use webmail (Gmail, Outlook) and clicking a mailto link either does nothing or opens an app they never use.
No control over what's sent. You can't require specific fields, validate input, or ensure you get the information you need.
No data storage. There's no dashboard, no submission history, no searchable archive.
Spam risk. Exposing your email address in the page source makes it trivially easy for scrapers to harvest it for spam lists.
Terrible user experience. The user is pulled out of your website and into a completely different application.

Best for: nothing, really. There's almost always a better option. If you're tempted by the simplicity, a form backend service is just as easy to set up and gives you a vastly better experience for both you and your visitors.

Which method should you use?

Here's how the five methods compare:

Method	Difficulty	Cost	Works on static sites	Spam protection
Form backend (FormWit)	Easy	Free tier available	Yes	Built-in
JavaScript widget	Easy	Usually paid	Yes	Varies
CMS plugin	Easy	Free	No (CMS only)	Varies
Custom backend	Hard	Server costs	No (needs server)	You build it
mailto: link	None	Free	Yes	None

For most websites, especially static sites, portfolios, and landing pages, a form backend service is the simplest and most reliable option. You get a working contact form with spam protection, email delivery, and a submission dashboard, all from a few lines of HTML. No server to manage, no plugins to update, no external scripts slowing down your page.

Common mistakes when adding a contact form

Forgetting the name attribute: Every input needs a name attribute, or the data won't be included in the submission. Use name="email", not just id="email".
Using GET instead of POST: Always use method="POST" for contact forms. GET appends form data to the URL, exposing user input in browser history and server logs.
No spam protection: An unprotected contact form will attract bot submissions within days. At minimum, add a honeypot field. A form backend with built-in filtering handles this for you.
No client-side validation: Add the required attribute to mandatory fields and use type="email" for email inputs. This gives users instant feedback before they submit.
Not testing on mobile: Over half of web traffic is mobile. Test your form on a phone to make sure fields are large enough to tap, labels are readable, and the submit button is easy to reach.

Summary

There are many ways to create a contact form for your website, but they're not all equal. Custom backends are overkill for most sites. CMS plugins tie you to a platform. JavaScript widgets add bloat and branding. And mailto links are a relic that hurts your user experience.

For most sites, a form backend service gives you the best balance of simplicity, reliability, and control. Write a few lines of HTML, point the action attribute to your endpoint, and you have a working contact form with spam protection and email delivery built in.

FormWit's free plan includes unlimited forms and 100 submissions per month. Get started free.

Trying to decide which form service to use? Our alternatives comparison puts all the major form backends side by side so you can pick the right one for your site.

Frequently asked questions

What's the easiest way to add a contact form?

Use a form backend service like FormWit. You write a standard HTML form, set the action attribute to your endpoint URL, and the service handles submissions, email delivery, and spam protection. Setup takes under 5 minutes with zero backend code.

Do I need to know how to code?

Not much. You need to copy-paste an HTML snippet and replace one placeholder with your form ID. If you can edit an HTML file or use a CMS embed block, you can add a working contact form. No server-side programming required.

Is FormWit free?

FormWit has a free plan that includes unlimited forms, 100 submissions per month, email notifications, spam protection, and a submission dashboard. No credit card required. Paid plans start at $39/year if you need higher volume or file uploads.