Grouping Form Fields To Style Your Form

This guide explains how to group form fields for a better UI experience.

Initial Setup:

Drag and drop some fields with a “JavaScript” field onto your form.
Rename the fields as needed.

Configuring The “JavaScript” Field:

Click the pencil icon of the “JavaScript” field.
Paste the code.

Please use this code:

// Create a new div element with the well class
var well_div = $('<div>').addClass('well').css({
  'background': 'rgb(110, 155, 134)'
});

// Array of field IDs to move into the well
var field_ids = ['463c-1207-d204', '0022-99c8-eda8'];

// Iterate through field IDs and move each field into the well
field_ids.forEach(function(id) {
  // Select the existing field element
  var field = $('#component-' + id);
  
  // Check if the field exists
  if (field.length > 0) {
    // Append the field to the well
    well_div.append(field);
  } else {
    console.error('Field with ID ' + id + ' not found or invalid.');
  }
});
$('#component-66b6-a454-1207').append(well_div);

Please make sure to update the field IDs as per your form.
Here, 463c-1207-d204 and 0022-99c8-eda8 are the field IDs of the “Text” and “Email” fields to group them. And 66b6-a454-1207 is the field ID of the “JavaScript” field.
Save the changes.

Test Your Form:

It will group the form fields for a better UI.

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