How to remove border shadow?

  • Profile Image
    skinnyfatties
    Asked on February 09, 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?

  • Profile Image
    Richie_P
    Answered on February 09, 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


  • Profile Image
    skinnyfatties
    Answered on February 09, 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/

  • Profile Image
    Richie_P
    Answered on February 09, 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.

  • Profile Image
    skinnyfatties
    Answered on February 09, 2018 at 12:36 PM

    I believe the form ID is 80394137205150

  • Profile Image
    Richie_P
    Answered on February 09, 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.



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

  • Profile Image
    skinnyfatties
    Answered on February 09, 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.5

  • Profile Image
    Richie_P
    Answered on February 09, 2018 at 01:08 PM

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

  • Profile Image
    skinnyfatties
    Answered on February 10, 2018 at 07: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?

  • Profile Image
    TREVON
    Answered on February 10, 2018 at 08: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>


  • Profile Image
    skinnyfatties
    Answered on February 11, 2018 at 12:05 AM

    The fields aren't centered:

    1518325511Screen Shot 2018-02-11 at 12.0

     

    And the shadow is still there:

    1518325533Screen Shot 2018-02-11 at 12.0

     

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

  • Profile Image
    Nik_C
    Answered on February 11, 2018 at 08: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.06

    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.13

    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.16Let us know if that works for you.

    Thank you!

  • Profile Image
    skinnyfatties
    Answered on February 11, 2018 at 01: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"
  • Profile Image
    BDAVID
    Answered on February 11, 2018 at 03:56 PM

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

  • Profile Image
    vegasnight
    Answered on February 28, 2018 at 04: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;

    }

  • Profile Image
    Richie_P
    Answered on February 28, 2018 at 09: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.