Services Plugins FAQs

Phone Number Input with Formatting - New Plugin from Zeroqode

Plugins
#1

We have just published a new plugin
Phone Number Input with Formatting - this is an input field designed specifically for phone numbers. Users can select their country from a drop-down list and the input element would hint the right format. Plugin would also check whether the phone number format is correct and would return the result as a state. Plugin would also return the phone number in case it is correctly entered.

You can try the working demo here:
Zeroqode Phone Number Input with Formatting

phone%20number

And a screenshot:
image

Levon Terteryan
Founder @ Zeroqode & Bubblewits

zeroqode-for-web-160x120

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

#2

Hello, I am currently using this plugin. I have a question regarding the Field Types within Bubble and whether this plugin will create a Field Type that will be formatted as a phone number? I ask because I do not see a field type of phone number currently listed.

Up to this point I have been using text as my Field Type for the phone number field but want to be sure the Field Types for my contact records of phone number plays nicely with this plugin since I will be capturing phone numbers and be following up with contacts via the inputted phone number.

My app has not launched yet so there isn’t any data conversion at this point, I just want to make sure I have a firm grasp on how this will work prior to launching my app.

Thank you!

#3

Hey David, there is no such field type as phone number in Bubble and in general databases do not have anything like that. Just use a text field and it should be sufficient for your needs.
Hope this helps
Thanks.

1 Like
#4

Thanks for the reply, this is exactly what I needed to know.

#5

I have a problem with formatting when using this plugin with the “Slidable Menu” plugin provided by Bubble.

When the phone number field is present on the page - whether visible or not - it is causing the Slidebar menu to jump down about 12 pixels.

To reproduce I created a blank page (doesn’t seem to matter if full width or centered, added a group to top with 50px height and placed the Slidebar menu inside.

Tested and all is ok.

Next I add the Phone Number box to the main page and reload the preview. The Slidebar menu has moved down the page about 12px.

This is present for all versions.

#6

I can create a fix by adding
<style>.jpanelmenu-SlidebarMenu{ lineheight:0.99}</style>
as a script to the body.

#7

Hey Arnold, can you share the link where we can see this behavior?

#8

Yes - I disabled my fix so here it is temporarily:
Test page without the Phone number plugin is currently here.
Test page with the Phone number plugin is here.

1 Like
#9

Getting this error:

The plugin Phone Number Input with Formatting / element Phone Number Input threw the following error: TypeError: a.intlTelInput is not a function
at eval (eval at g.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/d64a41a77a7ba47d84d1b7027e24d1696e2b9921afe5cd859e8d8c007030b449/xfalse/x3:99:11611), :4:231)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/d64a41a77a7ba47d84d1b7027e24d1696e2b9921afe5cd859e8d8c007030b449/xfalse/x3:100:2145 (please report this to the plugin author)

Used in reusable element-seems to work ok in a regular group.

#10

we’ll check this, thanks

#11

we couldn’t recreate the issue, it works in a reusable element as well as you can see here https://zeroqode-demo-05.bubbleapps.io/version-test/phonepagetest?debug_mode=true
can you add vlad.betivu@bubblewits.com as a collaborator to your app and point to the page so we can check?

#12

@arnold.smyth we have fixed this, please install the latest plugin version, refresh the editor and give it another try

#13

we have just pushed an update to this plugin
Now while user is typing the number is checking for correctness, no need to click away.
Also when changing the country the number is checking again without clicking away.

#14

@levon I am having a problem with the dropdown for the list of countries. When it is near the bottom of the page it won’t open. It seems to try and open upward (there is a shadow at the top of the input field). You can see it here - scroll down to position the phone menu near the bottom of the page.

I have tested this in Safari and Chrome on Mac

00

#15

hello, we’ll check this out, thanks!

#16

Hi Arnold,
we have fixed this, please upgrade to the plugin’s latest version, refresh the browser and give it another try.
thanks

#17

Very impressive. Thank you so much for taking care of that so fast.

A few other things I am struggling to figure out:

  1. How to I make the field a required field. Usually I can just check a box “This field should not be empty”.
  2. I am getting an error in my debugger “Element PhoneNumberInput A: Maximum call stack size exceeded”. I don’t get this on a blank test page but on all my pages where there is other data I do and I can’t source it. Any ideas what I might be doing wrong?
  3. It would seem to not be clearing the previous initial value if the next value is empty. So I am using this in a user management app. When I select a user that doesn’t have a phone number in the DB it will use the number from the last viewed person that has one.
    07
#18

you can have a some workflow conditions, for example if you have a button that should save the input’s value, then you can have a workflow with a condition “input value is empty” and then show an error in that case

can you show your plugin’s settings screenshot? If you are using some dynamic value in the “default value” field, especially if the dynamic value is referencing the plugin’s value itself, then it cause this error

you can run a “reset inputs” workflow action to clear the values of the input and reset them to default

image
image806Ă—558 47.6 KB

#19

Sorry - I should have mentioned that I have tried that.

I have tried three different methods to hold the retrieved data:

  1. In the Parent Group - this is how I normally would do it
  2. Directly to the field
  3. In a state

I have tried reset group, reset input and reset state and multiple combinations of this. Have you been successful with resetting it the way you mentioned above because even in a basic test that doesn’t work for me? I have tested on multiple browsers (in case it was a plugin of some sort causing the issue).

#20

not sure i follow which of the initially mentioned issues this relates?