Your embedded form can look different after it is installed because the form is being displayed inside your website's existing design. Website themes, page builders, and custom CSS can change fonts, spacing, button styles, input fields, and colors after the Mailcamp form code is added to the page.

This is usually a styling issue, not a problem with the form itself. The form can still collect subscribers as long as the fields are visible and the submission works correctly.

Common reasons the form looks different

• Your website CSS is overriding the form: many websites apply default styles to all forms, inputs, buttons, labels, and headings.

• The Mailcamp stylesheet was not included: if the stylesheet option is disabled, the form relies more heavily on your website's own styling.

• Your page builder changes form elements: some builders automatically apply spacing, font, or button styles to embedded HTML.

• Custom CSS was added: CSS added in Mailcamp or on your website can affect the embedded form layout.

• The website container is too narrow: sidebars, columns, and mobile layouts can make fields stack or resize differently.

• JavaScript was not included: some form behavior and validation may not work as expected if the JavaScript option is disabled.

Check the embedded form settings

• In Mailcamp, go to Lists.

• Open the audience/list connected to the form.

• Open the Embedded form section.

• Check whether the Stylesheet option is enabled.

• Check whether the JavaScript option is enabled if you need client-side validation.

• Review any custom CSS added in the embedded form settings.

• Copy the updated form code and replace the old code on your website if you changed any settings.

Compare the preview with your website

• Use the embedded form preview in Mailcamp as the baseline design.

• Open the page where the form is installed on your website.

• Compare fonts, field spacing, button styling, and form width.

• If the preview looks correct but the website version does not, the difference is likely caused by your website theme, page builder, or custom CSS.

Fix styling differences

• Enable the Mailcamp stylesheet in the embedded form settings if you want to use Mailcamp's default form styling.

• Add custom CSS in the embedded form settings to adjust fonts, colors, spacing, and button styles.

• Place the form in a wider page section if the current container makes the fields too narrow.

• Check your website theme or page builder settings for global form, input, and button styles.

• If your website has custom CSS, make sure it does not target every form, input, label, or button on the page too broadly.

When to update the form code

• Update the code after enabling or disabling the stylesheet option.

• Update the code after enabling or disabling the JavaScript option.

• Update the code after changing the form title, redirect URL, visible fields, or custom CSS.

• After replacing the code on your website, clear any website cache and reload the page.

Troubleshooting

• The button color changed: check whether your website theme applies global button styles.

• The fields are too wide or too narrow: check the width of the website section where the code was pasted.

• The form has no spacing: enable the stylesheet option or add spacing rules in custom CSS.

• The form looks correct in preview but not on the website: inspect your website CSS or theme settings for rules that override embedded forms.

• The form layout changed on mobile: test the page on a mobile viewport and adjust the website section or custom CSS for smaller screens.

• The form submits but validation looks wrong: enable the JavaScript option and replace the installed code with the updated version.