Classic Form embedded: How to reduce the space after the page break buttons?

  • Profile Image
    captkirk
    Asked on March 15, 2018 at 08:15 PM
    The other issue I'm having is aligning the back button with the submit button. I have them aligned, but there is too much space between the bottom of the form and the buttons. I believe the submit button is being forced to the back button's line when it should be the other way around.
  • Profile Image
    Kevin_G
    Answered on March 15, 2018 at 08:17 PM

    May you please provide us the link of the page where the form has been embedded on? 

    We will be happy to check that out and provide a workaround. 

    Thanks. 

  • Profile Image
    captkirk
    Answered on March 15, 2018 at 08:43 PM
    I hid the back button since it was causing that big gap.
    Sent from my iPhone
    ...
  • Profile Image
    Kevin_G
    Answered on March 15, 2018 at 09:48 PM

    May you please confirm the issue is now resolved by hiding the back button? 

    We will wait for your response. 

  • Profile Image
    captkirk
    Answered on March 15, 2018 at 09:52 PM

    I had to hide the back button because when it is visible, the submit button was falling to the same line as the back button, which is too far from the form.

  • Profile Image
    captkirk
    Answered on March 15, 2018 at 09:57 PM

    I used this, but instead of the Back button moving up next to the Submit button, the Submit button fell down to the Back button.

    .form-all .form-submit-button {


        top: 88px;


        position: relative;


    }

  • Profile Image
    Nik_C
    Answered on March 16, 2018 at 05:06 AM

    What is the form you're working on so we can take a look?

    We'll wait for your response.

    Thank you!

  • Profile Image
    captkirk
    Answered on March 16, 2018 at 07:41 AM

    Vehicle Donation

  • Profile Image
    Adrian
    Answered on March 16, 2018 at 10:53 AM

    Please add the following CSS to your form:

    .form-all ul:nth-child(4) li.form-input-wide {

      position: relative;

      top: -94px;

      display: inline-block;

    }

    .form-all ul:nth-child(4) li.form-input-wide div {

      margin-right: 0;

    }


    #id_30 {

      position: relative;

      left: 80px;

    }

    Result:

    1521211982Vehicle_Donation.png

    Cloned Form: https://form.jotform.com/80744150263956

  • Profile Image
    captkirk
    Answered on March 16, 2018 at 11:00 AM

    Everything looks great, except on a phone. Both portrait and landscape are messed up.

     1521213714JOTFORM-LAYOUT.jpg

  • Profile Image
    captkirk
    Answered on March 16, 2018 at 11:02 AM

  • Profile Image
    Adrian
    Answered on March 16, 2018 at 12:25 PM

    To fix the displaying on mobile devices, change the CSS that you copied before to this.

    @media (min-width: 700px) {

    .form-all ul:nth-child(4) li.form-input-wide {

      position: relative;

      top: -94px;

      display: inline-block;

    }

    .form-all ul:nth-child(4) li.form-input-wide div {

      margin-right: 0;

    }

    #id_30 {

      position: relative;

      left: 80px;

    }

    }

    The form will look like this on smaller screens.

    15212174681.png

    If you want the buttons next to each other on smaller screens as well, add this CSS in addition to that above.

    @media (max-width: 699px) {

      #id_30 {

        width: 50%;

        padding: 0;

        margin-right: 0;

        margin-left: auto;

        position: relative;

        z-index: 999;

      }

      .form-all ul:nth-child(4) li.form-input-wide {

        position: relative;

        top: -53px;

      }

      #input_30 {

        height: 41px;

        line-height: 41px;

        padding: 0;

      }

    }

    This is how the form looks with the extra CSS.

    15212175312.png