How to set up Contact Box on your WordPress blog

Last Updated on

When building your WordPress blog, there are tons of questions on your mind. Among them: How do I make it easy for people to contact me?

Of course, you could always list your email or phone number, but if you’re aiming for the best user experience, a contact form makes getting in touch simple.

But how do you set it up? Start with one of the best WordPress contact form plugins, Contact Form 7, and follow these instructions to get it going on your site.

Download the Contact Form 7 Plugin

From your WordPress dashboard, head to your “Plugins” page and choose the option “Add New.”

Want to start your own site? Check out my step-by-step tutorial on how to start a blog.

Contact form 7 plugin for WordPress
  • Save

In the search section on the right-hand side, type in “Contact Form 7.” Find the appropriate plugin (it should be the first one), and choose “Install Now.”

Contact form 7
  • Save

On the next page, click “Activate Plugin.”

Set Up Your Contact Form

Now that the plugin is activated, you’ll notice a new “Contact” area on your left-hand toolbar in your WordPress dashboard. Click on it and choose “Add New.”

From your dashboard sidebar
  • Save

If you want to use English as your default language, click “Add New” on the following screen. Otherwise, you can choose your language from the drop-down menu and then select “Add New.”

The following page will look like this:

Default contact form
  • Save

Start by entering a title for your contact form. This is not something your viewers will see, so feel free to nick-name it as you wish.

In the text box below the title is where you can customize the contact fields. If you’re not familiar with HTML, that’s okay. The set-up process is still fairly simple.

By default, your contact form will include these fields:

  • Your Name (Required)
  • Your Email (Required)
  • Subject
  • Your Message

You will also see the code for a “submit” button.

The default will end up looking a lot like this on your site, though styling may vary based on your theme:

Contact form 7 by default
  • Save

If you want to get rid of one of these fields for some reason, find the corresponding code and delete it. (Codes for a single field are encased in paragraph tags, beginning with <p> and ending with </p>.)

If you want to add a new field, place your cursor where you’d like to insert it. Then, follow the same format for the fields already present. It should look like this:

<p>TITLE OF FIELD<br />

[field shortcode] </p>

The title you place between <p> and <br /> will show up as text above your chosen field in the contact form. To find the appropriate shortcode and to customize it accordingly, choose from the options directly under the word “Form.” Follow the instructions given in the pop-up window.

Let’s take an example. If I wanted to have contacts include their website and I wanted this field to show up after their email, I would place my cursor between the “Your Email” section and the “Subject” section.

Then, I would type in <p>Website<br />, press enter, and then choose “URL” from the option buttons. In the pop-up window, I can customize my settings, such as choosing to require this field. In this case, I have simply gone with the defaults and clicked “Insert Tag.” Then, I added the paragraph closing tag (</p>).

This is what the form looks like in HTML format:

Raw code of contact form
  • Save

This is what it now looks like live:

Live contact form 7
  • Save

Now that your fields are customized, visit the other tabs next to “Form” to ensure the settings are as you please. For instance, in “Mail,” you may decide to change the “To” or “From” address. The “To” address is where you will receive the messages sent through your contact form.

All done? Hit the “Save” button at the bottom or the right-hand side of your screen.

Add Your Contact Form to Your Blog

Now it’s time to make your contact form go live. There are two simple ways to display a contact form on your site, and we’ll cover both below.

1. Display Your Form on a Page/Post

Inserting your contact form into a page or post is very simple. After you’ve hit “Save,” you’ll notice a shortcode show up directly below your contact form’s title.

Shortcode for your contact form box
  • Save

Right-click on the shortcode and hit “Copy.”

Then, navigate to the post or page you want to display your contact form on. Place your cursor where you’d like the form to show up, right-click, and choose “Paste.” (You can paste it while in visual or text mode, it doesn’t matter.)

Simple as that! Make sure to preview your page to ensure your contact form is showing up properly.

2. Add Your Form as a Widget

To paste your contact form as a widget in your sidebar or footer, head to the widgets customization section in your WordPress dashboard by going to Appearance > Widgets. From the available widgets, choose “Text,” and then add the widget to the proper sidebar and arrange it accordingly.

Contact form on your blog sidebar
  • Save

In the “Content” section of the widget, paste the shortcode you copied from your contact form’s edit page. Feel free to add a title to the widget, which will show up above the contact form on your site. Then, hit “Save.”

There you go! Now you’re all ready to start gathering feedback on your site. Feel free to shoot yourself a test email just to make sure the form is working.

Further reading

If contact form 7 isn't your cup of tea, Gravity Forms is a great alternative.

Want to signup your subscribers to an email newsletter? Here's my guide to setting up WordPress and Mailchimp.

How do I get more signups? Read 101 Ways To Promote Your Blog

1 thought on “How to set up Contact Box on your WordPress blog”

  1. Shawanna Rubarts

    Great goods from you, man. I’ve understand your stuff previous to and you’re just too fantastic. I actually like what you’ve acquired here, really like what you are stating and the way in which you say it. You make it entertaining and you still take care of to keep it wise. I cant wait to read far more from you. This is actually a great website.

Leave a Comment

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

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

2.2K views
Copy link