How to make mobile number validation in Contact Form 7
In today's digital landscape, having a well-functioning contact form on your website is crucial for effective communication with your customers or clients. One common challenge that website owners face is ensuring that the phone numbers submitted through the contact form are valid and in the right format. This is where the Contact Form 7 plugin can come in handy, allowing you to easily implement custom validation rules for your contact form fields.
In this blog post, we'll walk you through the steps to add mobile number validation in Contact Form 7 using a custom validation filter. By the end of this article, you'll be able to ensure that your contact form only accepts valid 10-digit phone numbers, providing a seamless user experience for your website visitors.
Understanding the Problem
When users submit a contact form on your website, you want to make sure that the phone number they provide is in the correct format and contains the required number of digits. This is important for several reasons:
-
Data Accuracy: Validating the phone number format helps ensure that the contact information you collect is accurate and can be used effectively for follow-up or customer support.
-
User Experience: Implementing phone number validation in your contact form enhances the overall user experience by providing clear feedback when a user enters an invalid phone number, allowing them to correct it quickly.
-
Data Integrity: Proper phone number validation can help prevent the submission of incorrect or malicious data, protecting the integrity of your website and your customer database.
The Solution: Custom Validation Filter in Contact Form 7
Contact Form 7 is a popular WordPress plugin that allows you to create and customize contact forms on your website. One of the key features of this plugin is the ability to add custom validation rules to your form fields, including phone numbers.
Let's dive into the steps to implement mobile number validation in your Contact Form 7 forms:
-
Add the Validation Filter in your functions.php file:
In your WordPress theme's functions.php
file, add the following code:
function custom_contact_validation_filter($result, $tag) {
// 'contact': is the name of the tag in your contact form
if ('contact' == $tag->name) {
$re_format = '/^[0-9]{10}+$/';
$your_contact = $_POST['contact'];
if (!preg_match($re_format, $your_contact, $matches)) {
$result->invalidate($tag, "Enter 10 digits only");
}
}
return $result;
}
add_filter('wpcf7_validate_text*', 'custom_contact_validation_filter', 10, 2);
add_filter('wpcf7_validate_text', 'custom_contact_validation_filter', 10, 2);
Here's a breakdown of the code:
- The
custom_contact_validation_filter()
function is where we define our custom validation logic.
- Inside the function, we check if the current field being validated is the "contact" field (the name of the field in your contact form).
- We then use a regular expression (
/^[0-9]{10}+$/
) to check if the phone number entered is exactly 10 digits long and contains only numerical characters.
- If the phone number does not match the required format, we add an error message to the
$result
object using the $result->invalidate()
method.
- Finally, we add the custom validation filter to the
wpcf7_validate_text*
and wpcf7_validate_text
hooks, which are used by Contact Form 7 to validate text-based form fields.
-
Update your Contact Form 7 Form:
In your Contact Form 7 form, make sure that the field you want to validate is named "contact". This is the field name that the custom validation filter is looking for.
Here's an example of what your contact form markup might look like:
[text* contact placeholder "Enter your phone number"]
The *
after text
indicates that this is a required field, and the name="contact"
attribute matches the field name used in the validation filter.
-
Test the Validation:
Save your changes and test the contact form on your website. Try entering different phone number formats, including valid and invalid ones, to ensure that the custom validation is working as expected.
When a user enters an invalid phone number, they should see an error message that says "Enter 10 digits only".
Enhancing the Validation
While the basic phone number validation we've implemented so far is a good start, you may want to consider adding additional validation rules or features to further improve the user experience and data quality. Here are a few ideas:
-
Country-specific Formatting: If your website caters to users from different countries, you may want to implement country-specific phone number formats. This can be done by modifying the regular expression used in the validation filter.
-
Error Messages: You can customize the error message displayed to the user when they enter an invalid phone number. This can help provide more specific and helpful feedback.
-
Client-side Validation: In addition to server-side validation, you can also implement client-side validation using JavaScript. This can provide immediate feedback to the user as they type, improving the overall user experience.
-
Database Integration: If you're collecting phone numbers for your customer database, you may want to consider integrating the validation logic directly into your database operations to ensure data integrity.
By following the steps outlined in this blog post and considering these additional enhancements, you can effectively implement mobile number validation in your Contact Form 7 forms, ensuring that the contact information you collect is accurate and reliable.
Remember, a well-designed and validated contact form can significantly improve the user experience on your website, leading to higher engagement, better customer support, and ultimately, increased conversions.
If you'd like to learn more about how Flowpoint.ai can help you identify and fix technical issues that impact your website's conversion rates, be sure to check out our website
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.