> For the complete documentation index, see [llms.txt](https://help.mimeeq.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.mimeeq.com/commerce-and-integrations/custom-commerce/third-party-forms.md).
# Third-Party Forms
Learn how to capture product configuration data from Mimeeq configurators and automatically pre-fill third-party forms like Zapier Interfaces.
## Overview
{% hint style="info" %}
Learn how to capture product configuration data from Mimeeq configurators and automatically pre-fill third-party forms like Zapier Interfaces. This no-code guide shows how to listen for browser events, pass configuration details via URL parameters, and trigger automated workflows—no backend required.
{% endhint %}
When a user clicks the **Add to Cart** (or **Request a Quote**) button inside a Mimeeq configurator, the embed fires a browser event called mimeeq-add-to-cart. This event carries a rich payload describing exactly what the user configured — selected options, quantities, pricing, product codes, and more. This guide shows you how to listen for that event and pass the data into a third-party form automatically — no back-end code required. We use **Zapier Interfaces** as the example form tool because it has a generous free tier and connects natively to the rest of the Zapier automation ecosystem (email, Google Sheets, HubSpot, Salesforce, Slack, and hundreds more). The same approach works with most other embeddable form tools (Typeform, Tally, HubSpot forms, etc.) as long as they support URL query-parameter pre-filling.
***
## How It Works — The Big Picture
```plaintext
User configures product → clicks Add to Cart
↓
Browser fires: mimeeq-add-to-cart event (with full payload)
↓
Your JavaScript reads the payload and builds a query string
↓
Zapier Interfaces form opens with fields pre-filled via query params
↓
User reviews / adds contact details → submits the form
↓
Zapier Zap triggers: send email, write to CRM, log to spreadsheet…
```
***
## Part 1 — Understanding the Event Payload
When the mimeeq-add-to-cart event fires, event.detail contains an object with the following useful properties. You don't need to use all of them — pick what makes sense for your workflow.
| Property | Description | Example value |
| --------------------- | -------------------------------------------------------------- | ----------------------------- |
| `productCode` | The base product identifier | `"SOFA-3S"` |
| `variantCode` | Full encoded variant string (encodes the entire configuration) | `"SOFA-3S~...~"` |
| `price` | Total calculated price | `1299.00` |
| `currency` | Currency code | `"EUR"` |
| `quantity` | Quantity selected | `1` |
| `selectedOptionsList` | Array of selected options with human-readable labels | See below |
| `selectedOptions` | Object map of option set codes to selected value codes | `{ "fabric": "velvet-blue" }` |
| `shortCode` | The configurator's short code | `"IYCMLZ"` |
### selectedOptionsList in detail
Each item in this array describes one chosen option:
```json
{
"blockName": "Fabric",
"optionSetName": "Fabric",
"valueShortCode": "velvet-blue",
"value": "Velvet Blue",
"price": 0
}
```
This is the most human-readable way to summarise what was configured and is ideal for passing into a form field or email body.
### Accessing the payload in JavaScript
```javascript
document.addEventListener('mimeeq-add-to-cart', function(event) {
var payload = event.detail;
console.log('Product code:', payload.productCode);
console.log('Variant code:', payload.variantCode);
console.log('Price:', payload.price, payload.currency);
console.log('Full payload:', payload);
});
```
Open your browser's developer console while testing to inspect the full object — the exact properties available may vary depending on your configurator setup.
***
## Part 2 — Setting Up a Zapier Interfaces Form
### Step 1 — Create a free Zapier account
Go to [zapier.com](https://zapier.com/) and sign up. The free plan is sufficient to follow this guide.
### Step 2 — Create a new Interface
1. From the Zapier dashboard, click **Interfaces** in the left sidebar (or visit [interfaces.zapier.com](https://interfaces.zapier.com/)).
2. Click **+ New Interface**.
3. Choose **Form** as the starting template.
4. Give your form a name, e.g. *"Product Enquiry"*.
### Step 3 — Add your form fields
Add whatever fields you need for your workflow. For a product enquiry use case, typical fields would be:
* **Name** (short text)
* **Email** (email)
* **Phone** (short text, optional)
* **Message / Notes** (long text, optional)
* **Configuration Summary** — a hidden or read-only field that will receive the selected options automatically
* **Configuration URL** — a hidden field that will receive the page URL including the full variant code
> **Tip:** Hidden fields are ideal for technical data like the configuration summary and URL. Visitors won't see them but they will be captured and passed through to your Zap.
### Step 4 — Note the field IDs
Every field in a Zapier Interfaces form has a unique ID (e.g. field-068b, field-fa17). You'll need these to pre-fill fields via query parameters. To find a field ID:
1. Click on a field in the form editor.
2. Look at the **Field Settings** panel — the ID is shown there, or it appears in the embed/share URL when you preview the form. Make a note of the IDs for the fields you want to pre-fill (typically your configuration summary field and configuration URL field).
### Step 5 — Enable query parameter support
This is a critical step. By default, Zapier Interfaces forms do not accept pre-filled values from the URL. You must explicitly enable this. In the Zapier Interfaces form editor:
1. Go to **Settings** (or **Share / Embed** settings depending on your interface version).
2. Look for the option labelled **"Allow query params"**, **"Accept URL parameters"**, or similar.
3. **Turn this on.**
4.
Without this setting enabled, query parameters passed in the URL will be ignored and fields will not be pre-filled.
### Step 6 — Get the embed code
Still in the Zapier Interfaces editor, go to the **Share / Embed** tab and copy the web component embed snippet. It will look something like this:
```html
```
Note the allow-query-params="true" attribute — this must be present on the element for pre-filling to work.
***
## Part 3 — Adding the Mimeeq Embed to Your Page
Add the Mimeeq configurator embed to your page using the standard embed snippet from your Mimeeq account. The short code is unique to your configurator:
```html
```
Replace YOUR\_SHORT\_CODE with the short code shown in your Mimeeq admin panel for the relevant configurator.
***
## Part 4 — Wiring It Together with JavaScript
This is the JavaScript that listens for the Mimeeq event and opens the pre-filled Zapier form. Adapt the field IDs (field-XXXX) to match the actual field IDs from your own form.
### Option A — Show the form inline on the same page
```javascript
document.addEventListener('mimeeq-add-to-cart', function(event) {
var payload = event.detail;
// Build a human-readable summary of what was configured
var summary = '';
if (payload.selectedOptionsList && payload.selectedOptionsList.length > 0) {
summary = payload.selectedOptionsList.map(function(opt) {
return (opt.blockName || opt.optionSetName) + ' = ' + (opt.value || opt.valueShortCode || '');
}).join('\n');
}
// Capture the current page URL (contains the full variantCode as a query param)
var pageURL = window.location.href;
// Build the query string using your actual Zapier field IDs
var queryString = 'field-XXXX=' + encodeURIComponent(pageURL) +
'&field-YYYY=' + encodeURIComponent(summary);
// Set the query params on the embed element and show it
var embed = document.querySelector('zapier-interfaces-page-embed');
embed.setAttribute('query-params', queryString);
// If you're showing it in a modal or hidden div, reveal it here
document.getElementById('your-form-container').style.display = 'block';
});
```
### Option B — Show the form in a modal overlay
A common pattern is to hide the form in a modal that appears when Add to Cart is clicked. The key technical consideration is that the Zapier web component reads query-params only once when it is first inserted into the DOM. If the component is already on the page, you need to **remove and re-insert it** to pass new values.
```javascript
document.addEventListener('mimeeq-add-to-cart', function(event) {
var payload = event.detail;
// Build configuration summary
var summary = '';
if (payload.selectedOptionsList && payload.selectedOptionsList.length > 0) {
summary = payload.selectedOptionsList.map(function(opt) {
return (opt.blockName || opt.optionSetName) + ' = ' + (opt.value || opt.valueShortCode || '');
}).join('\n');
}
// Truncate if very long to stay within URL length limits
if (summary.length > 3000) {
summary = summary.substring(0, 3000) + '... (truncated)';
}
var pageURL = window.location.href;
var queryString = 'field-XXXX=' + encodeURIComponent(pageURL) +
'&field-YYYY=' + encodeURIComponent(summary);
// Remove old embed and insert a fresh one so it picks up the new query params
var container = document.getElementById('form-embed-container');
var oldEmbed = container.querySelector('zapier-interfaces-page-embed');
if (oldEmbed) {
container.removeChild(oldEmbed);
}
var newEmbed = document.createElement('zapier-interfaces-page-embed');
newEmbed.setAttribute('page-id', 'YOUR_PAGE_ID');
newEmbed.setAttribute('allow-query-params', 'true');
newEmbed.setAttribute('query-params', queryString);
newEmbed.style.cssText = 'width: 100%; height: 80vh;';
container.appendChild(newEmbed);
// Show the modal
document.getElementById('your-modal').style.display = 'flex';
});
// Close modal
document.getElementById('close-modal-btn').addEventListener('click', function() {
document.getElementById('your-modal').style.display = 'none';
});
```
***
## Part 5 — Connecting the Form to Actions in Zapier
Once your form is collecting submissions, you can trigger any automated action using a Zap.
1. In Zapier, click **+ Create Zap**.
2. Set the **Trigger** to *Zapier Interfaces — New Form Submission* and select your form.
3. Add one or more **Actions**, for example:
* **Gmail / Outlook** — send a notification email to your sales team with the configuration details
* **Google Sheets** — append a row to a leads spreadsheet
* **HubSpot / Salesforce / Pipedrive** — create or update a CRM contact and deal
* **Slack** — post a message to a channel
* **Webhooks by Zapier** — POST the data to any custom endpoint Each action step in Zapier lets you map the form field values (including your pre-filled configuration summary and URL) into the relevant fields of the destination app.
***
## Troubleshooting
**Fields are not being pre-filled**
* Confirm that "Allow query params" is enabled in the Zapier Interfaces form settings.
* Confirm that allow-query-params="true" is set on the element.
* Check that the field IDs in your query string exactly match the IDs shown in the form editor.
* If re-using an already-rendered embed, make sure you are removing and re-inserting the element (the web component only reads query-params on first render).
**The event is not firing**
* Open your browser console and add a temporary listener for mimeeq-add-to-cart to confirm the event fires.
* Make sure the Mimeeq embed script has loaded before your listener is registered. Placing your script at the bottom of the page body or using defer helps.
**The configuration summary is being cut off**
* URL query parameters have practical length limits (typically 2,000–8,000 characters depending on browser and server). If a configuration has many options, truncate the summary to a safe length (e.g. 3,000 characters) and rely on the configuration URL — which contains the full variantCode — to reconstruct the exact configuration if needed.
**The modal appears but the form is blank**
* This is usually the re-insertion issue described above. Remove the old element from the DOM before creating a new one.
***
## Summary
| Step | What you do |
| ---- | ------------------------------------------------------------------------------------------- |
| 1 | Add the Mimeeq embed to your page |
| 2 | Create a Zapier Interfaces form with the fields you need |
| 3 | Enable "Allow query params" in the Zapier Interfaces form settings |
| 4 | Note the field IDs of the fields you want to pre-fill |
| 5 | Add JavaScript to listen for `mimeeq-add-to-cart` and build a query string from the payload |
| 6 | Insert the Zapier embed with `query-params` set and show it to the user |
| 7 | Build a Zap to process submissions — email, CRM, spreadsheet, or anything else |
This approach requires no custom back-end. Everything runs in the browser and through Zapier's no-code automation platform, making it accessible to non-developers and quick to set up for any Mimeeq customer.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://help.mimeeq.com/commerce-and-integrations/custom-commerce/third-party-forms.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.