Hi Dontae,
There are a few ways to achieve this.
Firstly, you can apply regular expressions to the fields. This would require the user input to match your desired formats.
For the credit card field, the RegEx would be:
\d{4}-\d{4}-\d{4}-\d{4}
For the phone number field, the RegEx would be:
\d{3}-\d{3}-\d{4}
Alternatively, you could apply JavaScript masking, which would apply the formatting automatically such that the user does not have to type the dashes.
1. Under the Advanced tab for each field, assign the following CSS classes:
Phone Number Field: phone
Credit Card Field: creditcard
2. Copy & Paste the following JavaSript into the form:
$(document).ready(function () {
$.getScript('http://localhost/Forms/js/jquery.mask.min.js', function () {
$(".phone input").mask("999-999-9999");
});
});
$(document).ready(function () {
$.getScript('http://localhost/Forms/js/jquery.mask.min.js', function () {
$(".creditcard input").mask("9999-9999-9999-9999");
});
});