How to prevent text from phone number field gravity forms

/ WordPress, JavaScript, PHP / By /

To prevent users from entering text into a phone number field in Gravity Forms while using international phone format, you can utilize JavaScript to validate the input. Here’s a basic example of how you can achieve this (prevent text from phone number field gravity forms).

jQuery(document).ready(function($) {
// Replace 'input_1_3' with the ID of your phone number field
$('#input_1_3').on('input', function() {
// Remove any non-numeric characters
var phoneNumber = $(this).val().replace(/\D/g,'');
// Update the field value
$(this).val(phoneNumber);
});
});

This script listens for input in the phone number field and removes any non-numeric characters as they are typed. Therefore, even if a user tries to input text, it will automatically be removed, allowing only numeric characters.

Make sure to replace ‘input_1_3’ with the actual ID of your phone number field. You can find this ID by inspecting the phone number field on your form in the browser developer tools.

You can add this script to your Gravity Forms form by adding it to your theme’s JavaScript file or by using a plugin like “Scripts n Styles.” Alternatively, you can add it directly to the footer of your website within a <script> tag if your theme allows it.

Remember to enqueue the script properly if you are adding it to your theme’s JavaScript file.

You can also add the JavaScript code to the footer of your WordPress site using a custom function in your theme’s functions.php file. Here’s how you can do it:

<?php
function add_custom_script_to_footer() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Replace 'input_1_3' with the ID of your phone number field
$('#input_1_3').on('input', function() {
// Remove any non-numeric characters
var phoneNumber = $(this).val().replace(/\D/g,'');
// Update the field value
$(this).val(phoneNumber);
});
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script_to_footer'); ?>

This code adds the provided JavaScript to the footer of your WordPress site. Make sure to replace 'input_1_3' with the actual ID of your phone number field.

Simply add this code snippet to your theme’s functions.php file, and the script will be added to the footer of your site on all pages. This way, the phone number field validation will be applied site-wide.

 

Make the script above to work on all forms instead of just one gravity form with phone number field.

If you want the script to work on all Gravity Forms across your WordPress site, you can modify the script to target all input fields with the type “tel” (which is typically used for phone numbers). Here’s how you can do it:


<?php

function add_custom_script_to_footer() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Target all input fields with type 'tel' within Gravity Forms
$('input[type="tel"]').on('input', function() {
// Remove any non-numeric characters
var phoneNumber = $(this).val().replace(/\D/g,'');
// Update the field value
$(this).val(phoneNumber);
});
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script_to_footer'); ?>

This modification targets all input fields with the type “tel” within Gravity Forms, regardless of the form or the field ID. It applies the same functionality of removing non-numeric characters from the input.

Add this modified code snippet to your theme’s functions.php file, and it will apply the script to all phone number fields in Gravity Forms across your WordPress site.

Related Posts