- Forums ›
- Software Programming Tutorials ›
- WordPress ›
- How to Use Contact Form 7 Plugin for WordPress?
A client recently wanted me to develop a well designed and easy to use portfolio website for him which should have been developed in WordPress. In his requirements document he wanted me to include a Jquery Slider, About Us section, Testimonials part, Our Team section and Contact Us form. In his requirements document he also stated that every part of the website should be manageable from WordPress Dashboard including Contact Us form.
A Contact Us form can have different fields (as per end user’s requirements) i.e First Name, Last Name, Email, Phone Number, Country, Subject and Description & is almost necessary for every business website. In this tutorial I will let you to learn how to use Contact Form 7 plugin for a WordPress website.
Why to Choose Contact Form 7 Plugin?
Contact Form 7 plugin comes with lots many features which are certainly ideal for any WordPress website. Some of the features are given below:
1: You can download Contact Form 7 plugin for free from wordpress.org website.
2: You can place more than one forms on a WordPress website by using Contact Form 7 free WordPress plugin.
3: Each & every form (by Contact Form 7 plugin) on website can be customized with mail contents as per end user’s requirements.
4: Contact Form 7 is AJAX based submission plugin and supports spam free submissions.
5: Documentation for how to use Contact Form 7 is available.
6: Short Codes for each customized form are available which can be used in any post and page.
7: Translation facility is also available for Contact Form 7.
How to Use Contact Form 7 Plugin?
Follow following easy steps to place a Contact form on your WordPress website:
1: Download Contact Form 7 plugin or go to WordPress Dashboard -> Plugins -> Add New -> Type Contact Form 7 & press Enter button -> from search results click install button and after successful installation press activate link. If you have downloaded Contact Form 7 plugin, extract it, go to WP Content -> Plugins -> Place extracted folder here -> Go to WP Dashboard -> Plugins -> Installed Plugins -> Activate Contact Form 7.
2: Once activated, you will see new “Contact” menu added in left menu pane. Hover mouse on it and click Contact Forms.
3: You will now see a default created “Contact Form 1” and in front of it you will see a short code which can be used to place on any post or page.
4: Copy whole short code. Once copied, hover mouse on “New” menu tab in top navigation bar and click page.
5: Give a title to page and click “Text” tab of editor section of page. Paste copied short code here and publish your newly created page. Now click “View Page” and you will see a Contact Us form on newly created and publish WordPress page.In the same way you can place contact form any where on a page or post and you can also use it in a text widget.
How to Create a New Contact Form of Your Own Choice?
Contact Form 7 plugin comes with many fields and options and you can easily create a new contact form for your website. Follow following easy steps to create a new Contact Us form for your website of your own choice:
1: Click “Contact Forms” in right menu pane of WordPress Dashboard.
2: Hover mouse on default “Contact Form 1” and click duplicate link.
3: It will create a new contact form which will be a duplicate of default created “contact form 1”.
4: Hover mouse on duplicated contact form and click Edit link.
5: Now you will see following fields:
<p>Your Name (required)<br /> [text* your-name] </p> <p>Your Email (required)<br /> [email* your-email] </p> <p>Subject<br /> [text your-subject] </p> <p>Your Message<br /> [textarea your-message] </p> <p>[submit "Send"]</p>
On this page you will see number of buttons (fields) which you can add to a contact form. In above quoted fields we have Name, Email, Subject and Message fields but what if we also need end user’s to enter their phone number?
6: Click “tel” field button and you will see a new popup appearing with fewer options.
7: First option on popup form is a check box which you can use if you want field to be required.
8: Right below check box there is a “Name” field which you can leave as it is for now.
9: Next field is “Default Value” which you can fill by a example number i.e. +97 111 111 000 and right below this field you will see a check box which you can click if you want to use example number as placeholder.
10: ID attribute and Class attribute fields can be used if you want to use a custom CSS ID and CSS class for input field.
11: Now notice a short code appearing right below all above stated fields which will be looking something like this now
[tel tel-923 "097111111000"]
12: Copy short code and close popup form. Paste the field any where on the form where you want newly field to be placed. Add a label for new field as well if you want new field to have it and your new form should look something like following:
<p>Your Name (required)<br /> [text* your-name] </p> <p>Your Email (required)<br /> [email* your-email] </p> <p>Subject<br /> [text your-subject] </p> <p>Phone Number<br /> [tel tel-923 "097111111000"] </p> <p>Your Message<br /> [textarea your-message] </p> <p>[submit "Send"]</p>
13: If you are willing to set mail settings, click on “Mail” tab and set your mailing information.
14: Messages tab can be used to set different messages for Email Form.
15: Once done with all settings, rename your duplicate form and press Save button.
16: In the same way you can add any field to your customize Contact Us form and now you can copy short code of newly created form and can place it any where on your website.
The forum ‘WordPress’ is closed to new topics and replies.