How to Add a Custom Contact Form to Shopify
Shopify's default contact form is basic. Here's how to add a custom form to your Shopify store using a Liquid template and Formboost — with webhooks to connect submissions to your CRM.
How to Add a Custom Contact Form to Shopify
Shopify has a built-in contact form, but it's minimal: submissions arrive by email with no dashboard, no spam filtering, and no way to trigger CRM automations. Here's how to replace it with a Formboost-powered form that gives you a searchable submission dashboard, AI spam filtering, and webhooks to connect to any tool.
What You Get Over Shopify's Default Form
- Submission dashboard — search, filter, and export all contact requests
- AI spam filtering — no bot submissions clogging your inbox
- Webhooks — add leads directly to Klaviyo, HubSpot, or any CRM
- No app required — a Liquid template change, no Shopify App Store install
Step 1: Create a Formboost Endpoint
Sign up at dashboard.formboost.app and create a new endpoint. You'll get a URL like:
https://formboost.app/f/YOUR_ENDPOINT_ID
Step 2: Edit Your Contact Page Template
In Shopify Admin, go to Online Store → Themes → Edit Code. Under Templates, open page.contact.liquid (or create it by duplicating page.liquid).
Replace the form section with:
1<div class="page-width">
2 <h1 class="h2">{{ page.title }}</h1>
3
4 <form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST" class="contact-form">
5 <div class="field">
6 <label class="field__label" for="name">Name</label>
7 <input class="field__input" type="text" id="name" name="name" required />
8 </div>
9
10 <div class="field">
11 <label class="field__label" for="email">Email</label>
12 <input class="field__input" type="email" id="email" name="email" required />
13 </div>
14
15 <div class="field">
16 <label class="field__label" for="phone">Phone (optional)</label>
17 <input class="field__input" type="tel" id="phone" name="phone" />
18 </div>
19
20 <div class="field">
21 <label class="field__label" for="message">Message</label>
22 <textarea class="field__input" id="message" name="message" rows="6"></textarea>
23 </div>
24
25 <button type="submit" class="button">Send Message</button>
26 </form>
27</div>This uses Shopify's native CSS classes (field__label, field__input, button) so it matches your theme automatically.
Step 3: Add a Reusable Section (Optional)
To embed the form anywhere via the Shopify customizer, create a new file sections/formboost-contact.liquid:
1<section class="section-{{ section.id }}-padding">
2 <div class="page-width">
3 {% if section.settings.heading != blank %}
4 <h2>{{ section.settings.heading }}</h2>
5 {% endif %}
6
7 <form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
8 <input type="text" name="name" placeholder="Name" required />
9 <input type="email" name="email" placeholder="Email" required />
10 <textarea name="message" placeholder="Message" rows="5"></textarea>
11 <button type="submit">Send</button>
12 </form>
13 </div>
14</section>
15
16{% schema %}
17{
18 "name": "Contact Form",
19 "settings": [
20 { "type": "text", "id": "heading", "label": "Heading", "default": "Contact Us" }
21 ],
22 "presets": [{ "name": "Contact Form" }]
23}
24{% endschema %}Now you can add this section to any page from the Shopify customizer.
Step 4: Pre-fill Logged-In Customer Details (Optional)
If a customer is logged in, Liquid can pre-fill their details:
1{% if customer %}
2 <input type="hidden" name="customer_name" value="{{ customer.name }}" />
3 <input type="hidden" name="customer_email" value="{{ customer.email }}" />
4{% endif %}Step 5: Custom Redirect (Optional)
After submission, redirect to a custom thank-you page:
1<input type="hidden" name="_redirect" value="https://yourstore.myshopify.com/pages/thank-you" />Step 6: Connect to Your CRM
In Formboost's Integrations tab, use the HTTP Webhook to forward every submission to your CRM:
- Klaviyo — add contacts to a list via the Klaviyo API
- HubSpot — create contacts automatically via webhook
- Zapier / Make — trigger any workflow from a new submission