Hello bubble users! I currently have an application that allows users to be sent periodic messages to their phone numbers. Upon signing up, they input their phone number in to one input and a verification message is sent. I am looking to improve the design of my site, so I have changed it to look like this:
The workflow looks like this:
I am looking to remove the spaces in between the three input text field values so it actually sends the message to the number in the inputs. If there is any way to achieve this, a reply with a little help is much appreciated!
You’re the one that added the spaces, BTW. You typed them. Just remove them if you want to use this technique. But there’s a better, built-in way:
Since you’re just collecting US-style phone numbers, you can use a standard Bubble input with the “US Phone” input mask (“Content Format” is what Bubble calls it). Like this (the element shown here is just the standard Bubble input element):
Please note: Phone numbers ARE NOT NUMERIC. Phone numbers are strings (texts as Bubble calls them). While Twilio is forgiving of US phone number formatting, what it really expects is an E.164 format phone number. This is a string that starts with “+”, followed by the international dialing code, followed by the local number.
So ideally you should snag the result of the US Phone input and put “+1” in front of it and store that string. See screenshots:
Aside: If you’re trying to capture international phone numbers, not just US, note that the best solution is @gaurav’s Phone Input plugin, which is an implementation of intl-tel-input.js. ($4/month and worth it.)
For more on E.164 format, see Twilio’s article about that:
