Today I’m going to tell you how to make your feedback forms better showing you the example of phone input mask. Let’s see how to use it in different projects.
The first way is to connect the mask to the contact form in pure HTML.
The second way is to create a phone input mask for Contact Form 7. By the way we’re going to consider the right scripts connecting with the functions.php file on WordPress.com.
Contents
- Phone input mask for an HTML+JS form
- Phone input mask for Contact Form 7 WordPress plugin
- Files to download
Let’s what are we talking about:
You can only enter numbers in this field and their quantity is limited by the mask.
Let’s begin! In both cases you need to followthis link to download jQuery Masked Input plugin files from the official repository. I also give you a link to plugin documents on GitHub.
Phone input mask for HTML+JS form
1. Create a simple form
|
1 2 3 4 5 6 7 |
<form> <div id="form-inner"> <label for="name">Your phone number</label> <input type="text" id="phone" placeholder="+1 (XX) XXX-XX-XX"> <input type="submit" class="button" value="Send"> </div> </form> |
2. Check the jQuery library connection
Check the jQuery library connection between <head> tags. In order to do it press Ctrl+U on your site page. You can see the page code. Now use Ctrl+F command to check if the jQuery script is connected. You can use such phrases as “jquery.js” or “jquery.min.js” You can see the example on the screenshot below.
It can be connected either to the folder with scripts on your site or to CDN Google or any other: Microsoft, CDNJS, jsDelivrО. You can find all the ways of connection following the link. If your library is not connected, you need to correct it, otherwise the mask won’t work.
I am used to use CDN Google to connect my libraries. In order to connect the jQuery library copy the code below and insert it between <head> tags of your site.
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
3. Connect the plugin scripts
After we ensured that jQuery library is connected unzip the downloaded archive with “jQuery Masked Input” plugin. Find the “dist” folder in the unzipped archive and take the “jquery.maskedinput.min.js” minimized file. I often put this file to the root folder of the site together with all the “JS” scripts, and connect it between <head> tags:
|
1 |
<script src="https://my-domain.com/js/jquery.maskedinput.min.js"></script> |
Then we need to make the call of the mask and bind it to the unique identificator.We can do by adding the unique class and id to input field. In our example we type id phone. The you need just to insert the code below before the form.
|
1 |
<script type="text/javascript">jQuery(function($){$("#phone").mask("+1 (99) 999-99-99");});</script> |
In order not to insert the script code before every form create a single .js file, maskphone.js for example, insert the code below there and save in the “js” folder in the root of the site.
|
1 |
jQuery(document).ready(function() {jQuery("#phone").mask("+1 (99) 999-99-99");}); |
Now you need to connect this file between <head> tags.Copy the code below and insert it just after the code of plugin jquery.maskedinput.min.js connection. As the result you should have this:
|
1 2 |
<script src="https://my-domain.com/js/jquery.maskedinput.min.js"></script> <script src="https://my-domain.com/js/maskphone.js"></script> |
4. Choose in what form and in what field will the plugin work.
All we need to do in order to identify the field? is to point the class or id in the needed input field. The example is on the image. In fact you need to use only one thing.
In the example I gave you I used id — the unique name of the element.In this case if you have got several similar forms on one page, the phone input form won’t work, as the id can be repeated only once on one page. So if on your page one form is called several times, you need to point the unique class in the input field.
Example:
|
1 |
<input class="phone" type="text" placeholder="+1 (XX) XXX-XX-XX" /> |
In order to activate the script you need to change the class code in maskphone.js to the following:
|
1 |
jQuery(document).ready(function() {jQuery(".phone").mask("+1 (99) 999-99-99");}); |
Done with it, now let’s consider how to do the same thing with one of the most popular CMS WordPress and the additional Contact Form 7 plugin.
Phone input mask for Contact Form 7 WordPress plugin
1. Download the archive with “jQuery Masked Input” plugin file following the link
Create the “js” folder in the folder of your theme (way: your-site/wp-content/themes/your-theme/). Inside of the plugin “jQuery Masked Input” archive find the folder «dist» and copy the minimized «jquery.maskedinput.min.js» file. Insert this file into the “js” folder, that we have just created.
2. Create a form for Contact Form 7
For example a simple form with one field, which we are going to work with. And point “class:phone”. The script realizes that it need to add the mask to this field with the help of this “class”.
Here’re the codes if you need:
|
1 2 3 |
[text* your-phone class:phone placeholder "Your phone"] [submit class:button primary "Send"] |
3. Create the script with the mask
In the directory my-doain.com/wp-content/themes/your-theme/js/ create “maskphone.js” file and insert the code:
|
1 2 3 |
jQuery(document).ready(function() { jQuery(".phone").mask("+1 (99) 999-99-99"); }); |
In this case we use the field id by ‘class’. Read about the difference in the first pat of the article.
4. Now we connect the scripts
The easiest way to connect the scripts. You open header.php or footer.php file, which are placed at the adress: you-site/wp-content/themes/your-theme/ and insert the code:
|
1 2 |
<script src="https://my-domain.com/wp-content/themes/your-theme/js/jquery.maskedinput.min.js"></script> <script src="https://my-domain.com/wp-content/themes/your-theme/js/maskphone.js"></script> |
But it’s not the best one when you work with WordPress. For example if you want to update the theme, the third-party code can be deleted. So you’d better connect the scripts with the help of functions.php file.
4.1 Connect the scripts with functions.php file
It’s the only way I use to connect my scripts and css files. It’s really convenient. Making a lot of projects I use one piece of code and a folder with files, I add them for you to download. So you open the functions.php file and insert the code below between <php> tags.
|
1 2 3 4 5 6 7 8 9 |
function wpb_add_scripts() { wp_register_script('jquery.maskedinput.min.js', get_stylesheet_directory_uri(). '/js/jquery.maskedinput.min.js', '', '', true); wp_enqueue_script('jquery.maskedinput.min.js'); wp_register_script('maskphone.js', get_stylesheet_directory_uri(). '/js/maskphone.js', '', '', true); wp_enqueue_script('maskphone.js'); } add_action('wp_enqueue_scripts', 'wpb_add_scripts'); |
It mst be admitted that the code above is appropriate for a subsidiary theme. If you don’t use one, you’d better use use this code:
|
1 2 3 4 5 6 7 8 9 |
function wpb_add_scripts() { wp_register_script('jquery.maskedinput.min.js', get_template_directory_uri(). '/js/jquery.maskedinput.min.js', '', '', true); wp_enqueue_script('jquery.maskedinput.min.js'); wp_register_script('maskphone.js', get_template_directory_uri(). '/js/maskphone.js', '', '', true); wp_enqueue_script('maskphone.js'); } add_action('wp_enqueue_scripts', 'wpb_add_scripts'); |
To sum up I’d like to say that you can create other input mask with the help of these methods, but I’ll tell you about it next time.
This should be linked to from igorescobar’s jQuery Mask Plugin pages !!
I was puzzled how to tie in his JS (or any JS or any mask or any data) to the forms themselves, since the plugin’s field tags only allow for class and id.
Unlike plain HTML forms, the CF7 plugin uses tags, which does not allow data fields, mask fields, or javascript.
I’m sure MANY people have looked looked at masks and been puzzled about how they could add them to CF7.
I already resorted to using an additional plugin (https://wordpress.org/plugins/masks-form-fields/) which makes jQuery Mask Plugin ready to use on Contact Form 7 forms by just adding the appropriate class.
Your tutorial and solution is so much better! Insightful. 🙂 And extendable.
Thanks!
Hello. THere is a way to create input = number instead of “text”?
Thanks