Multiple Headers Per Row Using An HTML Field

In this guide, we will explain how to show multiple headers per row using an HTML field.

In this example, we will display two headers per row. And we will make the HTML field a controlling field.

Drag and drop a Select, an HTML and two Hidden fields. Fill in values for Hidden fields.

Click the pencil icon of the HTML field and paste the code.

Use the below code:

<div class="row">
  <div class="col-xs-6"> <h5>{{fdac-70ca-ab5f}}</h5> </div>
  <div class="col-xs-6"> <h5>{{28b9-7208-1f41}}</h5> </div>
</div>

Change the field ID’s according to your form.

Click “Add Controlling Fields”.

Add the Select field’s “Select One” option as the controlling field. Save the changes.

Try the form. If the user Selects the “Select One” option in the Select field. The HTML field will show the headers.

Optional: Please add this code if you want to align HTML headers with the rest of the form.

<div class="col-sm-12">

</div>

Output:

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