How to use Contact form 7 in WordPress

[easy-social-share counters=0 style="button"]

Contact Form 7 is available installed with your web site. This is an easy but strong form creator for WordPress. In that post you’ll learn to using Contact Form 7 to set up and then manage a simple form.

The basics of the plugin

  1. After Contact Form 7is installed, you’ll look for a new menu item in your WordPress Dashboard. It is actually known as Contact.
  2. From the Contact main display, you will notice the first contact form. It will come Pre-designed to you. In most cases known as“Contact form 1”
  3. This display as well as shows you the short code you’ll will need to set up this form on a post and a page. It’s very useful to use that as you know your forms or make use of and then creating a lot of them and some of them
  4. .Screenshot-12713-748-AM-2

By checking out the on the title of the form, and clicking on the “edit” URL that appears to be when you are ready to mouse over it, it is easy to change the form.

It is easy to set up new forms, and modify one that will be there. The form in the manage look at is similar to this:

Note: Contact Form 7 cannot save the entries that will be filled up taken out with the form. It just simply is working to forward the form with e-mail. If you would like to save the entries that show up from Contact Form 7, then you can certainly give this plug-in trying

 

Editing and Creating  your first form

Keep in mind, editing Contact Form 7 requires what we call “short-codes” in WordPress these short-codes are words surrounded by square brackets like “” and “”. Or to give it-any kind of design and lay-out that you want, you’ll require to know at the least simple HTML or probably CSS. But then the 1st form that is certainly set up available to you is a good as an example while you’re started with contact form 7. I can stop working the following screenshot:

  1. Copy will always make a copy of your existing form. This is also good for try testing without adjusting your entire form.
  2. Here is the short-code that will actually show the form any where on your WordPress web site. You’ll backup that code and then paste it into a web page, and then save it. That pages will now show your actual form.
  3. It is a good example of the HTML code I discussed. It’s simple you can also just simply follow this template. This code means “line break” the “”and then it’s matching pair: <“/p> mean the start and then end of a paragraph. Very simple or simple HTML.
  4. Here is a good example of a home builder tag short code for Contact Form 7. This means this is going to display a block text area to be filled out. Just like a message in an e-mail.
  5. You take and use this dropdown menu to select a new form builder tag when you need to add a new one. The take a rest of the form displayed below has a couple of choicesfilled out for generate their phone number types of field.
  6. This is the way you are making a fresh field a needed field. This will insert an asterisk “*” to the short-code for this field. You will see that a couple of the fields on the left have the asterisk next to their label, just like “your-name” and then “your-email”. We give this field a name of “Main Telephone”
  7. These 3 fields so the ones on the right are for in advance style options and then you’ll use them whenever you want to need to go into changing and then adjustment the style of your form making use of CSS, HTML, or possibly Java script. But the truth is don’t require to use these kinds of for simple forms.
  8. Here is the form builder tag that resulted from the option I filled out above it. In that case I would need to copy and paste that from that dark brown pack, into the pack on the left. Give it just a little formatting so that would likely insert your phone number field to my contact form.

Screenshot-12813-1013-AM-2

Crafting the email message template

The second and third part of the form editing window let you craft the message that will be sent out. Let’s break that screenshot down:

  1. The email address this form will go to when it’s filled out and submitted by a visitor
  2.  This is using the “your-name” and “your-email” fields from the form above to create the “from:” address in your email. When someone fills your form out, this will be the address it comes from as well as the name and email of the person that filled it out. Subject is self explanatory, but notices the difference between this section and the one above. There is no HTML code in these fields.
  3. Additional Headers, you shouldn’t have to change unless a professional tells you so.
  4. If you wanted to include any kind of attachment, you would do it here. Like if you added an “upload” tag in the previous screen, you could include the attachment file here with its own short code.
  5. Use this if you plan on using an HTML formatted email on the next screen. Usually out of the box, the first form is plain text instead of HTML. But it’s a choice you have.
  6. The Message body is where you will craft how the message will read when you get it. Notice the stuff in the square brackets “ ” match up the field above, the take a rest of the written text will probably be sent out actually like it appears to be right now there.
  7. You show the guidelines making use of the exact same short codes we’ve also been using the entire time.
  8. In case you would like to send the second e-mail at the same time that a person form is submitted, you are likely to check this box. And then file format the E-mail (2) part in very similar style to the 1st one. This second e mail part usually is for an e-mail that would go to the particular person submitting their message to you, as an easy way of giving you to them records of their e-mail to you.

mail-part-contact-form-seven

Customizing the user experience

The final part that I would like to cover up in the changing windows is the Messages part. This is how you manage the messages that your traffic could see when making use of your own form. There are a few different ones, but I’m only pointing 2 facts out in the screenshot below:

  1. It is the description for each individual message. Note that each one of these below has its own title, the title also describes when finally this message shows up. The particular for example shows up whenever the message your visitor is trying to work up a send you goes through successfully.
  2. That is a good example of the basic customization pack for each and every message. Just as their titles, each one of these features its own written text to be customization by you. You could have it say any-thing you would like when ever that action takes place, just like if you are the message will not send, or in case of the user forgets to sign up a field.

 user-interface-messages

The form in action

The last section of the article is very easy. In case you have created your own form, so you want to make use it on a web page, on a blog post and even on a widget on the sidebars and some other widget parts on your blogs, you just copy and paste the form’s short code ( just like displayed on the 1st and 2nd screenshot ).

Here’s what it really is similar to in our contact form web page:

shortcode-action

You can make use of forms to get feed-back from website visitors; you can make use of these to collect release forms as an example, and practical application forms. You first name it, if you want to pick up a few information from your website visitors and the users of your web site, after that you’ll require a few form builder so this can be a great option in case you’re on a tight budget to be wanting to get your own hands and wrists dusty.

The drop down menu for generation form tags has any other field you can imagine you can also customize these to fit any kind of form you will make use of on your Word Press web site.

Screenshot-12813-1137-AM

Lastly, this is exactly what the simple form is similar to to your website visitors.

contact-form-seven

 

Submit a comment

Pin It on Pinterest