Why does my form look different after it’s installed?

If you have created and installed an embedded form, and the form’s fonts or colors don’t match your design in MailerLite, it’s possible that your website is overwriting your form code.

So, what does that mean? Well, our forms use a basic set of CSS with color codes and fonts. However, some websites and WordPress themes have more complex media rules; so once the MailerLite form is embedded onto the website, it overwrites our CSS. As a result, some colors, fonts, or formatting may look different after the form is embedded.

The easiest way to find out if your website is overwriting your form code is to test your form code somewhere else and see if it works.

1. Navigate to the Forms page.

2. Click the Embedded forms tab.

3. Click on the Overview button of the form.

4. In the Embed form into your website section, select the HTML code tab.

5. Copy the HTML code and paste it into a simple online HTML editor.

If the online HTML editor displays your form correctly, while your website doesn’t, this is the best indication that your website is overwriting your form code.

If you find that your website or WordPress theme is overwriting your form’s CSS there are three things you can do:

• Modify your form code accordingly - If you have some understanding of HTML, you can find and include any missing tags or otherwise modify your MailerLite form’s HTML before embedding it on your website

• Change your WordPress theme - If your website is in its early stages of development you might consider changing your theme to one that is compatible with MailerLite forms

• Use an integrated form editor - MailerLite integrates with multiple form editing apps and WordPress plugins that allow you to create complex forms that still deposit subscribers directly into your MailerLite account

You can find all of our Sign up form integrations on our integrations page.

If you have created and installed an embedded form, and the form’s fonts or colors don’t match your design in MailerLite, it’s possible that your website is overwriting your form code.

So, what does that mean? Well, our forms use a basic set of CSS with color codes and fonts. However, some websites and WordPress themes have more complex media rules; so once the MailerLite form is embedded onto the website, it overwrites our CSS. As a result, some colors, fonts, or formatting may look different after the form is embedded.

The easiest way to find out if your website is overwriting your form code is to test your form code somewhere else and see if it works.

1. Navigate to Forms.

2. Click the Embedded forms tab.

3. Click on the title of the form you wish to test.

4. Scroll down to Embed form into your website and copy your form code.

5. Click the HTML code tab.

5. Paste your form HTML into a simple online HTML editor.

If the online HTML editor displays your form correctly, while your website doesn’t, this is the best indication that your website is overwriting your form code.

If you find that your website or WordPress theme is overwriting your form’s CSS there are 3 things you can do:

• Modify your form code accordingly - If you have some understanding of HTML, you can find and include any missing tags or otherwise modify your MailerLite form’s HTML before embedding it on your website

• Change your WordPress theme - If your website is in its early stages of development you might consider changing your theme to one that is compatible with MailerLite forms

• Use an integrated form editor - MailerLite integrates with multiple form editing apps and WordPress plugins that allow you to create complex forms that still deposit subscribers directly into your MailerLite account

You can find all of our Sign up form integrations on our integrations page.