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

  • Profile Image
    davidmiller413
    Asked on May 15, 2017 at 05: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!

  • Profile Image
    Kevin_G
    Answered on May 15, 2017 at 07: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. 

  • Profile Image
    davidmiller413
    Answered on May 16, 2017 at 10:09 AM

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

  • Profile Image
    Nik_C
    Answered 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!

  • Profile Image
    David Miller
    Answered on May 16, 2017 at 01:06 PM

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

  • Profile Image
    Nik_C
    Answered on May 16, 2017 at 01: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:

    Please try and let us know how it worked.

    Thank you!

  • Profile Image
    davidmiller413
    Answered on May 16, 2017 at 02:40 PM

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

  • Profile Image
    Jim_R
    Answered on May 16, 2017 at 03: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/ 

  • Profile Image
    davidmiller413
    Answered on May 17, 2017 at 10:44 PM

    this worked pretty well, thank you very much