How Can I remover/set the area code to have character spaces?

  • Profile Image
    jay
    Asked on June 23, 2017 at 05:37 AM

    hi there,

     

    I am almost there with the form setup the only annoying thing I can see is the area code in the phone number has just no space to view what the user enters - it just shows an icon there - I haven't messed around with any of the settings - what I would like is to have some character spacing there if that is not possible just remove it so the form is usable - any quick advice would be most welcome as I want to subscribe your service and the directors will want to see the form in good working condition. Why does this phone field have this icon on the right side as u activate the field - it just limits what the user can see

    Any help advice would be most welcome.

     

     

    Jay

  • Profile Image
    Nik_C
    Answered on June 23, 2017 at 08:20 AM

    That looks like an auto-fill feature from the browser, but since the field is too small it took all the space.

    I wasn't able to replicate this issue on my side, but you could resolve that by adding the below CSS code to your Custom CSS field:

    #input_14_area{

    width:40px;

    }

    #input_17_area { width: 40px; }

    It will increase the area code field so your users will be able to input data. And it will do it for both area code fields.

    If you have any further questions please let us know.

    Thank you!

  • Profile Image
    Nik_C
    Answered on June 23, 2017 at 08:22 AM

    Also, I forgot to mention that you can increase the above numbers to fit your needs, I put 40px, and it looks like this: https://form.jotformpro.com/71733329395968

    Thank you!

     

  • Profile Image
    londoncorereview
    Answered on June 23, 2017 at 08:43 AM
    Many thanks will try that I am using the Safari Browser on Sierra Operating system on the Mac - perhaps in future this setting could be done for Safari as there will be many people who use Macs to fill out the forms - Many thanks for your courteous reply and TY !!!
    Kind Regards,
    Jayesh Parmar.
    IT Support
    Official site: http://www.corereview.co.uk
    Web App: http://www.londoncorereviewapp.com
    ...
  • Profile Image
    londoncorereview
    Answered on June 23, 2017 at 08:43 AM
    I think that I looking better any chance of making that rectangle wider so you can put 4 or more digits for area code for example in the uk we use area codes like 0208
    Kind Regards,
    Jayesh Parmar.
    IT Support
    Official site: http://www.corereview.co.uk
    Web App: http://www.londoncorereviewapp.com
    ...
  • Profile Image
    Nik_C
    Answered on June 23, 2017 at 09:55 AM

    You can make the area code field wider by increasing the number in CSS I provided above.

    So please use this CSS:

    #input_14_area{

    width: 60px;

    }

    #input_17_area { 

      width: 60px;   

    }

    It will fit four numbers.

    If that is what you had in mind?

    Thank you!

  • Profile Image
    londoncorereview
    Answered on June 23, 2017 at 11:43 AM
    That is excellent NIK !!!! Ty so SO MUCH
    My final request is to increase the PHONE NUMBER FIELD to 12 characters
    I hope by me asking for these requests, the responsive layout of the form won’t be jeopardised
    ...
  • Profile Image
    BDAVID
    Answered on June 23, 2017 at 01:22 PM

    Try injecting this code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #input_14_phone{

        width: 105% !important;

    }