Custom code mask telephone problems

Design help Custom code
#1

Hi webflow community,

I have this code snippet here I want to apply to a form field (telephone field).

I have tried putting everything in the custom code footer, it doesnt work. I also gave my field the ID: TelTest, since that the reference I have in my code

I have also tried to embed the html code and putting the Jquery in the footer, no good.

Anyone knows what im doing wrong ?

Thanks a lot

EDIT 2:
https://preview.webflow.com/preview/form-test-63535b?preview=a5f9ae93d3fde704d790761590e50b4a

the code should affect the phone number input form here like on this form

#2

@Bourki We don’t have anything to look at so we cannot tell you whats wrong

1 Like
#3

I edited my post, im guessing the fiddle was empty.

#4

@Bourki you phone number field has an id of email not TelTest

#5

Yes, I have just corrected that. I made this website just to share and test it out. Go ahead and check it out, its published.

#6

I basically am really lost on how to implement this code into the form that already exists.

#7

You can’t include jQuery a second time. Webflow already does that for you, so you should remove the first line.

#8

Also you will need to wrap your script in <script></script> tags like this

<script>
$(document).ready(function(){
    $("#TelTest").mask("(000) 000-0000", {placeholder: "(XXX) XXX-XXXX"});
});
</script>
#9

And you’ll need to move this into the page footer code, just before the script in my previous post above.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.js"></script>

Like this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.js"></script>
<script>
$(document).ready(function(){
    $("#TelTest").mask("(000) 000-0000", {placeholder: "(XXX) XXX-XXXX"});
});
</script>
#10

Thank you so much Samliew I got it to work!