Phone Number Restriction

  • Profile Image
    earnmygifts
    Asked on July 04, 2011 at 02:14 PM

     

    I noticed in you forum that you cannot restrict the number of digits in a phone number and I should use a text box instead.

     

    However, how would I place 3 text boxes side by side to accept a phone? (3 digits – 3 digits – 4 digits)

     

     

    You get the idea – each box would be restricted to 3 – 3 – 4 digits respectively

     

    Thanks

     

    Clay

  • Profile Image
    NeilVicente
    Answered on July 04, 2011 at 03:36 PM

    Hi Clay,

    To place 3 text boxes side by side, you will need to shrink them first. Right-click on each text box then click "Shrink". Then, adjust the size and max size of each text box by clicking on the Size button and Max Size buttons, respectively. Size refers to the width of the text box while Max Size is the number of characters it can allow.

     

    In this sample form, I have set the size of the text boxes to 3-3-6 and the max size to 3-3-4.

    Set the validation to numeric so that it accepts only numbers.

     

    We're not done yet as the labels for the two other text box still appear. Delete the labels by replacing them with a spacebar stroke. Then, we use custom CSS to hide the white space completely. First, find the id of these labels by looking at the source code. Click Preview, then Open in New Tab to open the form in a new browser window. Right-click on the form then choose View Source.


    Find the next two label ids after the label with the text "Phone:"

    Take note that I also highlighted the id's for the li's that contain the text boxes. You will need this to reduce the spaces between the text boxes.

    Using those label and li ids, inject this custom CSS in your form:

    #label_4,#label_3 {
    display:none;
    }

    #id_1,#id_3 {
    padding-right: 0;
    }

    #id_4 {
    padding-left: 0;
    }

    To inject custom css:

    1.  Go to Setup & Embed tab
    2.  Click Preferences Form button
    3.  Choose Form Styles tab
    4.  Copy and paste the css code in the Inject Custom CSS textarea


     
    The last thing you need to do is to add sub-labels in the textboxes. Click on each textbox then click Sub-label in the toolbar. Enter a text for the sub-label then click OK.

     

    Hope this solution works for you. Let me know if you're having difficulties implementing this.


    Neil

  • Profile Image
    NeilVicente
    Answered on July 04, 2011 at 03:58 PM

    Oops, sorry about that. I forgot to set the Max File Size as I was making screenshots. Please test it now.


    Neil

  • Profile Image
    earnmygifts
    Answered on July 04, 2011 at 04:23 PM

    Correct me if I am wrong, but I am going to have to alter the code and inject custom CSS

    This looks to be beyond my skill level.

    Why would you not just offer the option to restrict the number of digits in the phone field?

    Why all the complication?

  • Profile Image
    NeilVicente
    Answered on July 04, 2011 at 04:35 PM

    Hi Clay,

    There is no need to alter the source code, all you need to do is just inject some custom css which I gave instructions for.

    You actually asked for steps on how to place the textboxes side by side and limit the allowed numbers that is why I gave you all these steps. They are actually pretty easy to follow, it's the css code injection that will get a little confusing, but that's what we are here for. You can ask questions whenever you want to.

    I can't be 100% sure but I think the option to restrict digits in the phone number field has been added to our feature request. I just don't have any idea about the status of that request but I have submitted a ticket, just now, to confirm with our developers.

    You will be informed about that after our devs receive this ticket. Thank you for your patience.


    Neil