What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Styling the source code embedded form within a custom iframe

    Asked by planetshoes on December 23, 2015 at 09:40 AM

    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

      

    iframe embed source code embed custom styling CSS
  • Profile Image

    (Private)

    Answered by Ben on December 23, 2015 at 10:08 AM

    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 :)

  • Profile Image

    Answered by planetshoes on December 23, 2015 at 10:26 AM

    It works! Thanks for all your help!

    - Kristian

  • Profile Image

    Answered by Ben on December 23, 2015 at 11:03 AM

    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 :)