Contact form 7 telephone number validation

Contact Form 7

Contact Form 7 (CF7) is a popular WordPress plugin used to create contact forms. To validate telephone numbers in Contact Form 7, you can use custom validation patterns. Here’s a step-by-step guide to validate a telephone number in Contact Form 7:

Step 1: Install and Activate Contact Form 7

Ensure that you have installed and activated the Contact Form 7 plugin on your WordPress site.

Step 2: Add a Telephone Number Field

Edit the form where you want to add the telephone number field. Add a telephone number input field using the following shortcode:

[tel* your-phone] 
OR
[number* your-telephone minlength:10 maxlength:20 placeholder "Telephone number"]

The * denotes that this field is required.

Step 3: Custom Validation (Optional)

If you want to add custom validation for the telephone number field, you can use the following steps.

Using Additional Settings

You can add custom JavaScript validation in the “Additional Settings” section of the form editor.

1. Go to the Contact Form 7 editor.
2. Scroll down to the “Additional Settings” section.
3. Add the following JavaScript code to validate the telephone number field:

document.addEventListener( 'wpcf7submit', function( event ) {
var phoneField = document.querySelector('input[name="your-phone"]');
var phoneValue = phoneField.value;
var phonePattern = /^[0-9\-\(\)\/\+\s]*$/;

if (!phonePattern.test(phoneValue)) {
alert('Please enter a valid telephone number.');
event.preventDefault();
}
}, false );

This script checks if the telephone number contains only numbers, dashes, parentheses, slashes, plus signs, and spaces.

Using CF7 Validation Filter Hook

For more advanced validation, you can use the wpcf7_validate_tel filter hook. Add the following code to your theme’s functions.php file:

function custom_tel_validation_filter( $result, $tag ) {
$tag = new WPCF7_FormTag( $tag );
$name = $tag->name;

if ( 'your-phone' == $name ) {
$phone = isset( $_POST[$name] ) ? trim( $_POST[$name] ) : '';

if ( ! preg_match( '/^[0-9\-\(\)\/\+\s]*$/', $phone ) ) {
$result->invalidate( $tag, 'Please enter a valid telephone number.' );
}
}

return $result;
}
add_filter( 'wpcf7_validate_tel', 'custom_tel_validation_filter', 20, 2 );
add_filter( 'wpcf7_validate_tel*', 'custom_tel_validation_filter', 20, 2 );

This code validates the telephone number to ensure it matches the pattern specified.

Step 4: Save and Test

Save the changes and test the form to ensure that the telephone number validation is working correctly.

By following these steps, you can effectively validate telephone numbers in your Contact Form 7 forms.

Basic Contact Form: This is a simple form with name, email, subject, and message fields.

[text* your-name placeholder "Your Name"]
[email* your-email placeholder "Your Email"]
[text your-subject placeholder "Subject"]
[textarea your-message placeholder "Your Message"]
[submit "Send"]

Full Example: If you want to add more fields like phone number and an acceptance checkbox:

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

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

<label> Subject
[text your-subject] </label>

<label> Your Message
[textarea your-message] </label>

<label> Your Phone Number
[tel your-phone] </label>

<label> [checkbox* acceptance] I accept the terms and conditions </label>

[submit "Send"]

With CAPTCHA and File Upload: This includes a file upload field and a reCAPTCHA:

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

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

<label> Subject
[text your-subject] </label>

<label> Your Message
[textarea your-message] </label>

<label> Upload a File
[file your-file] </label>

[recaptcha]
[submit "Send"]

How to Use

1. Copy the shortcode you need.
2. Go to your WordPress dashboard.
3. Navigate to Contact > Add New.
4. Paste the shortcode into the form editor.
5. Save the form.
6. Copy the generated shortcode and paste it into any page or post where you want the form to appear.

This will create a functional contact form on your website. You can customize the fields and labels as needed.