How do I remove the extra white space behind my embedded form?

  • Profile Image
    ghengizshon
    Asked on September 10, 2017 at 06:11 AM

    My embedded form has a large area of empty space around it that I would like to remove. How can I achieve this?

  • Profile Image
    Jim_R
    Answered on September 10, 2017 at 08:05 AM

    The empty space is there because the form width is narrow and doesn't take up the entire width of the parent container on your website. To remove those, we have to:

    1. Set the width of the form to 100% so it covers the entire width of the parent container

    2. Change the background color to white so it's seamless

    Try injecting the following CSS codes to your form builder:

    .form-all {

      width: 100% !important;

      box-shadow: none !important;

    }

    .supernova {

      background: white !important;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes 

    Result:

    If you want to move the form a bit higher, uses these codes instead:

    .form-all {

      width: 100% !important;

      box-shadow: none !important;

      margin-top: -40px !important;

    }

    .supernova {

      background: white !important;

    }