Having a contact form on your site is a great way to offer your readers the ability to get in touch with you, without giving out your personal email address. If you own a WordPress blog, and you are not satisfied with the wordpress comment form, you can try Contact Form 7 plugin for WordPress.
Contact Form 7 is a free, simple and flexible contact form creator by Takayuki Miyoshi. It can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.
I use the plugin to create different kind of forms on my WordPress-powered sites and I've decided to share with you, how to set up a basic contact us page, using the free form creator plugin for WordPress.
Below, is a form created with the plugin, with the "acceptance" option and the message displayed after successful submission of the form.
It's available as free download at the WordPress Plugin Directory but the official website is ContactForm7.com. There is an official docs section for detailed documentation.
After you install and activate the plugin, you will find a dedicated menu item called "Contact" in the admin dashboard of your WordPress site. Clicking it, will take you to the Contact Form 7 main screen where you can create new forms, or edit the one that is there.
Right there, you will see your first contact form. It comes pre-made for you; usually called “Contact form 1". You will also see the shortcode (labelled "3"in the screenshot above) which you’ll need to install the form on a post or a page.
By clicking on the title of the form, or clicking on the “edit” link that appears when you mouse over it, you can modify the form.
The first form that is built there for you is a great example when you’re starting out with contact form 7. After clicking on "edit", you will be taken to the page where you can edit your comment form. You can duplicate it to make a copy of your current form. This is a great way to test different stuffs without modifying the default form. You can click on the name to rename it.
On the "edit" page, you will see some tags already entered to give you a general idea of what the form can look like, but you can add in and take out anything that you’d like. To the right of the text body is a dropdown menu titled “Generate Tag”, which contains all the tags to choose from.
For you to create a basic form similar to the one I shared earlier, we only need to generate an "acceptance" tag and add it to the default tags so that the "edit" page will look like the screenshot below:
To add the "acceptance" tag, click on the "generate tag" button and select "acceptance".
Copy the code eg [acceptance acceptance-5] and paste to the left, before the code for the "Send" button as seen in the screenshot above.
Click "Save".
Next, is to create your Mail Template
You can modify this template anyhow you want but for starters, just follow me through the basics below:
==> In the "To:" field, Enter your email address in the . Do not enter a gmail or yahoo here unless you have set up an smtp server for your WordPress site.
Use the email, you have created with your domain name. If you don't have, create one via CPanel.
==> In the "Additional headers:" field, you can add "cc: example@gmail.com". This will let you receive a copy of each message at example@gmail.com. You can use any email addres for that.
Leave other fields as they are and click "Save".
Scroll down to the 'Message" section.
Click inside the "# Sender's message was sent successfully" field. Edit it as seen in the screenshot below:
The message is what will be displayed after successful submission of the form and it will include whatever the sender entered in the "name" field.
Click "Save".
Scroll down and paste this line below, to the Additional Settings section:
This will ensure an error message is displayed if a user fails to check the acceptance checkbox.
Scroll up, copy and paste the shortcode of the form somewhere, maybe in a notepad.
Go to the "Contact Us" page that you have created. If you have not created it, go to "Pages" > "New". Give it a title eg "Contact Us".
Paste the shortcode of the form and click "Preview".
If you are OK with it, you can click "Publish".
Thereafter, you can try the form to see if it will work and see if you will receive the message in your email.
Below is a screenshot of a contact page with the shortcode embedded in it:
If you want to make changes to your form, go to "Contacts" and edit the form accordingly.
Note: You can also add the contact form shortcode into a post or in a text widget.
You can check out how to track clicks on the form in Analytics, how to use Akismet with it and also the ContactForm7 FAQs.
You can use the plugin to create forms more advanced than this.
Have fun!
Contact Form 7 is a free, simple and flexible contact form creator by Takayuki Miyoshi. It can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.
I use the plugin to create different kind of forms on my WordPress-powered sites and I've decided to share with you, how to set up a basic contact us page, using the free form creator plugin for WordPress.
Below, is a form created with the plugin, with the "acceptance" option and the message displayed after successful submission of the form.
It's available as free download at the WordPress Plugin Directory but the official website is ContactForm7.com. There is an official docs section for detailed documentation.
After you install and activate the plugin, you will find a dedicated menu item called "Contact" in the admin dashboard of your WordPress site. Clicking it, will take you to the Contact Form 7 main screen where you can create new forms, or edit the one that is there.
Right there, you will see your first contact form. It comes pre-made for you; usually called “Contact form 1". You will also see the shortcode (labelled "3"in the screenshot above) which you’ll need to install the form on a post or a page.
By clicking on the title of the form, or clicking on the “edit” link that appears when you mouse over it, you can modify the form.
Editing and Creating Your first Contact form
The first form that is built there for you is a great example when you’re starting out with contact form 7. After clicking on "edit", you will be taken to the page where you can edit your comment form. You can duplicate it to make a copy of your current form. This is a great way to test different stuffs without modifying the default form. You can click on the name to rename it.
On the "edit" page, you will see some tags already entered to give you a general idea of what the form can look like, but you can add in and take out anything that you’d like. To the right of the text body is a dropdown menu titled “Generate Tag”, which contains all the tags to choose from.
For you to create a basic form similar to the one I shared earlier, we only need to generate an "acceptance" tag and add it to the default tags so that the "edit" page will look like the screenshot below:
To add the "acceptance" tag, click on the "generate tag" button and select "acceptance".
Copy the code eg [acceptance acceptance-5] and paste to the left, before the code for the "Send" button as seen in the screenshot above.
Click "Save".
Next, is to create your Mail Template
You can modify this template anyhow you want but for starters, just follow me through the basics below:
==> In the "To:" field, Enter your email address in the . Do not enter a gmail or yahoo here unless you have set up an smtp server for your WordPress site.
Use the email, you have created with your domain name. If you don't have, create one via CPanel.
==> In the "Additional headers:" field, you can add "cc: example@gmail.com". This will let you receive a copy of each message at example@gmail.com. You can use any email addres for that.
Leave other fields as they are and click "Save".
Scroll down to the 'Message" section.
Click inside the "# Sender's message was sent successfully" field. Edit it as seen in the screenshot below:
The message is what will be displayed after successful submission of the form and it will include whatever the sender entered in the "name" field.
Click "Save".
Scroll down and paste this line below, to the Additional Settings section:
acceptance_as_validation: on
This will ensure an error message is displayed if a user fails to check the acceptance checkbox.
Scroll up, copy and paste the shortcode of the form somewhere, maybe in a notepad.
Go to the "Contact Us" page that you have created. If you have not created it, go to "Pages" > "New". Give it a title eg "Contact Us".
Paste the shortcode of the form and click "Preview".
If you are OK with it, you can click "Publish".
Thereafter, you can try the form to see if it will work and see if you will receive the message in your email.
Below is a screenshot of a contact page with the shortcode embedded in it:
If you want to make changes to your form, go to "Contacts" and edit the form accordingly.
Note: You can also add the contact form shortcode into a post or in a text widget.
You can check out how to track clicks on the form in Analytics, how to use Akismet with it and also the ContactForm7 FAQs.
You can use the plugin to create forms more advanced than this.
Have fun!
Oga Jide, thx for this. I've been waiting for it since you mentioned it on bbm. Will try it and get back to you. God bless
ReplyDelete