How can I remove the big grey box around my form on wordpress.com?

  • davidmiller413
    Asked on May 15, 2017 at 5:17 PM

    I embedded my jotform on my wordpress.com website and there is a big grey box under my form and it looks very ugly. I want to get rid of it, thanks!

  • Kevin Support Team Lead
    Replied on May 15, 2017 at 7:31 PM

    You could inject the following code in order to set the background color to transparent and take the same background from your website: 

    .supernova {

        background-color: transparent !important;

    }

    This guide will help you injecting the code: How-to-Inject-Custom-CSS-Codes

    Please, do let us know how it goes. 

  • davidmiller413
    Replied on May 16, 2017 at 10:09 AM

    Okay that worked but now there's a big white box below the form

  • Nik_C
    Replied on May 16, 2017 at 11:30 AM

    Please try inserting the below code in your Custom CSS field:

    .form-all {
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    }

    Please let us know if it worked for you.

    Thank you!

  • David Miller
    Replied on May 16, 2017 at 1:06 PM

    That last thing did not change anything. I tried it with and without the first code

  • Nik_C
    Replied on May 16, 2017 at 1:29 PM

    Thank you for letting us know.

    Ok, you can keep the previous code provided by my colleague and insert the below code:

    iframe {
        border: none;
    }

    But please try to insert it in your website's CSS code.

    That should make your form look like this:

    How can I remove the big grey box around my form on wordpress Screenshot 20

    Please try and let us know how it worked.

    Thank you!

  • davidmiller413
    Replied on May 16, 2017 at 2:40 PM

    I tried all three codes, there is still a big empty section below the form

  • Support_Management Jotform Support
    Replied on May 16, 2017 at 3:36 PM

    Looks like you'd have to change the CSS of your website straight from wp.com (not in JotForm).

    Try adding the following lines to see if that will help you adjust the height of the container that holds your form iframe:

    .embed-jotform iframe {

        height: 430px !important;

        border: none !important;

    }

    I proactively included a line to remove the border of your iframe as it looks better without it IMHO. If you think otherwise, just delete the border: none !important; line to keep the border as is.

    Follow the guides I'm linking below from WP's help pages if you're not familiar on how/where to insert CSS on your website.

    https://en.support.wordpress.com/custom-design/editing-css/ 

    https://en.support.wordpress.com/custom-css/ 

  • davidmiller413
    Replied on May 17, 2017 at 10:44 PM

    this worked pretty well, thank you very much