The HTML widget allows you to add formatted content, instructions, or custom layout elements directly into your form. It does not store data in the underlying SharePoint list.

What Is the HTML Widget?

The HTML widget provides a rich text editor where you can add:

• Formatted text
• Headings
• Lists
• Links
• Images
• Tables
• Structured content

It is commonly used for:

• Form instructions
• Compliance statements
• Policy references
• Visual separators
• Branded headers
• Custom layout elements

Unlike standard fields, the HTML widget is for display purposes only.

How to Add the HTML Widget

 

1. Open the Layout tab in the Designer.
2. Select Widgets in the left panel.
3. Drag and drop HTML onto your form.
4. Enter content using the rich text editor.

 

The widget will display the formatted content directly within the form. The HTML widget includes a full rich text editor with standard formatting tools or you can switch to Code View.

Example Ideas for Using HTML

You can use the HTML widget to create:

Branded Section Headers 

Custom coloured headers with icons.

<div style="padding:12px 15px; background:#2F80ED; color:#ffffff; border-radius:4px;">
   <h3 style="margin:0;"><i class="fas fa-folder-open" style="margin-right:8px;">​</i> Project Details </h3>
</div>

Information Panels

Highlight important instructions or warnings.

<div style="padding:15px; background:#f4f6f9; border-left:4px solid #2F80ED;">
   <h3>Important Notice</h3>
   <p>Please ensure all required documents are uploaded before submission.</p>
</div>

 

Policy Acknowledgement Text

Display formatted compliance statements.

<div style="padding:10px; background:#f8f9fa; border:1px solid #dee2e6;">
   <p>
      <i class="fas fa-shield-alt" style="margin-right:6px;"></i>
      By submitting this form, you confirm that all information provided 
      complies with organisational policy.
   </p>
</div>

Visual Separators

Create spacing or horizontal rule sections between groups of fields.

Simple divider:

<hr style="border:0; height:1px; background:#e0e0e0; margin:20px 0;"/>

Divider with icon:

<div style="text-align:center; margin:20px 0; color:#6c757d;">
   <i class="fas fa-ellipsis-h"></i>
</div>

Embedded Links

Provide quick access to policies or external systems.

<p>
   <i class="fas fa-external-link-alt" style="margin-right:6px;"></i>
   <a href="https://yourorganisation.com/policy" target="_blank">
      View Full Policy
   </a>
</p>

 

Tips

• Use HTML when you want layout flexibility beyond standard fields
• Do not try use HTML to collect data.
• Keep formatting consistent with your form theme.
• Avoid overcomplicating layout with unnecessary styling and keep instructional text concise.
• The HTML widget is display-only, it does not create a SharePoint column.

Was this article helpful?

0 out of 5 stars

5 Stars		0%
4 Stars		0%
3 Stars		0%
2 Stars		0%
1 Stars		0%

5 Submit

Please Share Your Feedback

How Can We Improve This Article?

Name

Email

Submit