Here is a simple step by step tutorial on how to setup a WordPress form with file upload, using Contact Form 7.
Step 1 – Installing the plugin
To install the plugin, you must first login to your WordPress Dashboard and locate the “Plugins -> Add New” page.
search for “Contact Form 7”:
To install the contact form 7 plugin, click “Install Now”.
Step 2 – Activating the plugin
Step 3 – Locating the plugin’s settings
After activation, you will now see a new link in your Dashboard navigation:
This is the settings and configuration page for your plugin.
Step 4 – Setting up the form
When you visit the plugn’s settings page, you will see a default form already exists.
We can edit this form and customise it for our purpose. To edit, hover over the form name to see the edit link, and click it:
When editing, you will be met with a page similar to this:
- You can change the form name here.
- This is the shortcode you must copy to add it to your page.
- Using this tool, you can automatically generate tags.
- Here is the area you write code for the frontend form.
The default code for the frontend is:
<p>Your Name (required)<br /> [text* your-name] </p> <p>Your Email (required)<br /> [email* your-email] </p> <p>Subject<br /> [text your-subject] </p> <p>Your Message<br />[textarea your-message] </p> <p>[submit "Send"]</p>
We can see, by default, a name, email, subject and message input are set (along with the submit button).
Take a closer look at one of the inputs:
<p>Your Name (required)<br /> [text* your-name] </p>
To talk you through this code:
1. <p> is a paragraph tag and is a preference for formatting which isn’t required. </p> is the end tag to close this paragraph
2. “Your Name (required)” is the text users see on your form. The “(required)” aspect is only for users to see and doesn’t make the input actually required.
3. <br /> is a line break tag. This creates a new line within the HTML. So the text a user sees and the form input are on two separate lines when live.
4. [text* your-name] is the shortcode for the text input and controls this data. If you want to set a text input, you must start with [text.
The asterix (*) is what makes this input a required value.
“your-name” is the slug/name assigned to this input to differentiate it from other inputs in your form. This value must always be unique.
So, if you want to create a name, email & message inputs, your code would be as follows:
<p>Your Name (required)<br /> [text* your-name] </p> <p>Your Email<br /> [email your-email] </p> <p>Your Message<br />[textarea your-message] </p> <p>[submit "Send"]</p>
You will notice the three different input types used here (text, email & textarea). You will also notice I have written an asterix in the name input.
You can also use the “Generate Tags” tool to automatically create inputs.
To use this, click “Generate Tags” and select your input type from the list:
Step 5 – Setting up file upload input
We now need to setup the file upload input. To start, we need to select “File Upload” from the “Generate” tags list as previously demonstrated above.
After clicking this option, we will see this:
From this, we have several options:
- “Required field?”. If this field is required, click the checkbox.
- “Name”. This is the unique name you wish to give this upload to differentiate it from other inputs. Keeping this the default (in this case, “file-23), is fine.
- “id”. This isn’t a required input. The ID is usually set if you wish to add custom styles or further coding.
- “class”. Once again, this isn’t optional and is usually only set if you wish to add custom styles or further coding.
- “File size limit (bytes)”. Whilst this is optional, you should be setting this value for security reasons. You wish to set a 2mb upload value. You can use kb (kilo byte) or mb (mega byte) suffix optionally. If you omit suffix, the number means bytes. Note that you can’t use a decimal point in it.
You would set “2mb”, like this:
- “Acceptable File Types”. This is optional, but once again, you should be setting this value for security reasons. To set, set the extension of your accepted file types. If you want to allow more than one type, you split them using the | symbol. like this:
jpg | gif
You wish to only allow pdf files. You would set this:
After configuring these settings, you should see generated code like this:
The brown highlighted code is the code you set within the form frontend. The green highlighted code is the code you set within the backend (which I will explain further shortly).
Step 6 – Configuring the form’s backend
If you scroll down the contact form’s settings page, you will see the email/backend options, like this:
There are two things you need to do here:
1. Set your email address. By default, this is the email address setup on your WordPress installation. If the email you want is different, change it here.
2. Configure the email you receive.
By default, this is the email you receive:
From: [your-name] Subject: [your-subject] Message Body: [your-message]
As you can see, this includes some of your inputs but not all of them. It also includes some unused inputs, such as the “subject”.
To configure this, you need to take the names of your inputs previously set. If you look at your frontend code, we can see this:
<p>Your Name (required)<br /> [text* your-name] </p> <p>Your Email<br /> [email your-email] </p> <p>Your Message<br />[textarea your-message] </p> <p>PDF File<br />[file file-23 limit:2mb filtypes:pdf] </p> <p>Anti-Spam<br />[captchac captcha-458]<br />[captchar captcha-458]</p> <p>[submit "Send"]</p>
From the code above, we can see the names of your inputs are: your-name, your-email, your-message, and file-23
The file isn’t sent as part of the message, it’s sent as an attachment. So, we only need to configure the text inputs in this box:
From: [your-name] Message Body: [your-message]
This will now send you the form inputs for name, email and message. To set the attached PDF, you need to set “File attachments”.
Within this box, you should set the name of your file input.
That’s it. Your form now has the frontend and backend email configured. You now need to SAVE your settings
Upon saving, you need to copy the form shortcode we highlighted earlier:
Copy this shortcode and place it inside the page of your choice.