4 Replies Latest reply on Oct 9, 2014 11:20 AM by 22685

    Marketo Form 2.0 being used in iframe on website losing it's CSS

      We're using a Marketo form in an iframe on our website.  Our wesbite consists of multiple blocks, each designated for specific purposes (ex: navigation, page content, footer, etc.).  We have a Marketo landing page with our form on it, and we have a block with the iframe set up on our wesbite where the Marketo landing page and form will appear.

      The form appears and functions in the iframe on our website, but something seems to be overiding the form CSS and the form isn't appearing correctly.

      The width of the iframe is 243px.  When the form appears within the iframe there seems to be some automatic visual layout adjustments being made so that both the form labels and fields fit within the iframe width.  All of the labels move above each text input field, stacking them one above the other.  That isn't a problem, as it's the only way both the labels and fields would fit.  The issues is the text input fields seem to be losing their CSS.  Take a look at the screenshot below.  The left side is the form as it appears on the Marketo landing page.  Notice the height of each text input field, expecially the "Questions & Comments" field, which was set in the form to have 4 lines appear.  Now look at the right side.  This is the form as it appears inside the iframe, with all of the labels and fields stacked.  All of the vertical spacing/padding has been removed, with the exception of the two fields containing the dropdown menus, and the "Questions & Comments" text field is now one single line.  This is the issue we are trying to solve, getting our vertical spacing/padding back, and expecially getting our 4 lines back for the "Questions & Comments" text input field.

      0EM50000000S7cl

      We brought this issue to the developers of our site and after much time spent on it they informed us that it's an issue with the CSS in Marketo.  There's nothing that can be done within the iframe to correct this, and the adjustment would have to be done within the Marketo form CSS.

      We do not have the option of increasing the width of the block and iframe on our website.

      Any ideas would be GREATLY appreciated.

      Thank you!