Jump to content

How to have phone number field in one box

Recommended Posts

Hi,

 

I am trying to make a custom phone number field on my forms.  I would like it to show up as one line but still have the phone number formatted properly. See below for how I would like the telephone form field to look when selected and not-selected. The image with the yellow highlight circle is how it looks at the moment.

Thanks

8B1DE50C-CD47-466D-8405-3B427034F31A.jpeg

407F43E6-F5A4-46D3-8220-47628A77F6EF.jpeg

80DF55EB-ED38-491D-8E9A-5143AA774DBF.jpeg

Link to comment
21 hours ago, Homeward said:

Hi,

 

I am trying to make a custom phone number field on my forms.  I would like it to show up as one line but still have the phone number formatted properly. See below for how I would like the telephone form field to look when selected and not-selected. The image with the yellow highlight circle is how it looks at the moment.

Thanks

8B1DE50C-CD47-466D-8405-3B427034F31A.jpeg

407F43E6-F5A4-46D3-8220-47628A77F6EF.jpeg

80DF55EB-ED38-491D-8E9A-5143AA774DBF.jpeg

I have implemented for my customer to have a specific number field which allow to choose the country code and enter phone number

image.thumb.png.a9fb6a62898440c9dac645ef4f334b5f.png

Does it match your need?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
6 minutes ago, Homeward said:

Hi,

Sorta but without the country code selection. I was thinking more along the lines of something like the image below where it sets the attribute of an existing Squarespace form text box. 

Thanks

FD870B1A-3A4C-44A5-9E30-9A9C02DAAB1F.jpeg

Sure, it is a good idea to start. You can get reference here: HTML input type="tel" (w3schools.com)

We can create a text field and then use js to change this field in to a phone number input

Hope it makes sense

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 7 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.