Contact Form 7 Tips [Beginner to Advanced]

Tagged: contact form 7

This topic has 1 reply, 1 voice, and was last updated 12 years, 11 months ago by admin.

Viewing 1 reply thread

Author

Posts

January 1, 2012 at 12:16 pm #133

admin

Keymaster

Contact Form 7 Drag and Drop Files Upload

Filedrop addon will help you to enable drag and drop files upload functionality. JavaScript will handle errors.

Download URL: https://ciphercoin.com/downloads/filedrop-contact-form-7/

Contact form 7 code generator

Just go to https://cf7.ciphercoin.com
and paste your html form code it will convert to cf7 shortcode.

Contact form 7 checkbox value in email

Add checkbox name shortcode to mail section message body.
Example cf7 shortcode [checkbox checkbox-403] the n we want add [checkbox-403] in message body.

Contact form 7 autoresponder hook

// ...in functions.php
add_action('wpcf7_mail_sent', function ($cf7) {
// Run code after the email has been sent
$wpcf7 = WPCF7_ContactForm::get_current();
$submission = WPCF7_Submission::get_instance();
//Below statement will return all data submitted by form.
$data = $submission->get_posted_data();
//suppose you have a field which name is 'email' then you can access it by using following statement.
$to = $data['email'];
$subject = 'The subject';
$body = 'The email body content';
$headers = array('Content-Type: text/html; charset=UTF-8');
wp_mail( $to, $subject, $message, '', array( '' ) );

});

// ...in functions.php

add_action('wpcf7_mail_sent', function ($cf7) {

// Run code after the email has been sent

$wpcf7 = WPCF7_ContactForm::get_current();

$submission = WPCF7_Submission::get_instance();

//Below statement will return all data submitted by form.

$data = $submission->get_posted_data();

//suppose you have a field which name is 'email' then you can access it by using following statement.

$to = $data['email'];

$subject = 'The subject';

$body = 'The email body content';

$headers = array('Content-Type: text/html; charset=UTF-8');

wp_mail( $to, $subject, $message, '', array( '' ) );

});

January 1, 2020 at 6:51 am #101

admin

Keymaster

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 );
   } 
}

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;
});

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>

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!');
});

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 );

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.

Please share this content on social media.

Author

Posts