How do I place elements side by side?

  • Irene_Lacoursiere
    Asked on June 29, 2021 at 5:38 PM

    Dear Support,

    I created a form for meeting room rentals using the style Sleek. I have several elements side by side, usually a Multiple Choice box, and then a hidden Number field which only appears if the MC box is checked. There are several of these combos, so it works particularly well when the Number field appears to the right of the MC box. When the form is filled out, the amounts in the Number fields all appear one above the other, and it is easy to see the amounts.

    We ran into a problem with Sleek, however, and it is that the time fields are not intuitive. If people want to book a room for 8:00, as soon as they enter the 8 in the Hour drop-down, they immediately get an error message saying they need to enter a valid time. If they then click the Minutes dropdown and enter a value, the error message goes away. However, my testers found this unnerving, and since much of our target audience is not necessarily comfortable with computers, we are concerned that this would be off-putting for them.

    I looked at some other styles and found that both Simplicity and Default have nicer inputs for time. However, both of those styles change the format of the form so much that my MC and number fields can no longer sit side by side, as mentioned above.

    Is there a way for me to have both preferences, i.e. an HH:MM time entry field and the ability to keep my elements side by side?

  • Ashwin JotForm Support
    Replied on June 30, 2021 at 1:20 AM

    The best option I would suggest you to use the default theme which will not display the validation error for time field for incomplete values. Please check the screenshot:

    1625029759 60dbfc7fad861 defaultTheme Screenshot 10

    I would suggest you to please change the theme of your form, and then we can inject custom CSS code to place the questions side by side.

    Do you want to display the start/end date side by side with the time field and also the conditional field? I have cloned your form and will work on the css to fix the issue.

    I will get back to you on this soon.

  • Ashwin JotForm Support
    Replied on June 30, 2021 at 1:35 AM

    Please take a look at the following demo form and see if it displays the fields correctly: https://form.jotform.com/211800415675956

    Feel free to clone this form in your account. The following guide should help you in form cloning: https://www.jotform.com/help/42-how-to-clone-an-existing-form-from-a-url

    Hope this helps.

    Do get back to us if you need any other changes.