076 693 8020              Web Design Cape Town   info@gwebdesign.co.za              Web Design Cape Town   Web Design Cape Town

Website Design Tutorials | How to add a contact form | G Web Design

Creating a Contact Form on WordPress

Creating a Contact Form

Welcome to another G Web Design tutorial. In this lesson we will look at creating a contact form for in your WordPress website using the popular Contact Form 7. No WordPress website design or any website design for that matter will be complete without visitors having a convenient way to contact you directly from your website.

This tutorial will be using WordPress version 4.6 and the Responsive theme. It is assumed that you are already signed into your WordPress backend and that you know how to install a plugin. If not please view this tutorial : ADD PLUGIN

Step 1

Install the plugin, Contact Form 7. Once done a new menu item will appear on the left called “Contact”.

website design

website designStep 2

Now hover over “Contact” and click on “Contact Forms”. This will open up the Contact Form 7 dashboard. You will notice that an sample contact form is already created with the corresponding shortcode. The shortcode can be pasted in any page where you want to display the contact form.

website designStep 3

Let's click edit on the sample contact form and see what's happening inside. The edit link appears when you hover over the sample contact form.

This will bring us to the “Edit Contact Form” page. Here is where all the magic happens. Let's look at what the page contains.

  1. Firstly we have the Contact Form Title.
  2. The shortcode required to activate the contact form on a page or post.
  3. The Contact form Menu tags.
  4. The Contact form field tags.
  5. Content Area that is made up of the contact form field tags, plain text and html tags.
  6. Finally the “Save” button, there is on on the top right and one at the bottom left.

website design

website designStep 4

As you can see the by the text this contact form contains :

  1. A name field which takes text as input based on the contact form tag [text* your-name]. The asterisk makes the field required and it cannot be left empty.
  2. An email field which takes only a valid email address using the tag [email* your-email].
  3. A subject field which is also a text field [text your-subject].
  4. A message field which is a textarea [textarea your-message].
  5. Finally the submit button using the tag [submit “Send”].

The sample form as you can see is a complete basic contact form. Other contact form tags include textboxes, radio buttons, etc. All shown on the screenshot above.

Step 5

Once we are satisfied with the look of the contact form we now move over to the “Mail” tab. This tab will allow you to specify where you want the contact form information to go to. The screen itself guides you nicely what to complete. The “To” is the email address where you want it the information to go to. The “From” is what appears in your email's “From”. The “Subject” is the subject you will receive to your email address. The “Additional Headers” is quite useful as this will allow you to reply to the mail directly to the visitor enquiring. The “Message Body” is what you will see in well you mail body.

You will notice that everything is customizable and the contact form tags correspond to the ones that were created in the “Form” tab. This makes it really easy to map everything together.

Some additional features as you scroll down include “File Attachments” if you want to attach a specific file when the form is submitted. Also the “Mail (2)” feature, which allows you send another mail to anyone but is usually used as a response to the visitor as a confirmation email that there request was received.

website designStep 6

The next tab is “Messages” this is messages to the visitor if they leave a required field empty or if they fill a field in incorrectly. As you go through the list you can customize it as you please.

website designFinally there is the “Additional Settings” tab, we will not go into this but you can read up on it when clicking on the link provided. Save and we are done with the creation part. Follow the exact same steps above to create a new contact form except start with “Add New”.

website design

Step 7

Now that we are happy with all the settings let's paste our shortcode into a page. We will create a page called “Contact us”. Follow our tutorial on how to create a page : ADD PAGE On the screenshot below we can see the title, and the pasted shortcode into the content area of our new page, all that is left to do it publish and once this it done we can simply click the link “View page” to see our form.

It looks great.

website design

website design

website design

Thanks for reading,

Graham (Website Designer Cape Town)

G Web Design (Website Design Cape Town)

“Your partner on the web”

Comments are closed.