How to Embed a Contact Form in Any Website

You can embed a fully working contact form on any website with a few lines of HTML. No iframes, no JavaScript dependencies, no third-party branding. Just a native HTML form that sends submissions straight to your email. This works on Carrd, Webflow, Framer, plain HTML pages, and any platform that supports custom code.

This guide shows you how to embed contact form HTML in any website or platform that supports custom code. You'll get a ready-to-paste snippet, platform-specific instructions, and tips for customizing the form to match your site's design.

The embed code

Here's the complete form HTML you can embed in 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>

This is a standard HTML form, not an iframe or JavaScript widget. It uses a regular <form> element with a POST action, so it inherits your site's existing CSS automatically. The hidden _gotcha field is a honeypot that catches spam bots without annoying your visitors with CAPTCHAs.

Get your form endpoint

Before embedding the form, you need a FormWit endpoint to receive submissions:

Sign up for a free FormWit account. No credit card required
Click Create Form in your dashboard and give it a name
Copy the form endpoint URL and replace YOUR_FORM_ID in the embed code above

That's it. Every submission is stored in your dashboard and forwarded to your email.

Embedding in specific platforms

The embed code works on any platform that lets you add custom HTML. Here are step-by-step instructions for the most popular ones.

Carrd

Open your Carrd site in the editor
Click + to add a new element and select Embed
Set the type to Code
Paste the form HTML into the code field
Replace YOUR_FORM_ID with your endpoint ID

Carrd supports inline HTML forms natively, so the form renders directly on the page. You can add inline styles to the form elements or include a <style> block above the form to match your Carrd theme. See the full Carrd contact form guide for detailed styling tips.

Webflow

Open the Webflow Designer
Add an Embed element where you want the form to appear
Paste the form HTML into the embed code editor
Replace YOUR_FORM_ID with your endpoint ID

Style the form using Webflow's custom CSS panel or your site's stylesheet. Note that this replaces Webflow's built-in form handler with FormWit's endpoint, giving you a dashboard, email notifications, and spam protection that Webflow's native forms don't include.

Framer

In the Framer editor, add a Code component to your page
Paste the form HTML into the component
Replace YOUR_FORM_ID with your endpoint ID

Framer renders custom HTML components inline, so the form appears as part of your page layout. Style it with a <style> block inside the code component or with your site's global styles.

Static HTML site

Paste the form HTML directly into your HTML file wherever you want the form to appear. No wrapper elements or special setup needed:

<!DOCTYPE html>
<html>
<body>
  <h1>Contact Us</h1>

  <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>
</body>
</html>

Style it with your existing CSS. The form uses standard HTML elements, so any styles targeting form, input, textarea, and button will apply automatically.

Next.js / React

For React-based sites, you can use the form as a regular HTML form inside a component:

function ContactForm() {
  return (
    <form action="https://app.formwit.com/api/s/YOUR_FORM_ID" method="POST">
      <label htmlFor="name">Name</label>
      <input type="text" id="name" name="name" required />

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

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

      <input type="text" name="_gotcha" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />

      <button type="submit">Send Message</button>
    </form>
  );
}

This works as a standard form submission with a page redirect. For a no-reload experience, submit via fetch instead. See the AJAX submission section below.

Customize the embedded form

Styling

The form uses native HTML elements that inherit your site's existing CSS. To add custom styles, target the standard selectors:

form {
  max-width: 500px;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

button[type="submit"] {
  background: #4f46e5;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background: #4338ca;
}

Custom redirect

By default, FormWit shows a simple confirmation page after submission. To redirect users to your own thank-you page, add a hidden field:

<input type="hidden" name="redirect_to" value="https://yoursite.com/thank-you" />

AJAX submission

To submit the form without a page reload, use the Fetch API:

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = new FormData(form);

  const response = await fetch(form.action, {
    method: 'POST',
    body: data,
  });

  if (response.ok) {
    form.reset();
    alert('Message sent!');
  } else {
    alert('Something went wrong. Please try again.');
  }
});

This approach works on any platform and gives you full control over the success/error UI.

Why embed a form instead of using an iframe?

Some form services give you an iframe to paste into your site. Here's why a native HTML embed is the better choice in almost every case:

Iframe drawbacks:

Doesn't match your site's design. It renders in an isolated frame with its own styles
Responsive issues on mobile. Iframes don't resize fluidly with the page
Some browsers and ad blockers block third-party iframes
Slower page load. The browser must fetch and render a separate document
Invisible to search engines. Content inside iframes is not indexed with your page

Native HTML form advantages:

Inherits your site's existing styles automatically
Fast. No extra network request to load the form
Fully accessible. Screen readers and keyboard navigation work out of the box
SEO-friendly. The form content is part of your page
No third-party branding or "Powered by" badges
Works everywhere. Every browser, every device, every platform

The only advantage of an iframe is zero configuration: you paste a URL and get a pre-styled form. But the trade-offs are rarely worth it. A native HTML form gives you full control and a better user experience.

Summary

Embedding a contact form on any website takes one HTML snippet and a free FormWit endpoint. The form works on Carrd, Webflow, Framer, static HTML sites, React apps, and any platform that supports custom code. Because it's a native HTML form, it matches your site's design, loads fast, and works on every device.

FormWit's free plan includes unlimited forms, 100 submissions per month, and email notifications. Create your free account and embed a contact form in under a minute.

Frequently asked questions

Can I embed a form on any website?

Yes, as long as the platform lets you add custom HTML. This includes static HTML sites, Carrd (Pro plan), Webflow, Framer, WordPress, Squarespace (Business plan), and any static site generator like Astro, Hugo, or Jekyll.

Does the form work on Squarespace?

Yes, but you need a Squarespace Business plan or higher to use Code Blocks. Add a Code Block to your page, paste the form HTML, and replace the form ID. The form submits directly to FormWit, bypassing Squarespace's native form handler.

Can I embed on multiple pages?

Yes. You can use the same FormWit endpoint on as many pages as you want. All submissions from every page go to the same dashboard and email. If you want separate tracking per page, create a different form in your dashboard for each page.