How to remove border shadow?

  • skinnyfatties
    Asked on February 9, 2018 at 12:12 PM

    Can you help me with these small fixes too:

    • How can I remove the border shadow around the inside of the form? See below the submit button.

    • How can I move the input fields to the center of the form?

  • Richie JotForm Support
    Replied on February 9, 2018 at 12:18 PM

    May we have the URL of the website you embedded your form?

    Have you tried embedding your form using the IFrame code?

    Getting-the-Form-iFrame-Code


  • skinnyfatties
    Replied on February 9, 2018 at 12:22 PM

    I want it to be a lightbox, not iFrame. I have yet to embed it, but it will open on this page when you click, "REQUEST ACCESS": https://agitated-spence-13707f.netlify.com/

  • Richie JotForm Support
    Replied on February 9, 2018 at 12:29 PM

    In the screenshot you have given, can we have the formID?

    I can't seem to replicate a boarder in my cloned form.

    Thank you.

  • skinnyfatties
    Replied on February 9, 2018 at 12:36 PM

    I believe the form ID is 80394137205150

  • Richie JotForm Support
    Replied on February 9, 2018 at 12:53 PM

    You can add this css code to remove the box shadow of your form.

    .form-all{

    box-shadow: unset;

    }

    I can't seem to replicate the issue with fields not aligning in center.

    Here is a screenshot of your form.

    How to remove border shadow? Image 1 Screenshot 20



    Please let us know if we can be of further assistance.

  • skinnyfatties
    Replied on February 9, 2018 at 12:55 PM

    The shadow is still there. I am seeing both of these issues here when I preview the lightbox. 

    1518198933Screen Shot 2018 02 09 at 12 Screenshot 10

  • Richie JotForm Support
    Replied on February 9, 2018 at 1:08 PM

    Try embedding the form first in your website and let us see how it goes.

  • skinnyfatties
    Replied on February 10, 2018 at 7:14 AM

    Ok, here is the link with the form embedded: https://agitated-spence-13707f.netlify.com/ 

    • the fields aren't center 

    • the shadow is still there

    can you help?

  • TREVON
    Replied on February 10, 2018 at 8:29 AM

    I have checked your link and noted that you have a border round the light box popup. You can be able to customize and preview you Lightbox as shown below.

    https://www.jotform.com/help/220-How-to-Create-a-Lightbox-Form

    Kindly try and re-embed your form using the script below and let us know if border shadow disappears.

    <script src ="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script><script type="text/javascript">
            var JFL_80394137205150 = new JotformFeedback({
              formId: '80394137205150',
              base: 'https://form.jotform.com/',
              windowTitle: 'Learn More',
              background: 'rgba(255,255,255,0)',
              fontColor: '#FFFFFF',
              type: '1',
              height: 500,
              width: 700,
              openOnLoad: false
            });
        </script>
          <a class="btn lightbox-80394137205150" style="margin-top: 16px">
            Retail Landing Page
          </a>


  • skinnyfatties
    Replied on February 11, 2018 at 12:05 AM

    The fields aren't centered:

    1518325511Screen Shot 2018 02 11 at 12 Screenshot 10

     

    And the shadow is still there:

    1518325533Screen Shot 2018 02 11 at 12 Screenshot 21

     

    Can you help? You can see at www.airtailor.com

  • Nik_C
    Replied on February 11, 2018 at 8:19 AM

    For shadow, please insert this CSS to your Custom CSS Field:

    .form-all {

        box-shadow: none!important;

    }

    That will make your form look like this:

    1518354387Screen Shot 2018 02 11 at 2 Screenshot 10

    Regarding the form widht, when I check the default code of lightbox, the form's width is ok (400px):

    1518354873Screen Shot 2018 02 11 at 2 Screenshot 21

    You have a div where the form is embedded(class: jt-content), and the width is 720px, making the lightbox wide as well. But since the lightbox is 400px by default, it will go to far left.

    So to fix this you can simply insert this CSS to your website:

    .jt-content {

        width: 400px!important;

    }

    It will make the form look like this:

    1518355093Screen Shot 2018 02 11 at 2 Screenshot 32Let us know if that works for you.

    Thank you!

  • skinnyfatties
    Replied on February 11, 2018 at 1:18 PM

    That seems to have work, but now the phone number field is smaller than the others. Can you help? www.airtailor.com and click, "REQUEST ACCESS"
  • David JotForm Support Manager
    Replied on February 11, 2018 at 3:56 PM

    Your new question will be addressed in a separate thread: https://www.jotform.com/answers/1380724- 

  • vegasnight
    Replied on February 28, 2018 at 4:34 AM

    I freaking haTe dealing with these preset default customizations. GIVE US BARE-BONE FORM.

    IF WE NEED YOUR STUPID IDIOTIC BORDERS - WE WOULD ASK FOR IT.

    1000'S OF PEOPLE ARE ASKING YOU ABOUT HOW TO GET RID OF THIS STUPID DESIGN OF YOURS AND YET YOU STILL DON'T GET A CLUE.

    ------------WHY SHOULD WE DO THIS????????????

    .form-all {

        box-shadow: none!important;

    }

  • Richie JotForm Support
    Replied on February 28, 2018 at 9:09 AM

    Hi vegasnight,

    I have moved your question to a new thread to better assist you.

    Please follow this link to your thread -https://www.jotform.com/answers/1399890

    Thank you.