Creating A Contact Form Using Contact Form 7 WordPress Plugin | Contact Form 7 Tuts Part 1

Wordpress Tutorials

Creating A Contact Form Using Contact Form 7 WordPress Plugin | Contact Form 7 Tuts Part 1


Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist:
Download our exclusive 10-Point WP Hardening Checklist:

Creating A Contact Form Using Contact Form 7 WordPress Plugin – Step-by-Step | WP Learning Lab

In this tutorial I’m going to show you how to create a contact form using contact form 7.

Let’s get started. The first thing you’ll need to do is install the contact form 7 plugin.

To install this plugin please log into your WordPress dashboard, hover over Plugins and then click on Add New.

On the next page type “Contact Form 7” into the search bar. The plugin we want should be the first one in the top left.

Click on the Install Now button and then click Activate after it’s installed.

Once that WordPress contact form plugin is installed you’ll see a new menu item on the left hand side of the menu called Contact. Click on it.

On the next page that loads, you will see a new contact form already created. It’s the default contact form you see on most websites including the fields:

1. Name input field
2. Email input field
3. Subject input field
4. Message text area input field

You can actually copy the short code from the middle column and paste it into your Contact Us page and you’re done. You’ve created a contact form.

However, if you want edit that contact from, or make your own, you’ll have to learn how to create new fields. Here are some steps to creating new fields.

1. Click on Edit to edit the form and make sure you are in the Form tab.

2. Choose a field type that you want to add and give it a short, descriptive name.

3. Model how the other fields are created and make sure the HTML code for your new field has the same structure.

4. Click on the Mail tab.

5. Add your new field to the email that is sent by putting it’s name in square brackets somewhere in the message body section. Model the existing fields in the email message body section.

6. Fill out your new form to test it and make sure it works as you want it to.

That’s it for this contact form 7 tutorial. I hope this information helps you! If you have any questions leave a comment below or ping me @WPLearningLab on Twitter.

————–

If you want more excellent WordPress information check out our website where we post WordPress tutorials daily.

Connect with us:

WP Learning Lab Channel:

Facebook:

Twitter:

Google Plus:

Pinterest:

16 Comments

16 Replies to “Creating A Contact Form Using Contact Form 7 WordPress Plugin | Contact Form 7 Tuts Part 1”

  1. When I test my form, it doesn’t include the message or the “person’s” email. What could be wrong?

  2. hi, all works perfeclty but i have a big problem here : the resolution of the text fields is not adapted with the website i mean the fields are too small how can i change that please?

  3. Hi
    how do you customize the ‘send’ button color & text appearance?
    is it possible to change the font size of the field labels too?

  4. Thank you for the tutorial! I am specifically thankful for the extra “how did you find us” section. You went a step further, above and beyond if you will, in trying to help us. Awesome video.

  5. Hello thanks for this video. I just want to ask how to resize the size of the forms. Thanks

  6. Hello Bjorn.
    Many thanks for the tutorial.
    I have a problem:
    I took a form fill test, and I noticed that when everything is filled correctly, the message I put to “sender’s message was sent successfully” appears (in a green box below the form). However, none of the other options appear… When its badly filled, no message appears. Just a red box with an x, before the badly filled field.
    Can you help me please?
    Thanks again.

  7. I am having an issue with wordpress. My pictures are not coming up when i want share on social media.

  8. Why can’t I totally customize CF7. I added my code and it appears different on my webpage.

  9. great video but still have something wrong. I think it is under the mail setting. is this right format for the from?
    [your-name]

  10. I have literally followed every version of this step by step, including the blog version on the website and when I go to view site, it doesn’t show me anything. Other than the words “Contact Us”

  12. Hi, I am a beginner in wordpress. Your video on contact form is really awesome. Can i create a genealogy form using contact form 7 which includes captcha, drop downs and file upload..

  13. Thanks for this. When they enter their details on the contact form, is there a place where all subscribers go on the website so as to have a database of all subscribers? Thanks

  14. Hi, i wanna ask, how to create contact form for user want to download something like article then they must fill first? Thanks!

  15. Hi Bjorn, I have a question for you. I want to create a duplicate form with different fields. The issue im having is alignment. If I center a field called “email” on a form and then wish to use the email field on a separate from aligning it left, the css will center it. Is it possible to rename these fields so I can align them properly or are the tags here to stay?

    As always thank you.

    http://vilaggio.net/contact-us/

Comments are closed.