How to Add a Contact Form to Carrd (Step-by-Step)

Carrd is a popular one-page website builder, but its built-in form feature has limitations. It only works on Pro plans and offers basic functionality. With a form backend service, you can add a fully functional contact form to Carrd that gives you a dashboard, spam protection, and email notifications.

What you need

• A Carrd site (free or Pro)
• A free FormWit account
• Carrd's Embed element (available on Pro plans)

Note: Carrd's embed element requires a Pro plan ($19/year). If you're already on Pro, this approach gives you much more control than Carrd's built-in form widget.

Step 1: Get your FormWit endpoint

1. Create a free FormWit account
2. Click Create Form in your dashboard
3. Copy your form endpoint URL (looks like https://app.formwit.com/api/s/YOUR_FORM_ID)

Step 2: Add an Embed element in Carrd

1. Open your Carrd site in the editor
2. Click + to add a new element
3. Select Embed
4. Set the type to Code
5. Paste the following HTML into the code field:

<form action="https://app.formwit.com/api/s/YOUR_FORM_ID" method="POST">
  <input type="text" name="_gotcha" style="display:none" />

  <input type="text" name="name" placeholder="Your name" required
    style="width:100%; padding:10px; margin-bottom:12px; border:1px solid #ccc; border-radius:6px; font-size:16px;" />

  <input type="email" name="email" placeholder="Your email" required
    style="width:100%; padding:10px; margin-bottom:12px; border:1px solid #ccc; border-radius:6px; font-size:16px;" />

  <textarea name="message" placeholder="Your message" rows="4" required
    style="width:100%; padding:10px; margin-bottom:12px; border:1px solid #ccc; border-radius:6px; font-size:16px; resize:vertical;"></textarea>

  <button type="submit"
    style="width:100%; padding:12px; background:#4f46e5; color:white; border:none; border-radius:6px; font-size:16px; cursor:pointer;">
    Send Message
  </button>
</form>

Replace YOUR_FORM_ID with the endpoint ID from your FormWit dashboard.

Step 3: Customize the styling

Since the form is embedded via HTML, you style it with inline CSS or a <style> block inside the embed. Here are some common customizations:

Match your Carrd theme colors

Change the button background color to match your site. For example, if your Carrd theme uses a dark background:

<style>
  form input, form textarea {
    background: #1a1a2e;
    color: #fff;
    border: 1px solid #333;
  }
  form input::placeholder, form textarea::placeholder {
    color: #888;
  }
  form button {
    background: #e94560;
  }
  form button:hover {
    background: #c73e54;
  }
</style>

Add this <style> block above the <form> in the embed code.

Adjust form width

By default, the form takes the full width of the embed container. You can set a max width:

<div style="max-width:400px; margin:0 auto;">
  <form ...>
    ...
  </form>
</div>

Step 4: Add a redirect (optional)

To send users to a thank-you page after submission, add a hidden input:

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

You can redirect to a section on the same Carrd page using an anchor link, or to a separate URL.

Why use FormWit instead of Carrd's built-in forms?

• Dashboard: View, search, and manage all submissions in one place
• Submission storage: Carrd's forms only send emails. FormWit stores data so you can access it later
• Spam protection: Built-in honeypot and rate limiting
• File uploads: Accept attachments on paid plans
• Webhooks: Send submissions to Slack, Zapier, or any URL

Summary

Adding a contact form to Carrd with FormWit gives you more control than the built-in form widget. Use an embed block, paste the HTML form code, and customize the styling to match your theme.

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

Related guides: HTML contact form · Embed a contact form · Webflow contact form · Spam protection methods · Contact form templates

Frequently asked questions

Can I add a contact form to Carrd free plan?

You need Carrd's Pro plan ($19/year) to use the Embed element, which is required for adding custom HTML forms. The free plan does not support embed blocks or custom code.

Does FormWit work with Carrd Pro?

Yes. Carrd Pro supports HTML embeds, which is all you need. Paste the form HTML into an Embed element set to "Code" mode, replace the form ID, and submissions go straight to FormWit. No additional Carrd configuration needed.

Can I customize the form styling?

Yes. Since the form is embedded as raw HTML, you control the styling with inline CSS or a style block inside the embed. You can match your Carrd theme's colors, fonts, and spacing by editing the CSS properties on each form element.