Snippets / JS
Format Phone Number Fields Automatically
document.addEventListener('DOMContentLoaded', function() {
var phoneInputs = document.querySelectorAll('input[type="tel"]');
phoneInputs.forEach(function(input) {
input.addEventListener('input', function(e) {
var input = e.target.value.replace(/\D/g, ''); // Remove all non-numeric characters
var formattedInput = '';
// Format the input as (xxx) xxx-xxxx
if(input.length > 0) {
formattedInput += '(' + input.substring(0, 3);
}
if(input.length >= 3) {
formattedInput += ') ' + input.substring(3, 6);
}
if(input.length >= 6) {
formattedInput += '-' + input.substring(6, 10);
}
e.target.value = formattedInput;
});
});
});document.addEventListener('DOMContentLoaded', function() {
var phoneInputs = document.querySelectorAll('input[type="tel"]');
phoneInputs.forEach(function(input) {
input.addEventListener('input', function(e) {
var input = e.target.value.replace(/\D/g, ''); // Remove all non-numeric characters
var formattedInput = '';
// Format the input as xxx-xxx-xxxx
if(input.length > 0) {
formattedInput += input.substring(0, 3);
}
if(input.length >= 3) {
formattedInput += '-' + input.substring(3, 6);
}
if(input.length >= 6) {
formattedInput += '-' + input.substring(6, 10);
}
e.target.value = formattedInput;
});
});
});document.addEventListener('DOMContentLoaded', function() {
var phoneInputs = document.querySelectorAll('input[type="tel"]');
phoneInputs.forEach(function(input) {
input.addEventListener('input', function(e) {
var input = e.target.value.replace(/\D/g, ''); // Remove all non-numeric characters
var formattedInput = '';
// Assuming the first two digits are the country code +xx
if(input.length > 0) {
formattedInput += '+' + input.substring(0, 2);
}
if(input.length > 2) {
formattedInput += ' ' + input.substring(2, 5);
}
if(input.length > 5) {
formattedInput += ' ' + input.substring(5, 9);
}
if(input.length > 9) {
formattedInput += ' ' + input.substring(9, 13);
}
e.target.value = formattedInput;
});
});
});Discussion 3
Ask a question or share how you used this.
Thanks for sharing. As i understand it, the code should be placed in the post edit template page to see this in the front when a user edits or adds a listing?
Hi! Is there a way to request a customer's phone number and first and last name when making a reservation? In new versions of Voxel, this has disappeared
You can request phone under products tab on backend. Then pull their name from their profile.
Hi! If offline payments are enabled, it is not possible to request a phone number from the buyer. You can add fields that are only pre-filled. It is also not possible to create fields for pre-filling out the form. For example, I need to make a small questionnaire for a booking service so that the user can fill it out. It used to be in the version before 1.3.5. Do you know how to do this to add additional fields preset in the block where the user writes additional information for the order?
Can you create a section on the site similar to a forum where you can ask your questions like on facebook? For example, maybe someone knows how to make a function that can add a waiting period for an order when it is in the status of manual approval. That the order was canceled after 24 hours if it was not confirmed. Or a function that could display the questionnaire if the seller / buyer manually clicked cancel the order. Nowhere is it possible to find out the reason for the cancellation of the order, which is strange. There is also a function to add a new status for the order - completed. Also missing. All orders are confirmed, but there is no status - completed.
This site does not have a forum. There is a facebook group for that. As for the order, there is an integrated chat function for each order where you can communicate directly with the customer.
It seems that the chat function in the order was also removed in versions after 1.3.5? Can you tell me how to turn it back on, we did not find it.
Hi! Could you make instructions on your website for this? To be honest, for offline mode, we have not found anywhere an opportunity for the buyer to leave the data of the arriving guests. There is only a notes field, but it is not suitable for this. And asking every time in the chats after placing an order, the glamping managers will get confused. It takes too much time to find out the contacts. In version 1.3.5, it was possible to create a form and the guest filled in the data, they were displayed in the booking order, but now this is not the case.
I am a newbie, Is it possible to have a short video how to add this snippet to the listing website? I would love to pay for this.
Did you see the instructions? On the page you want this to appear, add an HTML widget (FREE) and paste the code in there. Be sure to have < script> before your code and after the code if it isn't already inserted above.