Custom code embed widget not inheriting styling

Design help Custom code
1

Hello,

I am attempting to embed a custom code widget from my company’s CRM (customer database) to allow people to sign up for emails. The form is meant to have each item on a new line vertically (header, first name box, last name box, email box). However when I publish to my test site, the form is all laid out in one ugly line. I have tried to edit display settings for the container, embed box itself, to no avail.

Here is the example from our CRM of what the layout is supposed to be:
Screenshot 2024-07-08 141751

Here is the published view on my staging domain:
https://kyumh-new.webflow.io/test-page

The CRM support team will not advise on this issue so I appreciate any help.

Thank you,
Rebecca

Here is my site Read-Only: Webflow - KyUMH

2

You have a section class in your website which is competing with the layout of your form, which also contains a section class. In your site you have it set to display: flex, which is changing the layout of your form.

Rather than changing your site, you can hackfix this by adding this style chunk into the same HTML embed that contains your form-generating script.

<style>
  #email-registration-form .section {
    display: block;
  }
</style>

Note that you have several other styles happening there as well such as the linear gradient. If you don’t want those you might just rename your section class to something else like section-gradient so that your form does not pick it up.

image
image1441×757 148 KB