Contact Form 7 is a popular WordPress plugin that allows you to create and manage contact forms easily. One common requirement in contact forms is to restrict certain fields, such as the customer’s mobile number, to accept only numerical input. In this tutorial, we will guide you through the process of implementing this restriction using Contact Form 7 and a simple script.
By simply following these outlined steps, you can easily restrict to Numbers only for your CF7 input field.
Step 1: Install and Set Up Contact Form 7 First, make sure you have Contact Form 7 installed and activated on your WordPress website. If not, you can find and install it from the WordPress plugin repository. Once activated, go to the Contact Form 7 settings and create a new form or edit an existing one to include the mobile number field.
Step 2: Add the Mobile Number Field To add the mobile number field to your form, use the following shortcode within the Contact Form 7 editor:
<label>Your Awesome Number
[text* your-number class:wpcf7-numbers-only minlength:1 maxlength:10 placeholder "Numbers only"]
[count your-number]
</label>
This shortcode creates a text input field with the class .wpcf7-numbers-only, which we will use to target the field in the script. It also sets a minimum length of 1 and a maximum length of 10 for the mobile number. Feel free to adjust these values based on your requirements.
Step 3: Add the JavaScript Validation Script To enforce the numbers-only restriction on the mobile number field, we need to add a JavaScript script to the footer of our website. Open your theme’s functions.php file and add the following code:
/**
* CF7: Numbers Only Validation
* Validate the input fields with CSS class .wpcf7-numbers-only to allow numbers only.
*/
add_action( 'wp_footer', 'wpcf7_input_numbers_only');
function wpcf7_input_numbers_only() {
echo '
<script>
window.onload = function() {
var ele = document.querySelectorAll(\'.wpcf7-numbers-only\')[0];
ele.onkeypress = function(e) {
if (isNaN(this.value + "" + String.fromCharCode(e.charCode)))
return false;
}
ele.onpaste = function(e) {
e.preventDefault();
}
}
</script>
';
}
This script selects the first element with the class .wpcf7-numbers-only and attaches event listeners to it. The onkeypress event ensures that only numerical characters are accepted as the user types, while the onpaste event prevents pasting non-numeric values into the field.
Step 4: Save Changes and Test Save your changes to the functions.php file and refresh the page with your contact form. The mobile number field should now only allow numerical input. If a user tries to enter any non-numeric characters, the input will be rejected.
By following the steps outlined in this article, you can easily restrict the input in your Contact Form 7 mobile number field to accept only numerical values. This helps ensure that you collect accurate and valid data from your customers. Feel free to customize the code to suit your specific needs or apply this restriction to other input fields as required.