How to limit phone number entry to "half-width numbers only" in Contact Form 7

2024.11.07

pipeline

Contact Form 7 is a popular email form plugin for WordPress that is used by many websites not only in Japan but also in Japan.

However, the standard function does not allow detailed validation, such as "limit phone number input to only half-width numbers".

In this article, we'll show you how to limit phone number fields to only half-width characters.

In particular, we will focus on how to respond directly to the functions.php, and explain the points that are useful from the perspective of web production companies.

Contents

1 Why should you limit phone number entry to only half-width numbers?
2 Implementation Method:functions.php add JavaScript to
3 Code Explanation
4 Notes
5 points
6 Conclusion

Contents

1 Why should you limit phone number input to only half-width numbers?
2 how to implement JavaScript:functions.php add JavaScript
3 Explanation of code
4 Notes
5 points
6 summary

Why should you limit phone number input to only half-width numbers?

It's not uncommon for users to enter phone number forms in the wrong format.

For example, entering full-width numbers or hyphens can lead to data inconsistency and impact subsequent processing and database management.

Especially for corporate sites where data is exchanged between multiple operations and systems, it is important to uniformly format phone numbers.

In these cases, enforcing "only half-width numbers" at the input stage can help maintain data quality and prevent mistakes.

how to implement JavaScript:functions.php add JavaScript

Contact Form 7 has limited support for custom attributes, so the limitations in the pattern attribute may not be reflected.

For this reason, add JavaScript to the functions.php file so that no more than half-width numbers can be entered in the phone number field.

Here's the specific implementation code:

function restrict_tel_input_to_numbers() {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
Select the tel field in the form
const telField = document.querySelector('input[name="tel"]');
if (telField) {
telField.addEventListener('input', function () {
Remove non-half-width numbers
this.value = this.value.replace(/[^0-9]/g, '');
});
}
});
</script>
<?php
}
add_action('wp_footer', 'restrict_tel_input_to_numbers');

Explanation of code

This code utilizes WordPress wp_footer hooks to inject JavaScript into the footer of the page. Below are the key points of each part.

add_action('wp_footer', 'restrict_tel_input_to_numbers'); : In this line, you specify that restrict_tel_input_to_numbers function should be added to the footer of the page.
By adding a script to the footer, the script will run after the page loads, and the input limit will be enabled when the user accesses the form.

telField.addEventListener('input', function () {...}); :tel for an input field that forces "only half-width numbers" every time the user enters it.

this.value.replace(/[^0-9]/g, ''); : Use a regular expression to remove all characters except for half-width numbers from 0 to 9.
This ensures that if a user mistakenly enters a full-width number or other symbol, it will be automatically removed.

Notes

Contact Form 7 Shortcode: This code is available by simply setting the shortcode [text* tel 20] in the phone number field.
There is no need to specify pattern attributes or tel type fields, and it simply needs to be set as a "name" and "character limit".

Write your theme functions.php: This time we'll write the code directly to your WordPress theme's functions.php files.
To prevent them from being overwritten when the theme is updated, we recommend using a child theme or taking a backup during maintenance.

points

These granular user experience (UX) improvements directly translate into reliable foam design.
Especially for companies, e-commerce sites, and BtoB service sites, preventing input errors will lead to improved service to users, and as a result, will lead to higher evaluations from clients.

Additionally, writing directly on the functions.php avoids performance degradation caused by installing additional plugins, making it a recommended simple and lightweight solution.

summary

As a

way to limit phone number input to "half-width numbers only" in Contact Form 7, we introduced the implementation by adding JavaScript to the functions.php.

This technique is simple yet effective, ensuring data accuracy and contributing to a better user experience.

Why not

meet the needs of form filling restrictions to achieve higher quality service delivery?

pipeline