How to set up a Header field

The Header Control helps you to insert header and subheading in your form. Header and subheading are one of the most important set of texts as they represent the key concepts and the supporting objectives of your form.

Utilization There are two ways to use the Header Control.

1. Use the Header Control when you will start to build your form and want to insert the title/heading of the form.
2. Use the Header Control when you are starting a new part/sub-topic of your form and want to insert a subheading.

Follow the steps mentioned below to use the Header Control in the most effective way:

1. Click on the Basic Controls in the control bar to drop and drop the Header Control.
2. From the list of sub controls, the first sub control is the header control.
3. Drag and drop the Header Control to the drop area.
4. Click on the edit property settings and let’s get started with each edit functions.
   

Label

Utilization: Everything should have a label on it to communicate its objectives. The label box helps you write the title/heading or any subheadings. Whatever you write inside the label box will be reflected on the main page. Follow below are the list of steps

1. In the edit property settings, click on the label box to edit the label.
2. Now, writer the heading or subheading of your form.
3. Click on ‘Yes’ on the bottom right corner to apply the edit.

Type

Utilization: The type box helps you to build a form that can communicate with your user in a very effective manner. The type box provides you with the list of header types. Here, you can assign a type to your different headers to distinguish header from subheading, subheading 1 from subheading 2 etc. Here, the number after ‘H’ denotes the hierarchy of your headings. (Refer the image for understand the use of heading and subheadings in the type box)

1. Click on the type box to drag down the list of header types from H1 to H6.
2. From the list of header types, click on H1 If you are inserting the main title of your form.
3. Choose H2 to H6 If you want to insert a subheading of your form.
4. Click on ‘Yes’ on the bottom right corner to apply the edit.

Style

Utilization: In simple terms, the style option helps you with the alignment of your text. But, in terms of significance, the alignment not only helps you to communicate the importance of the text they are reading but also help them to read and understand effectively.

1. There are three style options given for your heading and subheadings.
2. Click on the middle alignment if you are writing the main title of the form.
3. Click on the left alignment for all other subheadings.
4. Click on the right alignment for all other subheadings.
5. Click on ‘Yes’ on the bottom right corner to apply the edit.

(Note – Step 1 and Step 2 are generally followed in terms of better communication. However, you can use the alignment as per your preference)

Custom CSS style

Utilization: It is very important to choose the right form and style of your header if you want your readers to pay attention to the subject matter that your header represents. Therefore, we provide you with the Custom CSS Class option for more personalized styling and formatting experience.

CSS or Cascading Style Sheets, in simple terms, is a computer language that helps you to layout and structure your web page.

In more simpler terms, Custom CSS class gives you the power to add your own styling options. For example, if you want your header to be reflected in a black background with a white font, you can add a CSS class to do that.

Please note, you do not need to be a coder to use this styling option. There are many pre-defined CSS Class that you can use to your advantage.

Given below is an example of how you can use a CSS Class to your advantage.

.asw-text-header {
    font-size: calc(1.625rem + 4.5vw);
    font-weight: 300;
    line-height: 1.2;
}

1. In the edit property settings, click on the Custom CSS Class box.
2. Write the CSS class that you want to use.
3. Click on ‘Yes’ on the bottom right corner to apply the edit.