Home>Blog>Adding a Form to a Hero Image

Save 30% on SiteOrigin Premium for this week only. Use coupon code NOVEMBER30 at checkout Buy Now

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. 2 months, 7 days ago David LeBlanc

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

    • 2 months, 7 days 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 months, 4 days 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 months, 4 days 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.)

    • 2 months, 2 days ago Andrew Misplon Hi, I Work Here

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

      • 30 days, 2 hours ago Ali

        Hello,
        I’m having the same issue. Done everything as suggested in the tutorial, several times in fact. But all I have is the background image when I preview the completed page. When I preview it within the Page Builder, then I just get one column, it seems to ignore the 2 columns. Help. Many thanks

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

          Hi Ali. How about when you save and view the page? If that doesn’t help, have you tried using the prebuilt layout provided in the tutorial as a starting point? If that also doesn’t help, please, open a support thread on the forum so we can assist further. Please, include a link to the page you’re working on. The forum is here: https://siteorigin.com/thread. If you open a thread then consider switching to another task until we’ve had a chance to take a look, that way you might save a little time :)

        • 28 days, 12 hours ago Andrew Misplon Hi, I Work Here

          Hi Ali :) Have you made progress?

  3. 1 month, 8 days ago Lance Watkins

    Hi Andrew: will this (or something similar) work to display text inside a photo? i.e., without a slider [but a full-width hero image] and without a form?
    I have been trying other site-builders and none allow me to place words over images then position the words anywhere in or out of the photo’s location on the web-page.

    Also, is there a way to “demo” your Page Builder without WordPress installed? I am trying to choose a site-builder before getting bogged down with my first install of WordPress. I already have a host.

    Thanks so much.

    • 1 month, 8 days ago Andrew Misplon Hi, I Work Here

      Hi Lance, thanks for posting. Please, see our Hero overview video here: Page: Hero Image Widget. You can use the Hero to place text over an image. You could move the text location using the Hero padding settings. There, unfortunately, isn’t an online demo for Page Builder by SiteOrigin. It’s a free plugin so you can install it and the SiteOrigin Widgets Bundle once you have WordPress installed. A lot of hosts offer one-click WordPress install so it might be quicker than you think to test. Good luck with your research :)

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More