Add forms to Shopify

Add a contact form to any Shopify page, product, or your storefront.

Method 1: Page editor (HTML mode)

The simplest way to add a form is through Shopify's built-in page editor. This works for any standard page (like a Contact Us page).

In your Shopify admin, go to Online Store → Pages.
Create a new page or open an existing one.
In the content editor, click the </> button to switch to HTML mode.
Paste your FormBlade form HTML.
Click Save.

Example form styled for Shopify stores:

<form action="https://formblade.com/f/contact" method="POST"
  style="max-width:500px;font-family:inherit">

  <div style="margin-bottom:16px">
    <label style="display:block;font-size:14px;font-weight:600;margin-bottom:4px">Name</label>
    <input type="text" name="name" required
      style="width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:15px;font-family:inherit">
  </div>

  <div style="margin-bottom:16px">
    <label style="display:block;font-size:14px;font-weight:600;margin-bottom:4px">Email</label>
    <input type="email" name="email" required
      style="width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:15px;font-family:inherit">
  </div>

  <div style="margin-bottom:16px">
    <label style="display:block;font-size:14px;font-weight:600;margin-bottom:4px">Message</label>
    <textarea name="message" rows="5" required
      style="width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:15px;font-family:inherit;resize:vertical"></textarea>
  </div>

  <button type="submit"
    style="background:#000;color:#fff;border:none;padding:12px 28px;border-radius:4px;font-size:15px;font-weight:600;cursor:pointer">
    Send Message
  </button>
</form>

Replace /f/contact with your own form link from the dashboard.

Tip: Create a dedicated /pages/contact page for your form. You can then add it to your navigation under Online Store → Navigation.

Method 2: Edit Liquid templates

For more control — such as adding a form to product pages, collection pages, or the homepage — you can edit your theme's Liquid templates directly.

In your Shopify admin, go to Online Store → Themes.
Click Actions → Edit code on your active theme.
Navigate to the template file where you want the form.
Paste the form HTML at the desired position.
Click Save.

For example, to create a dedicated contact page template, create or edit templates/page.contact.liquid:

<div class="page-width">
  <div style="max-width:560px;margin:40px auto;padding:0 16px">
    <h1>{{ page.title }}</h1>
    <div>{{ page.content }}</div>

    <form action="https://formblade.com/f/contact" method="POST"
      style="margin-top:24px;font-family:inherit">

      <div style="margin-bottom:16px">
        <label style="display:block;font-size:14px;font-weight:600;margin-bottom:4px">Name</label>
        <input type="text" name="name" required class="input" style="width:100%">
      </div>

      <div style="margin-bottom:16px">
        <label style="display:block;font-size:14px;font-weight:600;margin-bottom:4px">Email</label>
        <input type="email" name="email" required class="input" style="width:100%">
      </div>

      <div style="margin-bottom:16px">
        <label style="display:block;font-size:14px;font-weight:600;margin-bottom:4px">Message</label>
        <textarea name="message" rows="5" required class="input" style="width:100%;resize:vertical"></textarea>
      </div>

      <button type="submit" class="btn">Send Message</button>
    </form>
  </div>
</div>

Replace /f/contact with your own form link from the dashboard.

Using Shopify's CSS classes like input and btn (if your theme defines them) lets the form inherit your store's styling automatically. Then assign this template to a page under Pages → your page → Theme template.

Method 3: Iframe embed

If you want the simplest setup with no HTML to manage, embed your hosted FormBlade form as an iframe. This works in the page editor (HTML mode) or in Liquid templates.

<iframe
  src="https://formblade.com/f/contact"
  width="100%"
  height="500"
  frameborder="0"
  style="border:none;max-width:600px">
</iframe>

Replace /f/contact with your own form link from the dashboard.

Tips

Set a redirect URL

Shopify's Content-Security-Policy headers may interfere with the default FormBlade thank-you page display. To avoid any issues, always set a Redirect URL in your FormBlade form settings. Point it to a thank-you page on your Shopify store, for example https://yourstore.myshopify.com/pages/thank-you. This way, after submission the user is redirected back to your store with a standard navigation.

Use a dedicated contact page

Create a page specifically for your contact form and add it to your store's main navigation. This is more user-friendly than embedding a form on a product page. You can still add smaller forms (like newsletter signups) to other areas of your site using Liquid templates.

Troubleshooting

Form submission blocked (CSP error)

Shopify sets Content-Security-Policy headers that may block form submissions to external domains on some themes. If you see a CSP error in the browser console:

Set a redirect URL in FormBlade — this bypasses the issue because the browser navigates away from the Shopify page.
Alternatively, use the iframe method — since the iframe loads from formblade.com, the form submits within its own origin and is not affected by Shopify's CSP.
If using AJAX submission, you should not encounter CSP issues because FormBlade sets appropriate CORS headers.

Form not visible on the page

If you pasted the form code but it does not appear, you are likely in the Rich Text editor instead of HTML mode. Click the </> button in the page editor toolbar to switch to HTML mode. The form code must be entered as raw HTML, not as text content.