My Contact Form 7 Tips & Hack

Contact Form 7 is my preferred contact form in most site, It’s free, light weight, and easy to use. It’s full of awesomeness.

Here are several tips for Contact Form 7 user that I use regularly.

#1. Use Akismet to protect from Spam.

Lately I prefer using reCAPTCHA for most site, because the new “single check box” thing is awesome.

However, if a client don’t want captcha, the best way to fight Spam is by using Akismet in Contact Form 7.

Here’s how to integrate Akismet in CF7:

1. Activate and set akismet (with WP.com API key)
2. Add akismet options in your CF7 input.
3. The inputs you need to modify is “name”, “email”, and “website”.

CF7 will send “name”, “email”, and “website” to akismet server and akismet will check it in their database/algorithm and tell CF7 if it’s a spam/not.

Here is example of Contact Form 7 configuration using Akismet integration:

<p><strong>Your Name</strong> (required)<br />
    [text* your-name akismet:author]</p>

<p><strong>Your Email</strong> (required)<br />
    [email* your-email akismet:author_email]</p>

<p><strong>Your Website</strong><br />
    [url your-website akismet:author_url]</p>

<p><strong>Your Message</strong> (required)<br />
    [textarea* your-message]</p>

<p>[submit "Send Message"]</p>

To learn more, read CF7 docs about Akismet integration:
Spam Filtering with Akismet

#2. Get default data from logged-in user.

If you create membership site, you can auto populate inputs in Contact Form 7 using user data, such as emails, name, etc.

Example of Contact Form 7 configuration using current user data:

<p><strong>Your Name</strong> (required)<br />
    [text* your-name default:user_display_name]</p>

<p><strong>Your Email</strong> (required)<br />
    [email* your-email default:user_email]</p>

<p><strong>Your Website</strong><br />
    [url your-website default:user_url]</p>

<p><strong>Your Message</strong> (required)<br />
    [textarea* your-message]</p>

<p>[submit "Send Message"]</p>

Now your CF7 form will auto populate with user data, so it will be easier for your members to send message to you.

The list of options you can use are:

• default:user_login
  User’s login name
• default:user_email
  User’s email address
• User’s site URL
• default:user_first_name
  User’s first name
• default:user_last_name
  User’s last name
• default:user_nickname
  User’s nickname
• default:user_display_name
  User’s display name

To learn more, read CF7 docs about setting default value using user data:
Setting Default Values to the Logged-In User

#3. Create hidden input.

Contact Form 7 do not support hidden field. But with this hack you can easily create a hidden fields in Contact Form 7.

Simply add your input in a hidden div

Example of hidden field hack for Contact Form 7:
e.g: you want to get logged-in user login name in the form without the user knowing.

<p><strong>Your Name</strong> (required)<br />
    [text* your-name default:user_display_name]</p>

<p><strong>Your Email</strong> (required)<br />
    [email* your-email default:user_email]</p>

<p><strong>Your Website</strong><br />
    [url your-website default:user_url]</p>

<p><strong>Your Message</strong> (required)<br />
    [textarea* your-message]</p>

<p>[submit "Send Message"]</p>

<div style="display:none">
[text user-login default:user_login]
</div>

#4. Auto populate from URL query parameter ($_GET).

Sometimes we want to simply send a link (maybe via email) to our contact form page and it will dynamically auto populate input depend on our URL.

For example, I want to ask my theme user with a link to my contact form, but the form will also auto populate the subject input with the “theme name”, so it will be easier for them to input the data.

http://site.com/contact/?cf_subject=Theme+Name

So, If I need to send the link to another person using another theme, I simply change the URL parameter:

http://site.com/contact/?cf_subject=Another+Theme

To do this, you need to enqueue js script in your contact form 7 page.

This is the example form configuration:

<p><strong>Your Name</strong> (required)<br />
    [text* your-name]</p>

<p><strong>Your Email</strong> (required)<br />
    [email* your-email]</p>

<p><strong>About?</strong><br />
    [url your-subject id:your-subject]</p>

<p><strong>Your Message</strong> (required)<br />
    [textarea* your-message]</p>

<p>[submit "Send Message"]</p>

This is the example JS (jQuery) script to auto populate subject field:

jQuery( document ).ready( function($) {

    /**
     * Get URL Param
     * @link http://stackoverflow.com/questions/19491336
     */
    var getUrlParameter = function getUrlParameter(sParam) {
        var sPageURL = decodeURIComponent(window.location.search.substring(1)),
            sURLVariables = sPageURL.split('&'),
            sParameterName,
            i;
        for (i = 0; i < sURLVariables.length; i++) {
            sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] === sParam) {
                return sParameterName[1] === undefined ? true : sParameterName[1].replace(/\+/g, " ");
            }
        }
    };

    /* Add value */
    $( '#your-subject' ).val( getUrlParameter( 'cf_subject' ) );

});

Pretty neat right? What’s your CF7 hack?