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

    How to align submit button with the fields next to it?

    Asked by shaliniy on April 07, 2015 at 04:54 PM

    Thank you, David. I have gotten to the point where I need ONE more item...the submit button is too low and I cannot find the code in the wrapper or button itself to align it with the id #1 and #3. Can you help, please?

     

    Thank you.

     

    Michelle H

    align fields align submit button CSS custom CSS layout
  • Profile Image

    Answered by Ben on April 07, 2015 at 05:04 PM

    Looking at your jotform here: http://www.eftthailand.com/dev/coaching-mentoring/ I see that submit button is a bit down compared with the two fields on its left.

    To vertically center them, you should take this code Michelle:

    #id_2 {
        margin-top: -18px;
    }

    Now, if you want to have the submit button start at the same point as the top input field, you should instead use this one:

    #id_2 {
        margin-top: -14px;
    }

    Now if you want to have the fields on the left align with the submit button so that they start and end at the same point, you should add this CSS code instead:

    #id_2 {
        margin-top: -14px;
    }
    #id_3 {
        margin-top: 8px;
    }

    Now I would also like to suggest adding this code to make the change in the padding:

    #id_1 input.form-textbox, #id_3 input.form-textbox {
        padding: 6px;
    }

    This is how it would look with the last two codes:

    When adding the CSS code, please add it at the bottom of the all code. You can see how to do it here: Inject Custom CSS Codes

    Do let us know how it goes.

  • Profile Image

    Answered by shaliniy on April 08, 2015 at 03:49 PM

    This wasn't perfect, but it got me the code I needed to work on to make everything align. Thank you!

     

  • Profile Image

    Answered by Ben on April 08, 2015 at 04:53 PM

    You are welcome.

    Do let us know if you have any further questions and we would be happy to assist.