Background Widget with a Form

About

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.

Design

Form vendors

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. 

Vendors that work very well with little to no additional steps:

• Sitefinity forms: not an embed widget, just the Sitefinity forms widget
• Formstack: the vendor provides multiple embed options
• Active campaign: the vendor provides multiple embed options
• MailChimp: the vendor provides multiple embed options

Vendors that work well with some additional steps:

• Slate: requires a background color to be added

Vendors that require additional steps or a manually written iframe:

• SmartSheet: requires an accessible iFrame to be written before it can be embedded
• Qualtrics: vendor does not provide embed code so an accessible iFrame must be written
• Form Assembly: provides embed code but it tends to be complicated.
  

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.

Accessibility

iFrames

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/...>

Color contrast

How to

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.  

Use background grids 

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

Use background widget

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.  

Add a form 

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.

Use a form

To use a form, complete the following steps:

1. Navigate to the Dashboard
2. Select Forms
3. Click Create a form
4. Give your form a title
5. Click Create and go to add fields
6. Add your fields
7. Click Publish
8. Navigate back to your page in Edit mode
9. Drag and drop the forms widget into the background widget (column 3 is recommend)

Use an embed widget

While site builders cannot use this widget on their own, you can request that a widget be inserted on your page by a Web Services team member. Simply submit a ticket here and be sure to include the url of the page and a description of what you will be using the widget for. 

Once you have been notified that the widget has been place on your page do the following: 

1. Drag and drop your widget to the desired location (column 3 is recommended)
2. Hit edit
3. Paste in your code
4. Save