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

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?

 

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.

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

different forms for the different breakpoints on my adobe muse site the way to go? 

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!

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.

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.

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.

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-