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
  • 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

    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 :)