Styling external form embed

Develop, Build & Integrate CMS Development
,
1

I am using CLEAN theme, Magic Module and have used a Rich Text field to embed a marketo form onto the page. I have done this previously on my hubspot site and the form appears as it should. However, embedding on the CLEAN theme via Rich Text has caused the text input fields to appear wider than they are. I am having difficulty figuring out how to lessen the line height of the text input fields. Here is the code in question:

<div style=“background-color: #ffffff; background-width: 500px; border: 1px solid; border-color: #ffffff; border-radius: 16px; padding: 32px 32px 32px 22px; box-shadow: 0 8px 8px -4px grey;”>
<script src=“//go.ecompliance.com/js/forms2/js/forms2.min.js”></script>
<form id=“mktoForm_3833”></form>
<script>MktoForms2.loadForm(“//go.ecompliance.com”, “066-RPY-433”, 3833);</script>
</div>.

Any insight would be greatly appreciated!

2

Hi, @TAmaral7 :waving_hand: Thanks for your question. It’s likely the community cannot give a specific reply without seeing a live example. This is because there are multiple factors that can affect how your form is displayed.

Next steps:

  • Try using the browser’s developer tools to inspect the input fields. This allows you to see which styles are being applied and from where. You might find that there’s a specific CSS rule from the CLEAN theme that’s causing the issue

  • Check to see if the marketo form is pulling in its own external styling (HubSpot forms can do this unless set as raw HTML, for example)

  • If you find conflicting CSS, you can try targeting the text input field elements directly.
    Simple example:

    #mktoForm_3833 input[type="text"],
#mktoForm_3833 input[type="email"],
#mktoForm_3833 textarea {
 line-height: normal; /* or provide a specific value like '1.5' */
}

Thank you for the additional information! — Jaycee

3

The specific targeting worked! Thank you so much!

4

Amazing! You are welcome :hugs: — Jaycee