Home>Blog>Adding a Form to a Hero Image

Adding a Form to a Hero Image

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.

View the demo.

Required Plugins

Page Builder by SiteOrigin
SiteOrigin Widgets Bundle

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.

Getting Started

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:

Height: 780px
Top and bottom padding: 140px
Extra top padding: Not populated
Side padding: 20px
Maximum container Width: 80%
Heading color: #fff
Heading size: 54px
Heading shadow intensity: 50
Text size: 22px
Text color: #fff

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: Cover
Background image opacity: 20
Background color: #000

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:

Set row top padding to 100 and mobile padding to 0.

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

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 H2 or 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. Next, add form fields as required. In our example, we’ve used a text field for name and an email address field. Finally, open the Design section and style your form as required. 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.

Layout Builder contents

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:

Block Animations
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.

Parallax Sliders
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.

Autoresponder
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

View the demo.
Download the demo layout (JSON file).

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

  1. 5 days, 19 hours ago David LeBlanc

    Thanks guys, nice tutorial. I have two projects where I thought about something like this. Very useful and timely.

    • 5 days, 19 hours ago Andrew Misplon Hi, I Work Here

      Hi Dave :) Great to hear from you. Thanks for reading. Let us know if any questions arise. Cheers!

  2. 2 days, 21 hours ago sam

    Thank you for the visual demonstration. All clearly and graphically.
    But there is a question:
    How and where the transparency function of the feedback form is included. I can not find. And still it is not possible to combine to combine a background, the text and the form in a single whole (as at you).
    Even after downloading your demo. Only the adjusted background is displayed (size,
    transparency, etc.) But there is no text and no form.
    What am I doing wrong? Thank you if you explain.

    • 2 days, 20 hours ago Andrew Misplon Hi, I Work Here

      Hi Sam, thanks for reaching out. We can answer short questions here but more complete questions like yours, we ideally need to assist on the forum. Please, open a thread here: https://siteorigin.com/thread and include a link to the page you’re working on. We’ll take a look. Thanks. (If you’re using SiteOrigin Premium, please email us for help.)

    • 21 hours, 59 minutes ago Andrew Misplon Hi, I Work Here

      Hi Sam, have you had a moment to open a support thread on the forum?

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More