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

  • Profile Image
    cami_019
    Asked 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?

     

  • Profile Image
    Charlie
    Answered 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
    cami_019
    Answered 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
    seth
    Answered 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
    cami_019
    Answered 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
    Charlie
    Answered 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
    cami_019
    Answered 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
    Rose
    Answered 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-