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

    Can't align side-by-side dropdown fields with text fields in other rows

    Asked by emagma on September 07, 2015 at 08:33 PM

    In my form I have essentially set up 2 columns, however the rows with drop-down fields won't align with the text fields above (see screenshot). *note, "Best Time to Call" is a conditional field (must select phone in previous field).

     

    I tried a few css options, and I tried setting the width in the editor, but I can't seem to align the fields.

     

     

     

     

    Page URL:
    http://form.jotform.us/form/52467803359160

    Screenshot
    side-by-side rows side
  • Profile Image
    JotForm Support

    Answered by EltonCris on September 07, 2015 at 11:16 PM

    Inject this CSS codes to your form, this should fixed it.

    .form-col-1 {width: 50%;}

    .form-col-2 {width: 50%;}

    @media only screen and (max-width:480px){

    .form-col-1 {width: 100%;}

    .form-col-2 {width: 100%;}

    }

    Result:

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    Hope this helps!

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 07, 2015 at 11:17 PM

    Place the CSS codes at the most bottom part. If you need further help, let us know. ;)

  • Profile Image

    Answered by emagma on September 08, 2015 at 04:00 PM

    Thanks for the quick response, however it does not seem to be working for me. I copied and pasted the CSS code at the bottom as you recommended, but nothing changed. I noticed that it looks correct in the screenshot you uploaded, so I'm wondering why it didn't work on my side.

     

    Also, I added a google recapture field to my form, and I would like to put the Submit button on the same line, but I do not seem to be able to. Do you know how I could accomplish this? The fields do not need to be lined up with the other ones, however I would like them on the same row if possible.

     

    Thanks!

  • Profile Image

    (Private)

    Answered by Ben on September 08, 2015 at 06:00 PM

    I took a look at your form and I see why it was not applied - the code was OK, but seems that your form was changed in the mean time - since it was now set to be in several columns following one another.

    What I did was to set each second field to go into the new row:

    This set the fields to have .col1, .col2 and then the ones in the new row/line get the same class assigned to them as well - while before they were: .col1, .col2, .col3, .col4, ...

    After that, I just set the Submit button to be smaller by using Shrink option and that set both of the Google Captcha widget and the submit button to be in the same row.

    I made these changes on your own form, so the change is already active and you can see it by simply going to your form: http://form.jotform.us/form/52467803359160

    Do let us know how it looks for you :)

  • Profile Image

    Answered by emagma on September 09, 2015 at 02:12 PM

    That makes sense and seems to be just what I was looking for. Thanks so much for your help, it's amazing how small little differences can make such an improvement.

  • Profile Image

    Answered by Ben on September 09, 2015 at 03:16 PM

    You are welcome and I am glad that it is looking as you wanted it to :)

    I agree, but they say - life is all about the small things in it :)