WPForms Blog

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

How to Add a Contact Form in a WordPress Sidebar Widget

How to Add a Contact Form in a WordPress Sidebar Widget

by Courtney Robertson on Jun 27, 2016

Do you want to add a contact form in your site’s sidebar? Adding the contact form in your sidebar makes it easy for users to find and get in touch with you. In this article, we will show you how to add a contact form in a sidebar widget with WordPress.

If you don’t like the video, or need more instructions, then please continue reading.

Before you can add a contact form in your sidebar widget, you need to first create a contact form.

Start by installing and activating the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

Next, go to WPForms » Add New to create a new form.

Add New WPForm

On the setup screen, you need to name your form and select the Simple Contact Form template.

Contact Form Setup

WPForms will create a simple contact form.

You can add additional fields by dragging them from the left column to the form.

Contact Us Form

Once you’re done, make sure to save your changes.

Add a Contact Form in a Sidebar Widget

Now that your form is created, we need to add it to the sidebar widget area. Go to Appearance » Widgets and then click on WPForms from the available widgets.

You need to drag it to the right side widget area. After that select your form and save the widget.

Add a Contact Form in a Sidebar Widget

Once done, you can view your site to see the published form.

Here’s an example of how the contact form looked like in our sidebar:

Contact Form Sidebar Widget

If you want, you can also add your contact form into a post or page on your site by going to the page and clicking the Add Form button. Just save the published page and view your form.

You can also combine this contact form with our email marketing addons like MailChimp, AWeberGetResponse, and Campagin Monitor. This allows you to automatically add all leads to your email marketing list. You can even add them into various marketing automation sequences from there.

It’s that easy. We hope this tutorial helped you add a contact form in a sidebar widget.

Wondering where else you should put your contact form? Check out our recommended top 3 places to put your contact form for more leads. You could also create a contact form popup or even add a contact form to a slider.

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

Comments

    1. Hi Vanusa,

      Your form’s font should, by default, inherit the fonts from your theme. If it’s not inheriting the fonts you’d like, though, you can customize this with a bit of custom CSS. Here’s an example that will change the font for any forms in a sidebar to Arial:

      .sidebar .wpforms-container { font-family: arial; }

      You can replace ‘Arial’ with any font you have available on your site. The easiest way to add this to your site is to use the built-in WordPress CSS editor. This takes just a few clicks, and there is a great video tutorial here.

      And here’s a W3 schools page with more information on how to use font-family in CSS, in case that’s helpful.

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.