English

How to make Contact Form available to attach file in WordPress

Hi. Everyone.

On last Friday, I spent all day making “Contact Form” to my customer’s website. He has a construction company and wanted to make it possible for his customer’s to attach file with picture of projects that want done. There’re lots of paid plug-ins, but it was hard to find a plug-in which a file could be attached! After a few minutes of being on Google, I found “Contact Form 7”. It was awesome, but I was confused a small detail which cost me 4 hours. I will share my experience on how to use “Contact Form 7”.

First step will be to install and activate the “Contact Form 7” plug-in to WordPress as shown in the picture below.

Then find the contact button in the left side of the banner. Afterwards, click the upper side “add new” button.  Now you are all ready to create your own contact form.

Here is an example of what I did. If you want to add another label, you can do it by clicking each button that shows the item you want to add.

I also put <br>, </br> tag to make space between each item.

The great option for this plug-in is that you can add label for file attachment. This is really awesome. Also, you can fix the limit of file sizes and types. After I selected file types as JPG, JPEG, PNG and PDF, I added comments about it to reduce confusion to customers.

The next tab is “Mail” tab. This is the detail that took me the longest time to figure out.

In this tab, you can create the form on how to receive results submitted by email. At first when I tried it, I failed in making it functional, and the result was that I just received name of the potential client and their email. Suddenly, I recognized that their items were being used when contact form is created! How kind it is!

What you need to do is just copy and paste those items to each part where you want to put in the mail.

There’s another tab for messages you can change. It already had the message as a default, I had no need to touch it. Finally, I was done!

There’s a short code for each contact form you created. You can find it on a list page and each form page. Copy that code and paste it to the contents page wherever you would like to add it!

Finally, the contact form is ready! Don’t forget to test it before closing WordPress. If you have a problem with this plug-in, you can search the solution in the plug-in support sites (https://wordpress.org/support/plugin/contact-form-7/) and also, there are a lot of videos that can be found in Youtube to help solve any issues that may arise.

This challenging new plug-in makes our client’s website more beautiful! Don’t be afraid about to work with this new plug-in.  Just download, activate and figure out!