Build & Customize
Mago Forms

Before you can add any custom CSS or JavaScript to a Mago form, you need to know where those fields actually live — because they're hidden by default.

Inside the Form Configuration Wizard, scroll below the main form editor and click the Advanced link. This expands a section that reveals the CSS and JavaScript input fields.

Click "Advanced" below the main editor to reveal the CSS and JavaScript fields.

After clicking Advanced — the custom CSS field (top) and custom JavaScript field (bottom) appear below the editor.

All form configuration happens inside the Mago form builder. Access your forms at https://mago.co/ContactForm. To edit a specific form directly (once you know its UUID): https://mago.co/ContactForm/Edit/UUID.

The form editor has four distinct input areas — keep content in the right place:

The Form Field Picker

When building a new form, Mago offers a visual Form Field Picker where you drag fields into position. Once you confirm your selection, Mago automatically generates the Form HTML on the next step.

The Form Field Picker — drag fields into position to generate the form HTML automatically.

What Mago Adds Automatically

Mago wraps all form HTML in the following opening markup before rendering:

<div class="form-horizontal"><fieldset>

It also injects the submit button automatically. Never include a submit button inside the Form HTML block. Style or rename it via CSS and JavaScript instead (see Section 11).

Opening Markup — The Legend Gotcha

Keep <div class="form-horizontal"><fieldset> at the top of your pasted HTML, but remove the <legend> tag. If a legend tag is present, it renders visibly on the form as an unwanted heading.

<div class="form-horizontal">
  <fieldset>
    <legend>Contact Us</legend>

<div class="form-horizontal">
  <fieldset>

Required Fields

By default, only last name and email are required. To make any field required, add required="" to its input tag:

<input id="contactdateofperformance" class="form-control datepicker"
       name="contactdateofperformance" required="" type="text"
       placeholder="Select a date" />

Hidden Fields

Hidden fields must be placed inside the <fieldset>. Fields placed outside it are not submitted with the form. Paste them directly in the HTML editor — do not create hidden fields using Mago's visual field builder:

<input id="contactfield12" name="contactfield12" type="hidden" />

⚠️ Forms Without a Show Type Do Not Create Leads

Mago distinguishes between a lead and a plain contact/opt-in based on whether a show type is present. If no contactshowtype value is submitted, Mago creates a contact record but does not create a lead.

The fix: add contactshowtype as a hidden field with a hardcoded UUID from https://mago.co/DropDown:

<div class="form-group">
  <label class="col-sm-3 control-label" for="contactshowtype"></label>
  <div class="col-sm-9">
    <input id="contactshowtype" class="form-control" name="contactshowtype"
           type="hidden" value="047234fa-1f65-4b92-9d02-494d587248a0" />
  </div>
</div>

Standard Field Wrapper Pattern

Mago uses Bootstrap 3-style markup. Standard single-column field:

<div class="form-group">
  <label class="col-sm-3 control-label" for="contactfieldname">Label Text</label>
  <div class="col-sm-9">
    <input id="contactfieldname" class="form-control" name="contactfieldname" type="text" />
  </div>
</div>

Full-width field (no label column):

<div class="form-group col-sm-12">
  <label class="control-label" for="contactfieldname">Label Text</label>
  <input id="contactfieldname" class="form-control" name="contactfieldname" type="text" />
</div>

CSS goes in the CSS field inside the Advanced panel. It is scoped to the form's rendered output and won't affect the rest of the host page.

Core Selectors

Time Picker Fix (Always Include This)

If the form includes contactshowstarttime, always add this or the time picker will have layout issues:

.bootstrap-timepicker-widget table td input {
    padding: 0 !important;
    font-size: 14px !important;
}

Known CSS Gotchas

JavaScript goes in the JavaScript field inside the Advanced panel. This JS executes inside the iframe where the form renders — it does not run on the host page. For logic that needs to run on the host page (e.g., passing URL parameters into the iframe), use a script block in the page's HTML editor.

The Async Rendering Problem

Mago loads its form asynchronously. The form DOM elements don't exist at script parse time — they're injected after the form loads. This means:

• Do not rely on DOMContentLoaded alone
• For any JS that interacts with form fields, you must poll for the element's existence before acting on it
• Poll for a specific named input ID, not for fieldset (fieldset may exist before the actual inputs are ready)

var tryInit = setInterval(function () {
    if (document.getElementById('contactfield13')) {
        clearInterval(tryInit);
        initConditionalLogic();
    }
}, 100);

jQuery Is Available

jQuery is available in the Mago form context. You can use $(...) syntax directly in the JavaScript field.

To get the embed code for any form, open it in the form editor and look for the embed/publish option.

Getting the embed code — available from the form's publish/embed screen.

Mago provides two embed options. Choose based on your context:

