Sitecore tip 44: how to use the SXA background image on the SXA form component

A new year with a new tip. The last couple of weeks were very busy but I’m back with a new year of Sitecore tips and visions on digital marketing.

I’m helping out on a project that requires some SXA knowledge and run into a nice challenge. The designer had created a form that was displayed on top of a background image. So I thought this was an easy one because I can configure the _Background Image template for a component like described here:

It gives you an extra option on the component to configure a background image.

Well, that didn’t worked as I expected. The problem is that you have only one template for Forms where you can add the _Background Image template to. It is shown in the image below but this does not affect the components that you use to display the form on a page.

The two components are the Sitecore Form Wrapper component (which is a SXA component) and a Mvc Form component. That last one has nothing to do with SXA as far as I know and there is no default data template for the Sitecore Form Wrapper component.

Now what?

The tric

Here is what I did to use the default SXA component background image option:

1. Create a new data template and call it something like Forms Wrapper Settings. This data template does not need to contain any fields but you have to add the _Background Image feature like explained on the Sitecore document site (see URL in the introduction above).

2. Next, configure a datasource configuration for your site for the Sitecore Forms Wrapper component. In this datasource configuration item you specify the just created data template.

3. On the page where the form should appear add the Sitecore Forms Wrapper component with the Mvc Form component and select your form. Default SXA and Sitecore forms stuff here.

4. In this last step, you will have to add a new item for the Sitecore Forms Wrapper component. This will be based on the data template you created. This will ‘activate’ the _Background Image feature which is part of your data template and thus the SXA Sitecore Forms Wrapper component will show the background image icon. Choose your image and it will appear in the background like any other component.

Aahhh don’t you just love SXA!!