Shopify

Adding a Form to Shopify

Shopify themes use Liquid templating. You can add a Formward-powered contact form as a custom section without touching your theme's default contact page.

1. 01Create your form in Formward

   Sign up at formward.eu, create a new form, and copy the endpoint URL (https://formward.eu/f/your-form-id).

2. 02Create a custom section

   In the Shopify admin, go to Online Store > Themes > Edit code. Under Sections, click Add a new section, name it formward-contact, and replace the contents with the Liquid snippet below.

   {% comment %}
     sections/formward-contact.liquid
     Renders a contact form that posts to Formward.
   {% endcomment %}
   
   <section class="formward-contact page-width" style="padding:60px 0">
     <h2>{{ section.settings.heading }}</h2>
   
     <form action="https://formward.eu/f/your-form-id" method="POST"
       style="display:flex;flex-direction:column;gap:16px;max-width:520px;margin-top:24px">
   
       <div>
         <label for="fw-name">Name</label>
         <input id="fw-name" type="text" name="name" required
           style="display:block;width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:1rem;box-sizing:border-box;margin-top:4px" />
       </div>
   
       <div>
         <label for="fw-email">Email</label>
         <input id="fw-email" type="email" name="email" required
           style="display:block;width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:1rem;box-sizing:border-box;margin-top:4px" />
       </div>
   
       <div>
         <label for="fw-message">Message</label>
         <textarea id="fw-message" name="message" rows="5" required
           style="display:block;width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:1rem;box-sizing:border-box;resize:vertical;margin-top:4px"></textarea>
       </div>
   
       <!-- honeypot: keep hidden -->
       <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
   
       <button type="submit"
         style="align-self:flex-start;padding:12px 28px;background:#000;color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer">
         Send message
       </button>
     </form>
   </section>
   
   {% schema %}
   {
     "name": "Formward Contact",
     "settings": [
       {
         "type": "text",
         "id": "heading",
         "label": "Heading",
         "default": "Contact us"
       }
     ],
     "presets": [
       { "name": "Formward Contact" }
     ]
   }
   {% endschema %}

3. 03Add the section to a page

   In the Theme editor (Customize), navigate to the page where you want the form, click Add section, and choose Formward Contact from the list. You can also add it to the contact page template by editing templates/page.contact.json.

4. 04Test and view submissions

   Preview your theme, open the contact page, and submit the form. Shopify does not intercept the POST; it goes straight to Formward. Open the Formward dashboard to confirm the submission arrived.