Field Alignment

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

  • Profile Image
    liyam
    Answered on February 10, 2017 at 01: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.

    If you have questions, please let us know.

    Thanks.

  • Profile Image
    swinkcreative2
    Answered on February 22, 2017 at 07: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?

  • Profile Image
    swinkcreative2
    Answered on February 22, 2017 at 07:39 PM

    Also the I'm Not a Robot widget?

    Thank you!

  • Profile Image
    Charlie
    Answered on February 23, 2017 at 02: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.