Using Contact Form 7 is easy, seamless, and considered 1 of the cheapest solution for web contact form. The only requirement is, the web site has to build on WordPress.
If you are not using WordPress, you may skip this article and look for other solutions I proposed, else just continue reading the below.
Contact Form 7 is a plugin for WordPress. To fulfill our requirement for the contact form, we have to install 2 plugins for the WordPress site
Up to to-date, the active installation for Contact Form 7 is around 5mil+, well I guess 5mil+ of users can’t go wrong, is it?
Pre-requisite check
Initial requirement
Let’s look at how it started, as well as the initial design
Platform
Contact Form 7 only work on WordPress platform. Make sure the website you work on is on WordPress. If you are not sure about this, do ask your friendly IT department.
Email
Most of the shared hosting already get email configured. However if you are on cloud hosting, or dedicated server, you may need to make sure SMTP is working.
What? You don’t know what is SMTP? Ok, it is time to get to your friendly IT department again…
Minimal coding
There is some small amount of HTML code you will be facing. If you are uncomfortable with syntax, coding, and facing any form of panic attack… this solution is not for you
Proper permission
If you are still around, I am sure you are comfortable with this solution. Last but not least, make sure your WordPress login credential have Administrator right, so that you can install the plugins.
Let's get started
Download and install the necessary plugins
Download the necessary plugins, install and activate the plugins
Configure the Contact Form 7
1. Create a new contact form by selecting “Add New”
2. Setup the contact form as the screenshot
3. You can make use of the code below in the form content
<label> Your name
[text* your-name] </label>
<label> Your email
[email* your-email] </label>
<label> Your phone
[tel* tel-536] </label>
<label> Title
[text* your-title] </label>
<label> Your message (optional)
[textarea your-message] </label>
[submit "Submit"]
4. Go to “Mail” tab, to configure what data to send to your email
5. You may want to copy the below code for your Message body
From: [your-name]
Subject: [your-title]
Email: [your-email]
Phone: [tel-536]
Message Body:
[your-message]
6. Ok, all done, let’s copy the short code and put on to a page
7. Create a page under “Page” menu, this page going to contain the form you just created. You may select the Contact Form 7 from the block, and select the name of the form you just created.
8. Once you done, you can always preview to test it out!
Let's try it out
1. Ok now you created the form, and put on the page, so is time to test it out. Let’s submit something
2. Upon submission of the form, you may check your mailbox. To lookup for the submitted data, you may go under admin panel, side menu “Contact Forms”, you will find your results under different forms (assuming you have different forms
3. Click on the form, and click on the result you submit just now, and voila, the data are kept there.
