Each website needs a Web Form to collect data filled by the user. The Web Forms can have any number of fields to be filled like text fields, radio button, checkboxes, drop downs and so on. When the user fills and submits this form, the information is send to the website admin with an automatic eamil.
Creating Web Forms in your WordPress website can be easily done through Contact Form 7 Plugin (also known as CF7 Plugin). It is used by over 1 million people in their WordPress websites.
The plugin is free to use and can be downloaded from here.
In Contact Forms area of your WordPress, all the forms are listed. The plugin comes with a premade first form called Contact form 1.
Copy it’s Shortcode and place it in any page or post. Visitors to your website can fill and submit the form, their submission data will be sent to your email address automatically.
You may want to make forms having different fields like checkboxes, drop downs, text fields, email, telephones, etc. Luckily these are all provided in CF7. For the purpose of understanding let us make a Job application form with CF7.
Start creating a new form from Contact > Add New area. Give the form title as Job Application.
Since I will be creating the form, from the beginning, therefore delete entire HTML which is given there in the big text area.
Click on text tag given at the top. In the window that opens – check the Required field checkbox and enter the name as yourName, then click Insert Tag> button. The control will be added to the form.
Note that there are also other properties which can be given to the tag like its default value, placeholder text, id and class attribute.
To make the form look in good design, I give a small text – Enter your name – , before the tag. This makes easy for people to know what they are required to enter in the form. Also put it inside a HTML Paragraph Tag (‘p’).
It will look like as shown below:
<p>Enter your name – </p> <p>Enter your email - [email* youEmail]</p> <p>Website designed by you - [url* websiteDesigned]</p> <p>Your telephone - [tel* yourtelephone]</p> <p>Expected salary in USD/month - [number* expectedSalary min:2 max:4]</p> <p>Expected joining date - [date* expectedJoining min:2016-06-21 max:2016-06-30]</p> <p>Your skills - [textarea* yourSkills]</p> <p>Your gender - [select* yourGender include_blank "Male" "Female"]</p> <p>Your education - [checkbox* yourEducation "High School " "Graduation" "Post - Graduation"]</p> <p>Ready to relocate to New York City - [radio relocate default:1 "Yes " "No"]</p> <p>Accept our terms - [acceptance acceptTerms]</p> <p>Answer our question - [quiz GK "President of USA ?|Obama"]</p> <p>[recaptcha]</p> <p>[file* yourCV]</p> <p>[submit "Submit Application"]</p>
I have created the form, now we need to customize the mail which CF7 plugin will send. Click on the Mail tab where you will see all our created tags except – acceptance, quiz, reCaptcha and submit. This is because I cannot ask for candidate information from these 4 tags.
Now I explain how to customize the mail –
The Message body will look like –
Candidate's information - <br/> Name - [yourName] <br/> Email - [youEmail] <br/> Website Designed - [websiteDesigned] <br/> Telephone - [yourtelephone] <br/> Expected Salary - [expectedSalary] <br/> Expected Joining - [expectedJoining] <br/> Skills - [yourSkills] <br/> Gender - [yourGender] <br/> Education - [yourEducation] <br/> Relocate - [relocate] <br/>
File Attachments – In this field put [yourCV]. You may remember that [yourCV] is the tag for candidate’s CV.
In the end Click the Save button.
The below image shows how mail fields will look.
Showing the Contact Form 7 Form in a Page or Post
Our form is finally created and is ready to test. Simply copy its shortcode, which may look like:
[contact-form-7 id="67" title="Job Application"]
Simply copy and paste it in any page or post.
This is how our Web Form looks (shown below). You may notice that it does not look good in design, you can make its proper design using CSS and HTML by yourself.
Now whenever a candidate fills and submits the form, all the information will be send to your email address.
This is how CF7 emails will look –
CF7 Forms can be styled easily using CSS. Take a look on Contact Form 7 Style Tutorial to learn about styling CF7 form.
CF7 sends instant email as soon as the form is submitted. If you are not receiving email for it, then please check your spam folder. Email delivery also gets delayed sometimes so kindly wait for 2 minutes for the email to arrive.
Sometimes CF7 is unable to send emails altogether, this may be due to restrictions from your hosting server or your mail box settings. To solve this you can make Contact Form 7 Plugin to use SMTP (Simple Mail Transfer Protocol) to send its email.
Below are the steps in putting SMTP to use –
You can test to see if the SMTP is working by sending a test email from the Send a Test Email section. It will show you the result bool (true). Now your Contact Form 7 will send emails through SMTP.
Hope you like our tutorial. Please do share your comments / questions below.