Multiple Fields Per Row

The following guide will demonstrate how to list multiple fields in a single row.

Example form - https://survey.formyoula.com/online_v5/61f230af44e225001ea2302a

Please use one of the below examples to group specific fields in a row.

Functions to group fields into rows using a list of components IDs.

set_fields_into_a_row('19b1-4293-9d73, 40c6-0e48-3cba');
// Set fields into a row function 
function set_fields_into_a_row(row_fields) {
	// Get row field size
	var row_field_size = 12 / row_fields.split(',').length;
  // Get row field component ids
  var row_field_ids = row_fields.split(',').map(a => `#component-${a.trim()}`).join(",");
  // Set fields into a row
	$(row_field_ids)
	    .wrapAll('<div class="row">')
	    .addClass('col-xs-' + row_field_size )
	    .find('.input_label').css('width', 'auto');
}

Enable field grouping in Repeat Groups.

// Set repeat group Id
var repeat_group_field_id = '1ec3-af85-f33f';

// Group selected fields into row
set_repeat_fields_into_a_row( 'e54f-ab94-96fd, 895a-0977-dec1' );
set_repeat_fields_into_a_row( 'e744-d7b9-3aa8, 90a9-4ae3-7d8b, f2b4-9064-0dad' );

// Set fields into a row function
function set_repeat_fields_into_a_row( row_fields ) {
  // Get row field size
  var row_field_size = 12 / row_fields.split( ',' ).length;
  // Get row field component ids
  var row_field_ids = row_fields.split( ',' ).map( ( a ) => `#component-${a.trim()}` ).join( ',' );
  // Find new and existing repeat entries
  $( '.new_repeat_entry_panel, .existing_repeat_entry_panel' ).each( function( index, el ) {
    // Set fields into a row
    $( el ).find( row_field_ids )
      .wrapAll( '<div class="row">' )
      .addClass( 'col-xs-' + row_field_size )
      .find( '.input_label' )
        .removeClass( 'col-sm-2' )
        .addClass( 'col-sm-12' )
        .css( 'text-align', 'left' )
      .next()
        .removeClass( 'col-sm-10' )
        .addClass( 'col-sm-12' );
  } );
  // Listen to repeat group changes
  window.formyoula.form_fields[ repeat_group_field_id ].once( 'element:create:success', function( options ) {
    // Group selected fields into row
    set_repeat_fields_into_a_row( row_fields );
  } );
} // END set_repeat_fields_into_a_row

We can also listen to other field changes, like a controlling field to update the row grouping.

// Listen to Formyoula field changes based on field label
window.formyoula.form_fields[ 'Controlled Field' ].on( 'all', function() {
  // Check if the field value is set to true
  if ( this.get( 'value' ) ) {
    // Set fields into single row
    set_fields_into_a_row( '1234-7b8f-3a33, 4321-96f0-edb1' );
  }
} );

// Set fields into a row function
function set_fields_into_a_row( row_fields ) {
  // Get row field size
  var row_field_size = 12 / row_fields.split( ',' ).length;
  // Get row field component ids
  var row_field_ids = row_fields
    .split( ',' )
    .map( ( a ) => `#component-${a.trim()}` )
    .join( ',' );
  // Set fields into a row
  $( row_field_ids )
    .wrapAll( '<div class="row">' )
    .addClass( 'col-xs-' + row_field_size )
    .find(".input_label")
        .removeClass("col-sm-2")
        .addClass("col-sm-12")
        .css("text-align", "left")
    .next()
        .removeClass("col-sm-10")
        .addClass("col-sm-12");
}

Below simpler examples can also be used for field grouping.

(Option 1) Group multiple input fields into a row.

$("#component-19b1-4293-9d73, #component-40c6-0e48-3cba")
    .wrapAll('<div class="row">')
    .addClass("col-xs-6")
    .find(".input_label").css("width", "auto");

(Option 2) Group multiple input fields into a row.

$("#component-d23f-75a2-71e5, #component-4800-a697-a660, #component-264d-4484-0db5")
    .wrapAll('<div class="row">')
    .addClass("col-xs-4")
    .find(".input_label")
        .removeClass("col-sm-2")
        .addClass("col-sm-12")
        .css("text-align", "left")
    .next()
        .removeClass("col-sm-10")
        .addClass("col-sm-12")

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