Customising the opt-in form embed code

When you embed a Flexmail opt-in form on your website, it comes with default styling. If that styling does not match your website's design, you can override it using CSS. This article explains how the embed code works and how to apply custom styles safely.

How the embed code works

When you generate the embed code for an opt-in form in Flexmail, you'll receive three parts:

• A JavaScript snippet that passes your custom styles to the form once it has loaded.
• An iframe that loads the form itself from https://return.flexmail.eu.
• An empty <style id="flx-styles"> block where you can add your own CSS.

You paste all three parts into your website's HTML where you want the form to appear. When the page loads, the iframe fetches the form, and the JavaScript adds the contents of your style block into the form so your styling is applied.

To get the embed code:

1. Go to Forms > Opt-in forms.
2. Open the form you want to embed.
3. Click the Embed your form button.
4. Copy the embed code from the pop-up.

Adding custom CSS to your website

Custom styles go inside the <style id="flx-styles"> block. The block is empty by default and contains commented placeholders for the most common selectors:

• #flxml_frm > table > tbody > tr > td:nth-child(1) — the field labels.
• #flxml_frm input[type="text"] — the text input fields.
• #flxml_frm button[type="submit"] — the submit button.

You can extend this with selectors for other elements, such as #flxml_frm select for dropdowns, #flxml_frm input[type="checkbox"] for checkboxes, or #flxml_frm input[type="number"] for numeric fields. Always prefix your selectors with #flxml_frm so your styles only apply to the form.

Here's a small example that makes the form transparent, responsive on mobile and gives the submit button a custom look:

<style id="flx-styles">
    /* == Make the form transparent ================================ */
    body.fm_body, #flxml_frm table{
        background: transparent;
    }
    /* == Make the form fill its container on mobile =============== */
    #flxml_frm, #flxml_frm table, #flxml_frm tr, #flxml_frm td {
        width: 100% !important;
    }
    #flxml_frm td {
        display: block;
    }
    #flxml_frm input[type="text"],
    #flxml_frm input[type="number"],
    #flxml_frm select {
        width: 100% !important;
        height: 2rem !important;
        box-sizing: border-box;
    }
    /* == Custom submit button =====================================*/
    #flxml_frm button[type="submit"] {
        background: #E8472B;
        color: #ffffff;
        border: none;
        border-radius: 4px !important;
        padding: 12px 24px;
    }
</style>

The !important flag is sometimes needed because the form's default styles use inline width values. From here you can build out the rest: adjust fonts, colours, label styling, and so on by adding more rules with the same #flxml_frm prefix.

What you can change

You can safely style any visual property of the form elements: colours, fonts, spacing, borders, border-radius, width, and background.

What you must not change

Do not modify or remove the following from the embed code:

• The iframe src URL. This loads the form from Flexmail's servers. Changing it will break the form.
• The iframe id (iframe_flxml_form) and the <style> block id (flx-styles). The JavaScript snippet uses these to find and pass your styles to the form.
• The JavaScript snippet itself. Without it, your custom styles are not applied to the form and remains invisible after load.

Testing after customisation

After adding your custom CSS, always do a live test before publishing:

• Submit the form with a real email address.
• Confirm the contact appears in your Flexmail account under Contacts > All contacts.
• Confirm the confirmation email arrives and the confirmation link works.
• Check the form on mobile. Some CSS changes that look fine on desktop can break mobile layout. Test on at least one mobile screen size.

Common mistakes to avoid

Using overly broad selectors that affect other elements on the page

Selectors like "input" or "button" without the "#flxml_frm" prefix will apply your styles to every input and button on the page. Always scope your selectors with "#flxml_frm" to contain the impact.

Setting a fixed width that breaks on mobile

A fixed pixel width on the form will not resize on smaller screens. Use max-width or a percentage value to keep the form responsive.

Next steps

• See "Get started with opt-in forms" for a full walkthrough of creating and configuring an opt-in form.
• See "Tips for an effective opt-in form" for guidance on copy, placement, and incentives that improve conversion.