Contact Form 7 Tips [Beginner to Advanced] | [ Updated in 2020]

Contact Form 7

Best tips for contact form 7. It will speed up your WordPress development. CF7 can manage multiple contact forms and customize based on your needs.  CF7 Ajax-powered submitting is available. It is a most used contact form in WordPress. Easy to use and highly customizable contact form.  

How do I create a contact form form contact 7 in WordPress?

• Login to wp-admin and go to  plugins > add new plugin
• Search "contact form 7" then click install and activate it.
• Go to Contact  (left sidebar) and click add new.

• Save or update the form  and copy shortcode then paste shortcode to your page

 

How do I add Captcha to contact form 7?

• Go to contact > Integration 

 

• Click on setup integration 
• Then go to google.com/recaptcha  admin console  and click on create button (plus '+' symbol top right)
• Copy site and secret key to CF7 integration page.
• Finished, Please check your CF7 form in your website.

 

Save submitted data to the database

We can use a CFDB7 addon to save submissions to the database. It is the best plugin to save data to the database. No need to configure. Just upload to your WordPress wp-admin plugins and activate it. It is 100% free plugin. More add-ons are available. Download now: https://wordpress.org/plugins/contact-form-cfdb7/

Get posted data before sending email

We can use the hookwpcf7_before_send_mail.

add_action("wpcf7_before_send_mail", "wpcf7_do_something_else");  
function wpcf7_do_something_else( $cf7 ) {
     $submission = WPCF7_Submission::get_instance();

   if ( $submission ) {
      $posted_data = $submission->get_posted_data();
     var_dump( $posted_data );
   } 
}

Disable mail function in CF7 forms:-

Skip mail function using a filterwpcf7_skip_mail.

add_filter( 'wpcf7_skip_mail', function( $skip_mail, $contact_form ) {
    return  true;
});

Mail not sending

You should check the "from" field is your website email address. Commonly some server is disabling PHP mail function. So we can use SMTP mailer class. It will reduce spam problem also. Install SMTP plugin https://wordpress.org/plugins/wp-mail-smtp/ and configure with your email SMTP authentication.

Redirect after submission

Method 1 We can use wpcf7mailsent DOM event. Copy and paste following code to footer.php in your theme or paste to js file and call that js. window.location.href will redirect to thankyou page.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    window.location.href = 'thankyou';
}, false );
</script>

Method 2 Add following code in CF7 additional settings configuration page. on_sent_ok: "document.location='/thank-you-page/';"

CF7 javascript events

jQuery(document).on('spam.wpcf7', function () {
    alert('submit.wpcf7 was triggered!');
});

jQuery(document).on('invalid.wpcf7', function () {
    alert('invalid.wpcf7 was triggered!');
});

jQuery(document).on('mailsent.wpcf7', function () {
    alert('mailsent.wpcf7 was triggered!');
});

jQuery(document).on('mailfailed.wpcf7', function () {
    alert('mailfailed.wpcf7 was triggered!');
});

How to use Contact Form 7 in my own HTML?

HTML to CF7 converter is available. http://cf7.ciphercoin.com Just copy and paste your HTML code it will convert to CF7 code. After that, We can use generated cf7 code for your contact form.

Custom validation to check business email and phone number

Add the following code to your theme functions.php file.

function is_company_email($email){ // Check against list of common public email providers & return true if the email provided *doesn't* match one of them
            if(
                    preg_match('/@gmail.com/i', $email) ||
                    preg_match('/@hotmail.com/i', $email) ||
                    preg_match('/@live.com/i', $email) ||
                    preg_match('/@msn.com/i', $email) ||
                    preg_match('/@aol.com/i', $email) ||
                    preg_match('/@yahoo.com/i', $email) ||
                    preg_match('/@inbox.com/i', $email) ||
                    preg_match('/@gmx.com/i', $email) ||
                    preg_match('/@me.com/i', $email)
            ){
                    return false; // It's a publicly available email address
            }else{
                    return true; // It's probably a company email address
            }
    }
    function custom_wpcf7_text_validation_filter($result, $tag){
            $type = $tag['type'];
            $name = $tag['name'];
                    $the_value = $_POST[$name];
                    if(!is_company_email($the_value)){ // Isn't a company email address (it matched the list of free email providers)  
                          $result->invalidate( $tag, wpcf7_get_message( 'invalid_email' ) );
                    
            }
            return $result;
    }
   add_filter( 'wpcf7_validate_email', 'custom_wpcf7_text_validation_filter', 10, 2 );
add_filter( 'wpcf7_validate_email*', 'custom_wpcf7_text_validation_filter', 10, 2 );

How to use conditional fields?

We can use the Conditional Fields plugin. Implement conditional login by "Conditional fields Group" additional tag.   Login and start discussion Please share this content on social media.