What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Field Alignment

    Asked by swinkcreative2 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?

    Page URL:
    https://www.jotform.com/build/70375228868164

  • Profile Image
    JotForm Support

    Answered by liyam 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

    Answered by swinkcreative2 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

    Answered by swinkcreative2 on February 22, 2017 at 07:39 PM

    Also the I'm Not a Robot widget?

    Thank you!

  • Profile Image
    JotForm Support

    Answered by Charlie 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.