Conditionally add a group of multiple fields in one line

  • Profile Image
    dharrispalaceresorts
    Asked on September 18, 2019 at 12:34 PM

    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?)


  • Profile Image
    Vanessa_T
    Answered on September 18, 2019 at 01:53 PM

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

    1568829209A.gif

  • Profile Image
    dharrispalaceresorts
    Answered on September 24, 2019 at 02:46 PM

    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?

  • Profile Image
    dharrispalaceresorts
    Answered on September 24, 2019 at 02:48 PM

    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!!!

  • Profile Image
    Vanessa_T
    Answered on September 24, 2019 at 03:01 PM

    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.

    1569351668The Easiest Online Form Builde

  • Profile Image
    DevonLandowTravel
    Answered on September 24, 2019 at 03:43 PM

    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?

  • Profile Image
    Vanessa_T
    Answered on September 24, 2019 at 04:09 PM

    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.

  • Profile Image
    DevonLandowTravel
    Answered on September 24, 2019 at 04:26 PM

    Thanks Vanessa, 

    where would i place the media query?  

  • Profile Image
    Vanessa_T
    Answered on September 24, 2019 at 04:36 PM

    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