Grouping Form Fields To Style Your Form

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

  1. Initial Setup:
  • Drag and drop some fields with a “JavaScript” field onto your form.
  • Rename the fields as needed.
image
  1. Configuring The “JavaScript” Field:
  • Click the pencil icon of the “JavaScript” field.
  • Paste the code.
image
  • 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.
image
  1. Test Your Form:
  • It will group the form fields for a better UI.
image

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