How to change input type ="text" to type="tel"

  • Profile Image
    markashton
    Asked on April 14, 2011 at 12:33 PM

    Hi,

    Under quick tools the phone field has an input type of "tel".

    This is good for mobiles as the keyboard come up as numeric on an ihone

    However, I require to get a mobile number and the format of the phone field is not appropriate for that.

    So, I would like to change a normal text field from type "text" to type "tel" for a field that will catch mobile numbers.

    I can't figure this out but would be most grateful if someone knows the custom CSS code to make this change for a specific field.

    I use firebug ... its ID="input_45"

    Can anyone advise me on this please

    Many thanks

    Regards Mark

  • Profile Image
    NeilVicente
    Answered on April 14, 2011 at 02:11 PM

    Hi there,

    It is not possible to change input type by customizing css. Css is used only for styling elements and cannot affect how a form field behaves, or how it is processed by the form itself.

    THe only solution I could think of is by getting the form's using source code, changing the input type from "text" to "tel" and then embedding it right away. Be wary though that any other changes you made in your form inside the Form Builder will not reflect with your embedded form if you use Source as embed method.

    Hope this helps.

  • Profile Image
    markashton
    Answered on April 14, 2011 at 02:46 PM

    Thanks Neil,

    Unfortunately, the latter suggestion would be highly impractical in my circumstances.

    Would you be kind enough to advise the dev team that it would be practical to be able to do the following with the quick tool phone field:

    1) Ability to edit the sub-labels
    2) Ability to add a hint e.g. 07xxx-xxxxxx would be useful in UK

    Many thanks

    mark

  • Profile Image
    NeilVicente
    Answered on April 14, 2011 at 02:59 PM

    Hi,

    1.  Actually you can edit the sub-labels by double clicking on them.

    2.  For what it's worth, a hover text option can be used to give text hints to users.

     

    Hope this helps.

  • Profile Image
    markashton
    Answered on April 14, 2011 at 03:05 PM

    1) Good one Neil. That works

    2) Hover has no use on mobiles phones (I can see you slapping your head on that one ;) Or does it? dazzle me :)

  • Profile Image
    NeilVicente
    Answered on April 14, 2011 at 03:16 PM

    Hi,

    For mobile phone you can instead insert a Free Text HTML tool to add hints. It is possible to customize the text to make it appear like a hint text (gray text color, italicized, small font-size).

    You can find this tool under the Power Tools option

  • Profile Image
    markashton
    Answered on October 07, 2011 at 10:34 AM

    excuse this - the string is incorrect have posted under correct subject string