Want to be able to have a background image or color behind a form widget in Sitefinity? The background widget is perfect for creating marketing or funnel forms with visual interest. Hero Forms will be made using the Add a Background widget. This allows the widget to handle the background image while allowing builders the flexibility to use embed widgets in combination with many other widgets to achieve a rich hero form experience.
The embed widget is used to display the forms using embed codes from different vendors. Here's some of the vendors you can use, along with how well they work with this functionality.
Full HTML should not be pasted into the embed widget and an accessible iframe should be used or code should be split between the head and body of the page.
To Make an iFrame Accessible it must have a good title, this allows visually impaired visitors to understand what the iFrame contains and decide whether or not they wish to interact with it.
Locate the embed code and add title right after "iframe" like so:
<iframe title="short & descriptive title about video" width="560" height="315" src="https://www.youtube.com/embed/...>
When using text and background images, be sure that your color combinations meet accessibility requirements. Use this guide to check your color contrast!
Setting a background with a form can be done in three parts. The first is to use a background grid widget; this gives the page the ability to display the background. The second is to use the background widget to setup the background. This allows site builders to choose what their background will be. The third is to use the form widget or embed widget on top to add your form and complete your design.
The following sections will break down each component step by step.
Background grid widgets have to be used in conjunction with the background widget in order for the background to apply. The first step to using this feature is to choose a background grid widget that suits your design needs. To select a background widget, please do the following:
1. Open your page in edit mode.
2. Click the layout tab in the top right hand corner.
3. Scroll down towards the bottom where you will find the background grid widgets.
4. Choose the Background 1+6+4+1 specifically designed for hero forms
5. Drag and drop the widget into the full width container on the page
6. Click Content in the top right hand corner to go back to the content widgets
Once you have your background grid widget on the page you can now add a background widget on to the page. To do this please complete the following steps:
1. In the area where you placed the background grid widget, you will see a note "Use with Add a Background widget".
2. Drag and drop the "Add a background" widget in that area, The default background is Black text with a solid white background.
3. Click Edit to select your background.
4. Choose your background. You have two choices: a text and background color combination or an image of your choice. Also, decide if the background should apply to the full row or only the column.
5. Save your changes. You will now see a preview of the background on the page. PLEASE NOTE: The "Add a Background widget" shows up in this view but will now show when you preview or publish a page.
You have two options for adding a form. You can use the form widget within Sitefinity or use an embed widget to display a form from a third party source.
To use a form, complete the following steps: