Field Alignment

  • swinkcreative2
    Asked on February 9, 2017 at 11:14 PM

    How do I get my form's fields to align with the "header"?

     

    Also can I get the words... "payment amount" to fit on one line?

    Page URL: https://www.jotform.com/build/70375228868164
  • liyam
    Replied on February 10, 2017 at 1:49 AM

    Hello,

    You can add this CSS code into your form: 

    #label_19 {
       width: 300px;
    }
    #id_19 {
       margin-left: 28px;
    }

    If you need to know how to inject the CSS code into your form, just click the FORM DESIGNER icon on the right > click the CSS tab.

    If you need to use the ADVANCED FORM DESIGNER to inject CSS, click the ADVANCED CSS EDITOR at the bottom.

    Field Alignment Image 1 Screenshot 20

    If you have questions, please let us know.

    Thanks.

  • swinkcreative2
    Replied on February 22, 2017 at 7:37 PM

    Thank you for your help!  Can you please advise me on how to move the Company Name, Email and Phone Number fields to align underneath?

  • swinkcreative2
    Replied on February 22, 2017 at 7:39 PM

    Also the I'm Not a Robot widget?

    Thank you!

  • Charlie
    Replied on February 23, 2017 at 2:26 AM

    Hi,

    I cloned your form and edited the CSS code. Here's how it looks like on my end: https://form.jotform.com/70530907610954. 

    Is that the alignment you like? If so, you can copy this whole CSS code:

    .form-all {

        box-shadow : none !important;

    }

    .jotform-form {

        padding : 0px 0px;

    }

    .form-all {

        padding-top : 0px;

    }

    .form-html {

        padding-top : 0px;

    }

    .form-line {

        padding-top : 0px;

    }

    .square-hosted-fields {

    width: 100%;

    border-radius: 6px;

    }

    iframe#square_cc_number {

        padding: 6px 0;

      }

    iframe#square_cc_ccv {

        padding: 6px 0;

    }

    iframe#square_cc_exp {

        padding: 6px 0;

    }

    iframe#square_cc_postal {

        padding: 6px 0;

    }

    input#input_19_donation {

        width: 100px !important;

    }

    label {

       min-width: 300px;

    }

    #id_19, #id_7, #id_4, #id_10, #id_8, #id_2, #id_17 {

      margin: 12px 36px 12px 36px !important;

      padding: 0px 0px 0px 0px;

      width: inherit !important;

    }

     

    Replace the current one you have with this one.

    I hope that helps.