Data Validation For Field - Restrict to numbers only

Hi everyone,

I am using unbounce to collect leads for car finance. Once the form is submitted, the lead is transferred into my CRM (custom CRM).

The issue I’m having is, when the prospect enters any kind of symbol ($,.-) etc, my CRM will not accept the lead.

Is there a way that I can restrict this form field to only accept numbers?

Thanks in advance,
Brad

Hi @Brad_East!

You can add this little script and insert that field’s ID:

<script>
(function () {
  document.getElementById('FIELD_ID').type = 'number';
})();
</script>

I would also give the users a hint telling them to only enter numbers, either as the field’s placeholder or in the field label.

:wave:

2 Likes

Hi, I’ve followed your instruction but it still allows symbols to be added. Attached is a screenshot, have I done it correctly?

Hey Brad,
The script is implemented correctly, however the reason you can still enter non-numerical characters is because setting the field type to “number” only checks if the field is valid when you submit the form!
I wrote an alternative script which checks the user’s input instead. This should allow a single decimal and any size number:

<script>
    let formNumVal = '';
    let formNumField = document.getElementById('your_field_id');
    function filterNumberInput() {
        let regexp = /^\d*[.]?\d*$/gm;
        regexp.test(formNumField.value ? formNumVal = formNumField.value : formNumField.value = formNumVal;
    };
    document.getElementById('your_field_id').addEventListener("input", filterNumberInput);
</script>

Thanks but still didn’t work

Still able to enter symbols and the data doesn’t go through to the CRM

I just realized in my rush I forgot a bracket.
Replace the second line inside the function with this:

regexp.test(formNumField.value) ? formNumVal = formNumField.value : formNumField.value = formNumVal;