How To Make a WordPress Landing Page Template w/ Gravity Forms

The following is a step-by-step guide to making your own custom landing page template in WordPress with Gravity Forms.

1) Download Template Files

Go to your active WordPress theme’s folder (i.e. /wp-content/themes/theme/) via FTP and download the following WordPress template files:

  • footer.php
  • header.php
  • page.php

2) Create Landing Page WordPress Template Files

Rename & save the WordPress template files as follows:

  • footer-landing.php
  • header-landing.php
  • page-landing.php

3) Reference Landing Page Header & Footer in New Landing Page Template

…then save the page-landing.php WordPress template file.

4) Now You Have Custom Landing Page Templates

Now you have separate templates for your landing page that you can edit as you see fit without changing the rest of your website.

5) Tweak Your Landing Page Templates

In many cases you’ll want to replace your main navigation menu with your phone number in the header-landing.php template file. In many cases you’ll also want to remove your footer navigation menu in the footer-landing.php template file. Basically you want to remove any distractions that could potentially hinder conversions on your landing page.

Once your done with all your tweaks, make sure to save and upload all your new WordPress landing page template files (footer-landing.php, header-landing.php & page-landing.php) into the root directory of your your active WordPress theme’s folder (i.e. /wp-content/themes/theme/) via FTP.

6) Create a Landing Page Form in Gravity Forms

Now create a new form for the landing page you want to create in Gravity Forms.

7) Install the JetPack WordPress Plugin

If you don’t already have it installed of course. You’ll want it so you can choose to only show your landing page form on the landing page it was meant for with JetPack’s handy Widget Visibility feature.

8) Create a Page for your Landing Page

Create a new WordPress page for your landing page and make sure to select “Landing Page” as the page’s Template. Then name it something you will remember and save it.

WordPress Page Attributes "Landing Page" Template

9) Add Gravity Forms “Form” Widget to your Page Sidebar

Select the landing page form you created earlier in Gravity Forms. Then click on “Visibility” and only show the Widget if Page is the WordPress page you just created for your landing page and hit save.

Gravity Form's "Form" Sidebar Widget

10) Customize Gravity Forms CSS for Widgets

Add the following CSS to the bottom of your stylesheet; or in your custom stylesheet if you’re being smart and using one,  to make your Gravity Form show up as full-width in your sidebar widget:

.gform_widget .gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium {
width: 100% !important;
}

How To Make a Custom WordPress Landing Page11) Build Your Landing Page

Go back into the page you created for your landing page and fill it out with the content that will induce your visitors into converting.

12) Create a Thank You Page w/ Conversion Tracking

Set your landing page Gravity Form to redirect to a thank you page when it’s filled out. This is the most professional way to go about it and it also makes goal tracking easy in Google Analytics. So be sure to then setup a goal in Google Analytics with a Conversion Funnel so your landing page conversions are being tracked effectively.

13) Create an Email Notification

Landing page best practices include sending out an email notification to visitors who fill out your landing page form, in addition to the thank you page. So make sure to do that too.

14) Convert More of Your Visitors

Now that you can create as many new landing pages as you want with your new landing page template, enjoy converting more of your visitors!

RELATED ARTICLESMORE FROM AUTHOR

7 COMMENTS

  1. Hi Andy,

    Thank you for the post, it helped a lot with figuring out how to create a new page template. But how do I define custom styles for this page, without changing the default ones for the rest of the site?

    Thanks!

    • Hey Valeriu,

      I see two reasonable options for this…

      1) Just use the body class “page-template-page-landing-php” which is specific to the new landing page template to target everything specific to the landing page in your existing stylesheet(s).

      Here’s an example of what I mean:

      body.page-template-page-landing-php h1.entry-title {
      font-size: 42px !important;
      }

      OR

      2) Include a new landing page stylesheet called “landing.css” in your new header-landing.php template file right before the closing tag so it overwrites all the other styles.

      Here’s an example of what I mean:

      Then you’d just include all the stylesheets specific to the landing page in the landing.css file.

    • Awesome! That’s an even better way to handle it =)

      Did you set it to use the wp_enqueue_style function only on your landing pages like the following:

      Then you don’t have to bother with the landing page specific CSS selectors.

  3. great and simple tutorial. thanks.
    Qucik question: what’s the purpose of renaming/copying the footer header and page content?
    Is that just to be able to edit the information contained in those to make them different than the normal content in those files?
    Can’t the page template make use of the normal header, footer, etc?

    • Glad you found it useful =)

      So you can modify the header and footer without messing with the rest of your website. You can then also include JavaScript and CSS that’s specific to your landing pages this way. Granted you could just use PHP IF statements to accommodate this, but I find making separate files to be cleaner. Really just go with whatever your personal preference is. If you have no need to customize your header or footer for your landing pages, then it’s not necessary for you.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.