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

    Hide/Show multiple text area field in the same area in the form

    Asked by cami_019 on January 08, 2017 at 11:08 PM

    I tried to find a way but to no avail. I need the text area (hotel details) to appear below the accommodation field without affecting the placement of the email and contact # field. Also, I need to align the Name textbox with the other textbox in the first line.

    I can only think that this would be possible using tables but I cannot find a way to insert tables in the form.

    Ideally it should look like below:

     

     

    Can you give me any idea how to achieve the look above?

     

    Page URL:
    https://form.jotform.me/70070766648462

  • Profile Image
    JotForm Support

    Answered by Charlie on January 09, 2017 at 04:11 AM

    Hi,

    Could you please see if this works for you: https://form.jotform.com/70082039939966 

    This is how I setup mine:

    1. First, make sure to position the static text at the end. After that, make sure that you click "Merge to above line" on each of them.

     

    2. After that, add this CSS code:

    #id_10, #id_11, #id_12, #id_13 {

        top : -50px !important;

    }

     

    That should position the static text just below the "Accommodation" field. 

    However, this works if the form has a static or fixed width. Changing the width might change the layout or position of the fields.

    Let us know if that will work.

  • Profile Image

    Answered by cami_019 on January 09, 2017 at 04:39 AM

    Thanks! I was able to correct the position of the fields in the first column using relative positioning in css as well. Do you have any suggestion in order to make the form responsiv

    e while maintaining the current positing of the fields? Or is creating
    different forms for the different breakpoints on my adobe muse site the way to go? 
  • Profile Image
    JotForm Support

    Answered by seth on January 09, 2017 at 06:30 AM

    Hello,

    You can use Mobile Responsive widget to make your form responsive. Could you please give it a try if it suits your design needs? Here it should be look like this after adding mobile responsive widget:

    Yo may need to change the order of your fields with respect to mobile design needs.

    I hope this answer helps. Please don't hesitate to contact us for your further queries.

     

    All the best!

  • Profile Image

    Answered by cami_019 on January 10, 2017 at 02:50 AM

    I checked Mobile responsive widget but it seems there is no way to redesign the form in different breakpoints. Thanks for the suggestion though. Really appreciated.

  • Profile Image
    JotForm Support

    Answered by Charlie on January 10, 2017 at 04:10 AM

    Yes, unfortunately, you'll either need to have a complex CSS code to re-arrange the fields to cover the mobile responsive layouts.

    Or you can create a copy of the form with a specific layout for mobile devices only. From your website, you can use a Javascript or a CSS code to display which of the two forms depending on the screen size of the device viewing it, it is possible using @media query. Here are some links that might help you:

    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 

    https://developers.google.com/web/fundamentals/design-and-ui/responsive/ 

     

    I hope that helps.

  • Profile Image

    Answered by cami_019 on January 10, 2017 at 06:20 AM

    Okay thanks, related to the positioning of the fields. When I click on the submit button without entering anything on the fields, these 3 fields and the text area (room description) moves downward? How do I make sure they stay in place?

    Already tried adding !important next to the top: -44px; property but to no avail.

  • Profile Image
    JotForm Support

    Answered by Rose on January 10, 2017 at 06:47 AM

    Your last question is moved to the following thread. Since, it is another topic than the main subject. Please follow up its answer there. 

    https://www.jotform.com/answers/1030315-