<script src="https://mago.co/Scripts/form.js" type="text/javascript"></script>
<script type="text/javascript">
var magoForm = new MagoForm();
magoForm.initialize({
    'formId': 'YOUR-FORM-UUID-HERE',
    'autoResize': true,
    'ssl': false
});
magoForm.display();
</script>

<script src="https://mago.co/Scripts/iframe-form-loader.js"></script>
<iframe id="magoFormIframe"
        class="mago-form-container"
        height="500px"
        allowtransparency="true"
        frameborder="0"
        scrolling="no"
        style="width: 100%; border: none; overflow: hidden;"
        src="https://mago.co/MCF/Form/Publish/YOUR-FORM-UUID-HERE"
        data-src="https://mago.co/MCF/Form/Publish/YOUR-FORM-UUID-HERE">
</iframe>

WordPress with Divi (WPMU Dev Hosting)

// ✗ WRONG — Divi breaks this on save
var loc = window.location.search;

// ✓ CORRECT — Divi-proof
var loc = window['location']['search'];

Wix / Squarespace / Other Platforms

Mago forms embed using an HTML/Embed block with the iframe code. Key notes:

• No Divi-specific issues apply
• Verify the platform's HTML block doesn't strip <script> tags — some Wix and Squarespace blocks restrict script execution
• The four-timing approach for parameter passing is still recommended as a defensive measure

This distinction matters a lot — mixing them up causes silent data loss.

<div class="form-group">
  <label class="col-sm-3 control-label" for="contactfield5">Your Label</label>
  <div class="col-sm-9">
    <select id="contactfield5" name="contactfield5" class="form-control">
      <option value="">-- Select --</option>
      <option value="Option A">Option A</option>
      <option value="Option B">Option B</option>
    </select>
  </div>
</div>

Mago's form uses Bootstrap 3's grid. To achieve a two-column layout, use col-sm-6 and group pairs of fields inside a shared .form-group:

<div class="form-group">
  <div class="col-sm-6">
    <label class="control-label" for="contactfirstname">First Name</label>
    <input id="contactfirstname" class="form-control" name="contactfirstname" type="text" />
  </div>
  <div class="col-sm-6">
    <label class="control-label" for="contactlastname">Last Name</label>
    <input id="contactlastname" class="form-control" name="contactlastname" type="text" />
  </div>
</div>

Mago supports multi-step forms natively — no WordPress plugin required. Steps are implemented using visibility-toggling JavaScript. There is no native Mago UI for step configuration; it's done in the Form HTML and JavaScript fields.

• Wrap each step's fields in a named container: <div id="step-1">, <div id="step-2">, etc.
• Use JavaScript to show/hide step containers and manage a current-step variable
• The submit button is always on the final step — it's injected by Mago and cannot be moved or duplicated
• "Next" and "Back" buttons must be <button type="button"> elements (not type="submit") — they trigger JS navigation only
• Per-step validation must be written manually in JavaScript — Mago only validates on final form submission

There's no native Mago feature to automatically identify which form or website generated a submission. But there are two solid approaches:

<!-- Embed on your corporate site -->
<input id="contactfield8" name="contactfield8" type="hidden" value="Corporate Site - Contact Page" />

<!-- Embed on your kids/family site (same form, different hidden value) -->
<input id="contactfield8" name="contactfield8" type="hidden" value="Family Site - Contact Page" />

The submitted value then appears in the contact/lead record in Mago and can be used in notification templates, automations, and workflow routing.

Mago injects the submit button automatically — you cannot change its label text from the Form HTML block. Use the JavaScript field to rename it and the CSS field to style it.

Rename the Button Label

$('input[type=submit]').attr('value', 'REQUEST BOOKING')

Style the Button

input[type=submit] {
    background-color: #EC1C24;
    color: white;
    border-radius: 4px;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

Use an Image as the Button

#ContactForm .btn {
    width: 335px;
    background: url('https://example.com/your-button-image.png');
    height: 120px;
    font-size: 0;      /* hides button text */
    border: none;
}

Step 4 of the Form Configuration Wizard (Response) controls what happens after submission. The recommended approach is a Redirect URL — enter only the clean base URL. Mago automatically appends ?targetId=UUID:

https://example.com/thank-you/

https://example.com/thank-you/
  ?targetId=ff9618f3-...

• Create a custom field in Mago Settings → Custom Fields (e.g., "GCLID") and note the assigned field ID (e.g., contactfield12)
• Add the hidden input inside <fieldset> in the Form HTML block
• The JS that reads the URL parameter and populates the field goes in the Mago JS field
• The JS that appends the parameter to the iframe src goes on the host page
• On WPMU Dev hosting (and many other hosts), use gc_id as the parameter name (not gclid) and set a Google Ads tracking template: {lpurl}?gc_id={gclid}

To view and modify all system labels and custom field definitions — including renaming fields, adding options, and finding field IDs — go to https://mago.co/Business/EditLabels.