Contact Form 7 Examples and Templates

Contact Form 7 Examples

All of the code is free to use but I would really appreciate it if you mention me when using them! If you have any questions about the following forms please feel free to ask anything in the comments section where I will try and answer them as soon as possible.

Suggestion Form

This is a simple-looking form that you can be used for things like a suggestion form or a feedback form. Its very simple to replicate and you can edit it as much as you like. I have used a form like this for some of my clients such as forum website where they needed to gather feedback from the users on how to improve the website.

Feel free to try out the form, its all fully working. Just like all other contact forms you can change the look and feel of this using CSS.

Here’s the code below:

<label> Name [text* Name placeholder "John Smith"] </label>
<label> Email [email* Email "john@smith.com"] </label>
<label> Suggestions [checkbox* Suggestion label_first "Option 1" "Option 2" "Option 3"] </label>
<label> Subject [text* Subject placeholder "HR"] </label>
<label> Message [textarea* Message "Info"][file* SupportingDocument limit:999] </label>

[submit "Send"]

It’s as simple as that! Simply copy and paste this code into the Contact Form 7 text area when making the form and you will get the same results.

Job Application form Contact Form 7 Example

This is a simple contact form 7 example but it’s a good way to show how the file upload functionality works. In this form the file type has been selected, you need to make sure you type in and spell the file types correctly otherwise this form won’t work.

It’s also important to note that the limit is in Bytes, meaning you will need to calculate this depending on what your website allows. In this example, the max file type is around 2mb.

You can see the code below:

<label>Your Name (required)</label>
[text* your-name]

<label>Your Email (required)</label>
[email* your-email]

<label>Phone Number (required)</label>
[tel* tel-956]

<label>Position Applying For (required)</label>
[text* position]

<label>Upload Your Resume (PDF, DOC, DOCX or TXT format only, max size 2MB)</label>
[file* file-316 limit:2097152 filetypes:pdf|doc|docx|txt]

<label>Why are you a good fit for this position? (required)</label>
[textarea* your-message]

[submit "Submit Application"]

More Complex Contact Form | Contact Form 7 Quiz

This is a great example of how you can do more with contact form 7. You can make a quiz for your viewers very easily. You can use this for gathering feedback, a competition or anything else you like. This could also be a way of recognising if someone who is submitting the form is a human and not a robot.

After you have submitted your answer you can just press enter and it will move onto the next question. I have seen this used for things like math tests and a way to see if a user has properly understood a tutorial. This is a great feature of Contact Form 7 and I don’t see many people using it!

The code is below:

<label> Name [text* Name placeholder "Name"] </label>

<label> Enter your answer and press enter
[quiz quiz-math class:quiz "Capital of the UK?|London" "Capital of France?|Paris" "Capital of Spain?|Madrid" "Captial of Italy?|Rome" ] </label>

As you can see its really simple and it’s just a case of adding your own questions to the code. You can add as many questions and answers as you like.

Form Box Example

This next contact form example comes from https://blog.cf7skins.com/free-general-use-template-contact-form-7/ . They show you how you can create a nice looking box area for the contact form. This uses a fieldset to make a box around the text areas. So you can use a similar technique in any contact form.

You can use CSS in this form to make the box a different colour and add a different background which might be useful!

The code is below:

<fieldset>
    <legend>Your Details</legend>
    <ol>
        <li>Name [text text-914]</li>
        <li>Email  [email* email-665]</li>
        <li>Phone [tel tel-931]</li>
        <li>Message [textarea textarea-568]</li>
    </ol>
        [submit "Send"]
    <p>
        * Required
    </p>
</fieldset>
<p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus pharetra vehicula. Aliquam pellentesque mi non scelerisque placerat.
</p>

Although is this fairly simple the “fieldset” function is not always obvious to use. The colour and fonts of this form will depend on your theme setting but you can change them easily by inspecting the form on your browser and then adding CSS.

More Contact Form 7 Examples

Here is another example of a contact form 7 form which allows you to choose a phone. This can be applied to anything, for example, a website deliverables form. Or maybe a car hire requirements form.

Phone *
iPhoneSamsung Galaxyhtc Desire

Color *
blackwhitegrey

Name *

Email *

Preferred payment
VISAMASTERCARDAMEX

Quick delivery (1 day)

Of course, this form doesn’t take payments. But you wanted to there are a number of ways you can do this, for example, using this plugin here.

The code for this contact form is:

<p>Phone *<br /> [select* phone "iPhone" "Samsung Galaxy" "htc Desire"] </p>
 
<p>Color *<br /> [select* color "black" "white" "grey"] </p>
 
<p>Name *<br /> [text* your-name] </p>
 
<p>Email *<br /> [email* your-email] </p>
 
<p>Preferred payment <br /> [radio paymethod "VISA" "MASTERCARD" "AMEX"]</p>
 
<p>[checkbox quickdelivery] Quick delivery (1 day)</p>
 
<p>[submit "Place order"]</p>

Contact Form 7 Code Examples

All of these examples you can copy and paste directly into your contact form 7 plugin. It’s important to make sure that when you got to the mail tab, you set the mail-tags correctly so that all of the fields are coming to you when the email is sent.

Thanks for taking the time to read and possibly use these templates. If you have any issues please get in touch. Contact Form 7 templates and examples can be hard to come by so I thought I would help everyone out and give you what you’re looking for.

Contact form 7 alternatives

If you are willing to change what contact form plugin your using I would highly recommend WPForms they have a huge set of templates as well as so many amazing features that I use all the time for myself and my clients. It also takes away the hassle of doing any form of coding or making new shortcodes. So have a look at WPForms as well!