Conditionally add a group of multiple fields in one line

Hello!

I'm trying to achieve conditional logic with grouped fields.

I'd like my form to display a dropdown with "# of Travelers"

The first line (always visable) should display:

Name (first, middle, last) and Birthday widget, all on one line (how can I do that)

Additionally, how should I group these fields so that I can then duplicate and set any additional traveler names and birthdays dependant upon the number selected at dropdown (I know how to use if/then, but do I need to group these fields first?)

May I suggest instead to use Configurable List widget. This enables you to add/remove a group of fields.

hi Vanessa!  This is great, is there any way to add a first, middle, last name within that "name: section" inline along with the birthday?  Also how would I control the text on the button to add?

I figured out how to change the text, but cannot seem to change the label to white and alter the font, hoping you can assist, thank you!!!

Please add the following Custom CSS into the widget's CSS tab.

th {

  font-family: Helvetica, sans-serif;

  font-size: 16px;

  color: #FFFFFF;

}

The sample values on the CSS is based on the font of the other labels on your form, you may change it if you want to.

How-to-Inject-CSS-Codes-to-Widgets

On the other hand, I noticed you have the label Configurable list, if you want, you can hide it by setting Label = Disable.

Thanks Vanessa!  I happened to fix it but I'm wondering how to group these fields when viewed on mobile?  It looks like the mobile view has them still all in-line and it overflows the screen width of the device, is there any way to set the max-width css conditioning to apply to the entire form?  I assume I'd need to insert this into the form's CSS rather than the widget CSS?

The width for that field is already set as 100%, however, it is the content of the widget that is exceeding the screen's width, hence it is showing the scrollbar only for the configurable list.

You can add media queries to adjust the width of the fields within the configurable list when in mobile view and add it on the widget's CSS.

Thanks Vanessa, 

where would i place the media query?  

You need to add the media query to adjust the fields within the configurable list on the widget's CSS. Please follow this guide to do so:

How-to-Inject-CSS-Codes-to-Widgets