Adding a form to your hero image is a great way to turn user attention into action. In this tutorial, we’ll cover how to use Page Builder by SiteOrigin and the SiteOrigin Widgets Bundle to add a hero image (using the Layout Slider widget) and a contact form to your page.
Once Page Builder and the Widgets Bundle are activated, go to PluginsSiteOrigin Widgets and make sure that the Layout Slider, Headline and Contact Form widgets are activated.
Go to Pages and edit the page you’d like to insert your hero into. If you haven’t activated Page Builder on this page yet, click on the Page Builder tab and then in the Page Builder toolbar, click the Add Row button and add a single column row to your page. While editing the row, click the Layout tab on the right and set the Row Layout to Full Width Stretched.
Next, select the row you’ve just created and click the Add Widget button. Because we need a Layout Builder within our hero we’re going to use the SiteOrigin Layout Slider widget. After clicking Add Widget, use the search bar at the top left to search for the SiteOrigin Layout Slider widget and insert it.
Setting up the Layout Slider
Click on the SiteOrigin Layout Slider widget and then the edit link to open it. Before adding a frame, click on the Design and Layout tab to enter a few basic setup settings. For our demo, we’ve used the following:
Top and bottom padding:
Extra top padding: Not populated
Maximum container Width:
Heading shadow intensity:
Adding a Frame and Contents
As with all SiteOrigin slider widgets, multiple frames (slides) can be added. In this example, we’ll just be adding a single frame. Click the Add link in the Slider Frames section to add a frame. Start out by opening the Background section and adding a background image. In our demo we’ve used:
Background image type:
Background image opacity:
Our demo background images were sourced from Unsplash.
With our frame background added, it’s time to add a headline and contact form. Click the Open Builder button, this will open a mini-instance of Page Builder. To set up your content, follow these steps:
1. Click the Add Row button. For our demo we added a single row with two columns. Click and drag the column divider to change the widths. We’ve used
60% for the left column and
40% for the right. While editing the row, click the Layout tab on the right and set
100 for the top padding and
0 for right, bottom and left. Set Mobile Padding to
2. Insert your widgets. Click on the left cell, then click the Add Widget button, use the search form at the top left to search for the SiteOrigin Headline widget. Repeat the same process for the right cell and insert the SiteOrigin Contact Form widget.
3. Edit the Headline widget. Open the Headline section and insert your headline text, we’ve used
H1 for the headline HTML tag. For SEO your page should only contain one
H1 tag. If you’re using a
H1 tag anywhere else on your page then it’s best to make this
H3 depending on your content structure. Next, open the Sub headline section and insert your sub headline. We’ve used
Paragraph for the HTML tag. Finally, open the Divider section. We’ve set the Style setting
None as we aren’t using the divider in this example. Click Done to save your changes.
4. Edit the Contact Form widget. The Contact Form widget is quite settings rich so it might take a few moments to set up.
Open the Settings section to set up your form basics such as email addresses, subject, success message and send button text.
Add form fields as required. In our example, we’ve used a text field for name and an email address field.
Open the Design section and style your form as required. In our demo, we’ve set the ContainerBackground color setting to be blank, we’ve removed the color value so that no background color is set. This is an important setting to ensure our form has a transparent background. We’ve also set the Container padding to
0px and the Border style to None.
In the Field Labels section, set the Position to Inside.
In the Fields section, we’ve set the Font Size value to
18px, we’ve left the Background setting blank and set the Border color to
#c0c0c0. We’ve set the Border width to
1px and Border style to Solid.
In the Submit button section, we’ve enabled the Style submit button setting, used Font size
18px. We’ve set the Align to Left.
Once complete, click Done to save the Contact Form widget and then Done again to save the Layout Builder, lastly, click Done to save and exit the Layout Slider widget and then publish or update your page.
Enhanced by SiteOrigin Premium
SiteOrigin Premium is a plugin that adds additional settings and functionality to SiteOrigin widgets, Page Builder and SiteOrign themes. It also includes our quick and helpful email support service. The following SiteOrigin Premium addons could be applied to engage users and provide additional functionality:
The Block Animations addon offers animation settings for rows and widgets. We’ve created a demo showing a simple widget fade in with a slight delay. Read more about the settings available in the SiteOrigin Premium Block Animations addon it the documentation.
The Parallax Sliders addon offers parallax scrolling for the SiteOrigin Slider, Hero, and Layout Slider widget. We’ve created a demo showing the Layout Slider with a parallax scrolling effect. Read more about the settings available in the SiteOrigin Premium Parallax Sliders addon it the documentation.
The SiteOrigin Premium Contact Form addon provides an autoresponder. Let users know you’ve received their email and provide a timeframe for response. Read more about the settings available in the SiteOrigin Contact Form addon in the documentation.
Using the Demo Layout
If you’d like to make use of the demo layout, follow these steps:
1. Download the above JSON file to your desktop.
2. Go to the page you’d like to use, if you haven’t activated Page Builder on this page yet, click on the Page Builder tab and then in the Page Builder toolbar, click LayoutsImport/Export.
3. Upload the layout either by dragging and dropping or selecting it using the select button.
4. Finally, click the Insert button bottom right.
If you have any questions or comments, please let us know below, we’d love to hear from you.