Change the Elementor Form Date Format & Form Phone Number Format

Together with Wicky Design we will look into changing the Elementor Form Date Format, allowing users to input information in a structured and user-friendly way. We will also learn how to apply the same to the Elementor Form Phone Number Format. This little tweak can greatly improve user experience and makes it easier for the user to see mistakes they made while entering the information.

Changing the Elementor Form Date Format

The goal is to have an Elementor form date format that follows the month/day/year structure. Here’s how to achieve this:

1. Start by setting up your Elementor page and adding a contact form widget.
2. In the contact form widget, configure the birthday input field as text.
3. Under the Advanced settings of this field, set a unique ID. This could be something like “birthday”.
4. Add a new item to the form by clicking “Add New Item” and select “HTML” from the dropdown.
5. Label this new item as “Birthday JavaScript code”.
6. Copy & paste the JavaScript code below that formats the date into this new HTML item. This code should be linked to the unique ID of the field.

   <script>
   document.addEventListener('DOMContentLoaded', function() {
     const birthdayInput = document.getElementById('form-field-birthday');
   
     birthdayInput.addEventListener('input', formatBirthday);
   
     function formatBirthday() {
       let inputValue = birthdayInput.value;
       inputValue = inputValue.replace(/\D/g, ''); // Remove non-digit characters
   
       if (inputValue.length > 8) {
         inputValue = inputValue.slice(0, 8);
       }
   
       let formattedValue = '';
   
       if (inputValue.length > 4) {
         const day = inputValue.slice(0, 2);
         const month = inputValue.slice(2, 4);
         const year = inputValue.slice(4, 8);
   
         formattedValue = `${day}/${month}/${year}`;
       } else if (inputValue.length > 2) {
         const day = inputValue.slice(0, 2);
         const month = inputValue.slice(2, 4);
   
         formattedValue = `${day}/${month}`;
       } else {
         formattedValue = inputValue;
       }
   
       birthdayInput.value = formattedValue;
     }
   });
   
   </script>

   Source: Wicky Design

Changing the Elementor Form Phone Number Format

The aim here is to have a format that includes dashes in the Elementor Form Phone Number Format. Here’s how to set this up:

1. In your contact form widget, configure the phone number field and set the type as “tel”.
2. Under the Advanced settings of this field, set a unique ID. This could be something like “phone”.
3. Add a new item to the form by clicking “Add New Item” and select “HTML” from the dropdown.
4. Label this new item as “Phone JavaScript code”.
5. Copy & paste the JavaScript code below that formats the phone number into this new HTML item. This code should be linked to the unique ID of the field.

   <script>
   document.addEventListener('DOMContentLoaded', function() {
     const phoneNumberInput = document.getElementById('form-field-phone');
   
     phoneNumberInput.addEventListener('input', formatPhoneNumber);
   
     function formatPhoneNumber() {
       let inputValue = phoneNumberInput.value;
       inputValue = inputValue.replace(/\D/g, ''); // Remove non-digit characters
   
       if (inputValue.length > 10) {
         inputValue = inputValue.slice(0, 10);
       }
   
       let formattedValue = '';
   
       if (inputValue.length > 6) {
         const areaCode = inputValue.slice(0, 3);
         const prefix = inputValue.slice(3, 6);
         const lineNumber = inputValue.slice(6, 10);
   
         formattedValue = `${areaCode}-${prefix}-${lineNumber}`;
       } else if (inputValue.length > 3) {
         const areaCode = inputValue.slice(0, 3);
         const prefix = inputValue.slice(3, 6);
   
         formattedValue = `${areaCode}-${prefix}`;
       } else {
         formattedValue = inputValue;
       }
   
       phoneNumberInput.value = formattedValue;
     }
   });
   
   </script>

   Source: Wicky Design

Testing the Form

After setting up the date and phone number formats, it’s important to test the form to ensure it works as expected.

1. Go to the front of the website and type into the form fields. The input should automatically format according to the JavaScript code.
2. Try deleting the input. The form should automatically adjust the formatting.
3. Send the form and check the email received. The date and phone number should appear in the correct format.

Benefits of Proper Form Formatting

Proper formatting in form fields can significantly enhance the user experience on your website. Here’s why:

• Improved Readability
  Correctly formatted data is easier to read and understand. For instance, a date displayed as ’01/01/2023′ is more readable than ‘01012023’. Similarly, a phone number displayed as ‘123-456-7890’ is more comprehensible than ‘1234567890’.
• Consistency
  Consistent formatting across your website gives it a professional look and feel. It also helps users know what to expect when entering information, reducing the likelihood of errors.
• Error Reduction
  When data is automatically formatted as it’s entered, users are less likely to make mistakes. This leads to more accurate data collection.
• User Convenience
  Automatically formatting data as it’s entered saves users from having to format it themselves. This makes the form-filling process faster and more convenient, which can lead to higher completion rates.
• Data Validation
  Proper formatting can also serve as a form of data validation. For instance, if a phone number field automatically formats entries to include a certain number of digits and hyphens, it can prevent users from entering an incorrect or incomplete phone number.

Conclusion

Changing the Elementor form date format and the Elementor form phone number format can greatly improve user experience. By following the steps outlined in this tutorial, you can easily implement these changes in your own forms.