CUSTOM CONTACT FORM

Build a custom contact form — your fields, your design.

Drag-and-drop the fields you need, style it to match your brand, or paste your own HTML, CSS, and JavaScript. Then drop it on WordPress, Shopify, or any site with a shortcode or a self-contained iframe.

Open the builder →How it works

Drag-and-drop custom contact form builder with live preview

§ 01Step-by-step guide

Build it your way

From a blank form to a branded, embeddable contact form.

Create a form and open the builder
In your splitforms dashboard, create a form and open the Form builder tab. It's a drag-and-drop editor: field elements on one side, a live preview on the other.
Add and arrange your fields
Drag in the fields you need — name, email, phone, dropdowns, dates, file uploads, long messages — reorder them, set labels and placeholders, and mark which are required.
Style it, or paste custom code
Pick a layout and style preset, or switch to the custom-code panel and paste your own HTML, CSS, and JavaScript. The live preview updates as you type.
Get the shortcode or iframe
Open the CRM tab, choose your platform (WordPress, Shopify, and more), and copy the shortcode for the plugin or a self-contained iframe embed for any site.
Embed and collect leads
Paste the shortcode or iframe on your page. Submissions flow into your dashboard, your email, and any connected integration — with spam filtering built in.

§ 02Full control

Bring your own HTML, CSS & JavaScript.

Prefer to hand-write it? Paste custom markup and styles into the builder’s code panel. Point the form at the splitforms endpoint with your access key and it just works.

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <label>Full name <input name="name" required /></label>
  <label>Email <input name="email" type="email" required /></label>
  <label>Budget
    <select name="budget">
      <option>Under $1k</option>
      <option>$1k–$5k</option>
      <option>$5k+</option>
    </select>
  </label>
  <label>Project details <textarea name="message" required></textarea></label>
  <button type="submit">Send request</button>
</form>

§ 03Shortcode

WordPress shortcode.

With the free plugin, your custom form renders from one shortcode — fields, styling, and all.

[splitforms]

§ 04Iframe

Iframe for any platform.

Not on WordPress? Drop a self-contained iframe on Shopify, Webflow, Framer, or a plain HTML page.

<iframe
  title="Contact form"
  loading="lazy"
  style="width:100%;border:0;min-height:520px"
  srcdoc='<form action="https://splitforms.com/api/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
    <input name="name" placeholder="Name" required />
    <input name="email" type="email" placeholder="Email" required />
    <textarea name="message" placeholder="Message" required></textarea>
    <button type="submit">Send</button>
  </form>'
></iframe>

§ 05Keep reading

Contact form for WordPress

Plugin shortcode or plain HTML block — free for 500 submissions a month, no SMTP setup.

Open →

WordPress no-plugin guide

Paste the form into a Custom HTML block and go live in five minutes.

Open →

Custom form for Shopify

Embed your custom form in a Shopify theme or Custom Liquid section.

Open →

HTML form generator

Generate clean form markup you can paste and customize anywhere.

Open →

§ 06FAQ

How do I build a custom contact form?

Use the splitforms Form builder: a drag-and-drop editor where you add any fields, set labels and validation, and choose a style. If you want full control, the custom-code panel accepts your own HTML, CSS, and JavaScript with a live preview.

Can I add custom fields like dropdowns, file uploads, or dates?

Yes. The builder supports text, email, phone, URL, number, date, dropdown, long text, and file upload fields. You can reorder them and mark any field required.

Can I use my own HTML and CSS for the contact form?

Yes. Switch the builder to the custom-code panel and paste your own HTML, CSS, and JavaScript. The preview renders it live, and the form posts to the splitforms endpoint with your access key.

How do I add my custom form to WordPress?

Copy the [splitforms] shortcode and paste it with the free plugin, or copy the self-contained iframe embed and drop it into a Custom HTML block. Both render the exact form you designed.

Does each custom form have its own key?

Yes. Every form has its own access key, so a custom quote form, a support form, and a newsletter form each keep their submissions, styling, and integrations separate.