Adding Title or Heading on Forms

A Heading in ShForm is a layout element used to add titles and section headers inside a form. It helps structure the form by clearly separating different sections and making long forms easier to understand. The Heading element does not collect any user input on the form and is used only for visual and structural purposes.

Note: When a new form is created in ShForm, a default heading is automatically added at the top of the form. You can click on it to change its text or delete it.

Why Use Headings on Forms?

Headings allow you to:

Improve form readability and structure
Organize form sections
Label groups of related fields
Add titles to multi-step form sections

How to Add a Heading on Forms in ShForm

To add a Heading element to your form:

Open your form in the ShForm Form Builder
Go to the Fields tab in the left panel
Click on Heading or drag it into the form preview
The heading will appear in the form
Click on the heading text to edit it
Save the changes

The Heading element can be placed anywhere in the form using drag and drop.

How to Edit a Form Heading in ShForm

To edit an existing heading:

Click on the heading inside the form preview
A settings pop-over will appear
Update the heading text
Modify heading settings if needed
Click Save

Heading Settings in ShForm

The Heading element supports the following settings:

Heading Text

Defines the title displayed inside the form.

Heading Level

Choose the HTML heading level:

This controls the hierarchy and appearance of headings within the form.

CSS Class

Add custom CSS classes for styling the heading using themes or external CSS.

By default, ShForm supports grid layout classes from col-1 to col-12. These classes allow you to control the width of the heading when building multi-column form layouts.

You can add one or multiple CSS classes by separating them with spaces. These classes are applied directly to the heading element and can be used with your form theme or external stylesheets.