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 the design of your website, you can override it with 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 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 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 to the form, so your styling is applied.

To retrieve the embed code:

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

Adding custom CSS to your website

Custom styles go in the <style id="flx-styles">  block. The block is empty by default and contains comment 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 dropdown menus, #flxml_frm input[type="checkbox"]   for checkboxes, or #flxml_frm input[type="number"]   for numeric fields. Always use #flxml_frm   as a prefix for your selectors so your styles only apply to the form.

Here is 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 ========================= */
    #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 necessary because the default styles of the form use inline width values. From here, you can build out the rest: adjust fonts, colours, label styling, and more by adding extra 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 remove or alter the following parts of the embed code:

• The src URL of the iframe. This loads the form from the Flexmail servers. Changing it will cause the form to stop working.
• The id  of the iframe (iframe_flxml_form ) and the id  of the <style> block (flx-styles ). The JavaScript snippet uses these to find and pass your styles to the form.
• The JavaScript snippet itself. Without this snippet, your custom styles will not be applied to the form, and it will remain invisible after loading.

Testing after customisation

After adding your custom CSS, always run a live test before you publish:

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

Common mistakes

Using overly broad selectors that affect other elements on the page

Selectors such as input   or button   without the #flxml_frm  prefix apply your styles to every input and button on the page. Always restrict your selectors with #flxml_frm   to control the impact.

Setting a fixed width that does not work on mobile

A fixed pixel width for the form does not adapt 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 guidelines on copy, placement, and incentives that improve conversion.