How to Add a Real Contact Form to Carrd Sites 2026

Why Carrd's built-in form isn't enough

Carrd is the best one-page site builder on the internet for $19/year. The form element, though, has barely changed since 2018. Here's exactly what you give up with the built-in form:

• Three fields, hard cap. Name, email, message. That's it. No phone, no company, no dropdown, no multi-select. If you sell a service, run a freelance studio, or take qualified leads, three fields isn't enough.
• No file uploads at any plan. Even Pro Plus ($49/yr) doesn't enable uploads. Logo designers, photographers, recruiters — anyone who needs an attachment is stuck.
• No webhooks, no Zapier, no Slack. Submissions only go to email. You can't pipe to a CRM without paid third-party glue.
• Branding in every email. Notifications include a "sent via Carrd" footer. Not deal-breaking, but unprofessional for client work.
• Pro Standard ($19/year) is still required. The form element itself is paywalled. You're already paying — you may as well get a real form for the same money.
• Spam protection is weak. Basic honeypot only, no AI classification, no rate limiting. The first time your site gets indexed in a spam directory, you'll regret it.

The fix is simple: keep Carrd Pro Standard for the page builder, but use Carrd's Embed element to drop in an HTML form powered by splitforms. Five minutes of work, zero extra monthly cost (splitforms free tier covers 1,000 submissions/month), and every limitation above disappears.

Step 1: Get a splitforms access key (1 minute)

1. Go to splitforms.com/login
2. Enter the email you want submissions delivered to. Get the 6-digit code, paste it.
3. Copy the auto-generated access key from your dashboard — it looks like a1b2c3d4-e5f6-7890-abcd-ef1234567890.
4. Optional: in the dashboard's Security tab, add your Carrd domain(s) to Allowed Domains. Include both *.carrd.co and your custom domain if you have one.

No credit card. No plan to pick. The free tier gives 1,000 submissions/month forever, with webhooks, AI spam filtering, and file uploads all included. Plenty of headroom for any Carrd-scale site.

Step 2: Build the HTML form

Open a new text file. Paste in the following — replace YOUR_ACCESS_KEY with the key from step 1.

<form action="https://splitforms.com/api/submit" method="POST" enctype="multipart/form-data" style="max-width:480px;margin:0 auto;font-family:inherit;">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="hidden" name="subject" value="New lead from carrd site" />
  <input type="hidden" name="redirect" value="https://yoursite.carrd.co/thanks" />

  <label style="display:block;margin:12px 0 4px;font-size:14px;">Name</label>
  <input type="text" name="name" required style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:15px;" />

  <label style="display:block;margin:12px 0 4px;font-size:14px;">Email</label>
  <input type="email" name="email" required style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:15px;" />

  <label style="display:block;margin:12px 0 4px;font-size:14px;">Phone (optional)</label>
  <input type="tel" name="phone" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:15px;" />

  <label style="display:block;margin:12px 0 4px;font-size:14px;">What do you need?</label>
  <textarea name="message" required rows="4" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:15px;font-family:inherit;"></textarea>

  <label style="display:block;margin:12px 0 4px;font-size:14px;">Attachment (optional)</label>
  <input type="file" name="attachment" style="font-size:14px;" />

  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />

  <button type="submit" style="margin-top:16px;width:100%;padding:12px;background:#111;color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;">Send</button>
</form>

Two things matter here. First, every style is inlined. Carrd's Embed iframe sandbox blocks linked stylesheets and external fonts in many configurations, so inlining is safer. Second, enctype="multipart/form-data" is required because you have a file input — leave it off and uploads silently fail.

If you don't need file uploads, drop the enctype attribute and the <input type="file"> line. The rest still works. If you want a framework-rendered version for a non-Carrd project, the same field contract maps cleanly to a Next.js form backend, React form backend, or Astro form backend.

Step 3: Embed the form in Carrd

1. Open your Carrd site in the editor.
2. Click the + button on the section where you want the form.
3. Choose Embed (gear icon in the element picker).
4. In the Embed settings, set Type to HTML (not URL).
5. Paste the entire <form>...</form> block from step 2 into the code box.
6. Set Width to 100% and Height to Auto.
7. Click Done. The form should render live in the preview pane.

If the embed shows a blank box, see the troubleshooting section below. Most blank embeds are caused by Carrd stripping <script> tags or by external resource refs.

The Embed element is Pro Standard only

The Embed element is gated behind Carrd Pro Standard ($19/year). If you're still on the free Carrd plan, you have to upgrade — but you do not need Pro Plus ($49/year) for forms. Pro Standard plus splitforms' free tier is the cheapest path to a real contact form on Carrd, period.

Style the form to match your Carrd theme

Carrd themes use a small set of design tokens — usually one accent color and one font. To make your embedded form blend in:

• Font family. Use font-family: inherit on the form and all inputs. The Embed element inherits Carrd's page font, so your form picks it up automatically.
• Accent color. Grab the hex from your Carrd theme's primary color (Settings → Style → Colors). Use it for the submit button background and for input border on focus.
• Border radius. Match Carrd's rounded buttons by setting border-radius: 6px (or whatever your theme uses) on inputs and the button.
• Spacing. Carrd defaults to 16–24px vertical spacing between elements. Mirror that on your form's labels and inputs.

