Styling the source code embedded form within a custom iframe

Awesome so that worked! there is some thing I would like to tweek tough if you can help us...

- we want to shorten the space above "Welcome to Our Planet"

- get rid of the border shadow from the iframe

- also make it so its a fixed height so there is no scrolling.. it seems like the forms height is way too big for the iframe height.

Thanks,

Kristian

I went to this page again: http://www.planetshoes.com/?VSPTest#0

I do see the issues that you mention and we can take care of them with few small modifications.

Now in regards to the space at the top, we need to remove that from within the form itself.

To do that, just add this CSS to your form:

div.form-all:before {
    margin-top: -20px;
}
ul.form-section {
    margin-top: -50px;
}

Once you do, it will look like this:

Now the shadow - this is caused by iframe code itself, so we need to modify the iframe code that you use on your website to show the form.

This is the old (current) one:

<iframe width="500px" height="364" src="//www.planetshoes.com/mmplanet/Landing/Welcome/Welcome Stream.html" id="JotFormSelfHostedIframe"></iframe>

As we change it into this (don't replace the iframe code just yet):

<iframe width="500" height="364" src="//www.planetshoes.com/mmplanet/Landing/Welcome/Welcome Stream.html" id="JotFormSelfHostedIframe" style="border: none;"></iframe>

The shadow border is gone:

Now, we need to adjust the iframe code just a bit further, to remove the scrollbars.

To do that, we use this:

<iframe width="500" height="384" src="//www.planetshoes.com/mmplanet/Landing/Welcome/Welcome Stream.html" id="JotFormSelfHostedIframe" style="border: none;"></iframe>

We also add this rule to our form:

html.supernova {
    overflow: hidden;
}

As soon as you do that and refresh your page, you will see the difference and it should look like this:

It should look just like on the screenshots above, but we would know once you apply the changes above if there is anything else that we would need to do to make it look perfect, so do let us know how it goes Kristian :)

It works! Thanks for all your help!

- Kristian

Great to hear that Kristian.

Do let us know if you have any other issues or any questions and we would be happy to assist with the same :)