Contact Form 7: Web contact form in 5 minutes

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!

There is no configuration required for CFDB, it work automagically out of the box.

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.

Let's walkthrough again

Leave a Reply

Your email address will not be published. Required fields are marked *

Prev
Seatable: Web contact form in 5 minutes

Seatable: Web contact form in 5 minutes

Using SeaTable to create a contact form is easy, simple and fast

Next
Electronic sign your document in 5 minutes, with different approaches

Electronic sign your document in 5 minutes, with different approaches

Electronic sign a document has been around for a while, it is not that difficult

You May Also Like
Total
0
Share