One quick win: add a :focus style to inputs by inlining it via onfocus / onblur attributes. CSS pseudo-selectors don't work inline, so you simulate them with JavaScript event handlers. Example:

<input type="text" name="name" required
  onfocus="this.style.borderColor='#0066ff'"
  onblur="this.style.borderColor='#ddd'"
  style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;" />

Ugly, but it works inside Carrd's iframe sandbox.

Validation, file uploads, and custom fields

HTML5 validation

The form above uses required on the name, email, and message fields. The browser handles validation natively — no JS needed. For email, type="email" ensures the browser rejects non-email strings. For phone, you can add pattern="[0-9+\\-\\s]+" to restrict to digits, dashes, and spaces. Carrd's iframe respects HTML5 validation, so you don't need anything custom.

File uploads (which Carrd's built-in form cannot do)

This is the killer feature. Carrd's built-in form has zero file upload capability at any plan tier — Pro Plus included. With a splitforms embed, you add one line:

<input type="file" name="attachment" accept=".pdf,.jpg,.png" />

Set enctype="multipart/form-data" on the <form> tag. After you connect Storage in splitforms, uploads can include up to 5 files per submission at 10 MB each and are stored with signed download URLs.

Custom fields

Add as many fields as you want. Carrd's 3-field cap doesn't apply because the form isn't a Carrd form anymore. Common adds: company, budget, project type (dropdown), how-did-you-hear-about-us. Just name each input with a unique name attribute and splitforms passes it through to the notification email.

Spam protection

Carrd forms get scraped fast. The first time your site is indexed by Google, bot submissions start within days. Three defenses, layered:

1. Honeypot field. The hidden botcheck checkbox in the example form catches naive bots that fill every field. Cost: zero. Effectiveness: ~95% of bots.
2. AI spam classification. splitforms runs every submission through an LLM-based classifier that catches content-pattern spam (crypto, SEO outreach, fake leads). Included free. See the AI spam detection benchmark for accuracy numbers.
3. Cloudflare Turnstile (optional). For sites that get hammered, drop in Turnstile — it's free and invisible. Walk-through in honeypot vs reCAPTCHA.

For 99% of Carrd sites, the honeypot plus AI classifier is enough. Don't add Turnstile until you actually see spam getting through.

Mobile preview, test, and publish

1. Preview in Carrd. Hit the eye icon in the editor toolbar. Carrd shows a desktop and mobile preview side-by-side. Your form should fill the column on desktop and scale to full width on mobile.
2. Test submission (preview mode). In the Carrd preview, fill the form and submit. You should be redirected to your thanks URL (or see the splitforms success JSON if you didn't set redirect).
3. Check email. Within 5 seconds, the notification email should land in the address you signed up with.
4. Check the splitforms dashboard. Open splitforms.com/dashboard/submissions — your test submission should appear with all fields and any uploaded file.
5. Publish. Once tested, hit Publish in Carrd. Your live site is now collecting submissions through splitforms.

If the form works in preview but not on the published site, check Allowed Domains in your splitforms security settings — submissions from the live *.carrd.co URL might be blocked if you only allowed your custom domain.

Troubleshooting

• Embed is blank. Carrd strips <script> tags inside Embed elements. Move any inline JS to onsubmit / onclick attributes or rely on HTML5 validation. Also check that you set Type to HTML (not URL) in the Embed settings.
• Submission returns 401 Unauthorized. Wrong access key, or your live Carrd domain isn't in Allowed Domains. Re-copy the key from the dashboard. Add both *.carrd.co and your custom domain to Allowed Domains.
• File upload silently fails. You forgot enctype="multipart/form-data" on the <form> tag. Without it, the browser sends the file name as text and splitforms receives an empty attachment.
• Redirect doesn't work. The redirect hidden input must contain a fully-qualified URL with https://. Relative paths get rejected. If your thanks page is on the same Carrd site, use the full URL anyway.
• Form looks broken on mobile. Set max-width:100% on the form container and every input. Carrd's mobile column is ~340px wide; if any element is wider, you'll get horizontal overflow.
• Custom domain not delivering. Carrd serves custom domains through their CDN — initial DNS propagation can take 24 hours. During that window, both yoursite.carrd.co and yourbusiness.com should be in Allowed Domains, otherwise some users hit a CORS-style rejection.
• Iframe sandbox warnings in console. Carrd's Embed iframe runs with sandbox="allow-forms allow-scripts allow-same-origin". Anything requiring allow-top-navigation (like some payment redirects) won't work. For contact forms this never matters.
• Notification email goes to spam. Add your splitforms sender domain to your inbox's safe senders. Or configure custom SMTP in your splitforms dashboard to send through Gmail / SES / your own server. See contact form not working for the full deliverability checklist.

Next steps and related reading

• Need a head-start? Grab a free HTML contact form template pre-wired to splitforms — paste it straight into the Embed.
• Comparing options: best free form backend services 2026.
• Migrating off Formspree? 5-minute Formspree migration guide.
• On-the-fence about splitforms? splitforms vs Formspree, splitforms vs Web3Forms.
• API contract and webhook docs: /docs, /api-reference.
• Plan, security, and EU residency questions: /faq.
• Browse more tutorials: splitforms blog.
• Ready to start? Get your free splitforms access key.

FAQ