Jump to content

Telephone number field in forms

Recommended Posts

Squarespace forms utilize three separate fields (or four, if country code is used) for telephone numbers. Unfortunately, this seems to prevent smartphones / personal computers from using their autofill feature to fill in the information automatically. It also necessitates tabbing at least twice to fill in the telephone number manually. I could replace the telephone number field with a text field to address the tabbing issue, but the autofill feature still wouldn't work. Is anything in the works to address this, or is there a workaround?

Link to comment
  • Replies 2
  • Created
  • Last Reply

You're right, it's best to use a Text field instead of the fixed Phone field as it is too inflexible on a website that will be used worldwide.

The field can be assigned the type attribute of "tel" to instruct browsers to offer autocomplete of a telephone number. This must be done by using JavaScript in the site injection area.

FIrst you must identify the field on your form then add the attribute.


phoneField=document.querySelector("some query string here");
phoneField.setAttribute ("type", "tel");

This is a simplified example to get you started.

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

Hi Paul2009, Thanks for this. I was able to replace the phone field with a text field, and it autofilled without my having to do a code injection, which is good because I don't know JavaScript! I tested the change with an Apple device; hopefully it works with other device types as well.

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • 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.