WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Add a Contact Form to Your WordPress Footer

by Shahzad Saeed on Jun 8, 2017

Looking for a way to include a WordPress form in your footer? WPForms makes it easy to embed your forms in your WordPress footer. In this tutorial, we’ll show you how to include a contact form to your WordPress footer.

Method 1: Use the “WPForms” Widget

This is the recommended method to add a form to your WordPress footer. This method is only applicable if your WordPress theme supports a widgetized footer area.

Step 1: Create Your WordPress Form

The first thing you need to do is install and activate the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

Once you have installed the WPForms plugin, go to WPForms » Add New to create a new form. Then, in your form builder, click on the Simple Contact Form template to create one.

Select a form template

You can easily customize the form fields by the drag and drop feature.

For more details, you can read our article on how to create a simple contact form.

Step 2: Add Your WPForms Widget to Footer

Now you’ll need to add the WPForms widget to your footer widget area by going to Appearance » Widgets.

add a footer widget

Then, adjust the widget settings as needed, and click on the Save button.

footer widget wpforms

Your WordPress contact form will now appear in the footer on your website.

Method 2: Tweak the Template

If your WordPress theme doesn’t support a widgetized footer, you might want to tweak your footer.php template to add a contact form.

Note: This method is not generally recommended, because you’ll also have to customize the style of your footer form with CSS or it may look distorted. You can either customize the style by yourself or use a plugin like CSS Hero, which allows you to style your form without writing a single line of code. For more details, you can read our guide on customizing WPForms with CSS Hero.

Step 1: Get the Shortcode of Your WordPress Form

Just like the above method, create a contact form with WPForms. Once it is created, you’ll have to get the shortcode.

To find it, click on the Embed button in the top menu.

embed code

You’ll now see a popup with a shortcode. Copy it.

wpforms shortcode

Replace the [example_shortcode] in the below snippet with the copied shortcode.

<?php echo do_shortcode("[example_shortcode]");?>

In our case, the final snippet will look like this:

<?php echo do_shortcode("[wpforms id="526"]");?>

Step 2: Tweak the footer.php File

To add a contact form to your footer, find the footer.php file of your WordPress theme by navigating to Appearance » Editor in your WordPress dashboard.

footer file

In the right-hand side of your theme editor, look for footer.php file. Click on it, and then paste the above code snippet.

That’s it!

You’ve now successfully added a contact form to your WordPress footer.

You might also want to read how to create a file upload form in WordPress.

What are you waiting for? Get started with the most powerful WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

  2. I need our Contact form box to fit the width of the website to be responsive.
    It is not working properly. I would appreciate it if I could get assistance as to why the WP Form Widget is not being responsive .

  3. Hello,
    We’re using the contact form as a footer widget, thanks to your step-by-step guide.
    But the width of the textbox for accepting email address doesn’t occupy full width of the widget, and the Submit button isn’t having the same width as the textbox above it (it’s smaller)

    How do we change their properties accordingly?

    1. Hi Abhinaya,

      Sure, so to make the email field (or any other input field) full-width, you can open the form builder and click on that field to open its Field Options. Then open the Advanced Options section, and you’ll see a dropdown named Field Size (shown in this screenshot).

      Then, to also make the submit button full width you can use this CSS:

      div.wpforms-container-full .wpforms-form input[type=submit], 
      div.wpforms-container-full .wpforms-form button[type=submit] {
          width: 100%; /* Make the button full-width */
      }
      

      In case it helps, you can find details on how to add CSS like this in WPBeginner’s tutorial. And we have a whole doc on customizing the submit button further, as well.

      I hope this helps! 🙂

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.