On Responsive Forms How Can I Get Each Phone Number to Appear on One Line When the Form Width Is Narrow?

  • Masalamedia
    Asked on August 29, 2015 at 12:11 PM
    I'm also struggling on the same form to get the phone area code and phone number to appear side-by-side. It isn't an issue when the form is viewed on its own (e.g. http://form.jotformpro.com/form/51885054009961) but when its embedded on my website (http://achievecg.com/staging/register/) it looks like some responsive formatting takes over when the page shrinks past a certain point. You'll notice that all the field labels go to the top instead of to the left when the browser window goes below 1300px.

    Any ideas how to keep my areacode/phone number fields side-by side and get less re-formatting?

  • abajan Jotform Support
    Replied on August 29, 2015 at 12:25 PM

    Perhaps the simplest way would be to use a single text box for each phone field. Enabling the input mask feature (shown below) would force users to enter their numbers in the format you specify:

    On Responsive Forms How Can I Get Each Phone Number to Appear on One Line When the Form Width Is Narrow? Image 1 Screenshot 20


    By default, the format is area code in parentheses followed by a space, three (3) digits, hyphen and four (4) digits. But it can be changed to your liking by clicking the Mask Value button to the right of the Input Mask one.

    If you need additional help with this, please inform us.

    Thanks

  • Masalamedia
    Replied on August 29, 2015 at 3:43 PM

    Actually if you look at the form you'll see that it has separated AC and phone into two fields. Are you saying I shouldn't use the phone number feature provided by Jotform?

  • abajan Jotform Support
    Replied on August 29, 2015 at 6:35 PM

    My apologies for not making it clear that the single text box I recommended is actually the same phone field, just in a different format. If you click any of the phone fields in the form and then click the input mask button shown in my screenshot, it will change into a single text box. While I'm sure it's possible via CSS to have the default format of the phone field text boxes remain as is while the width of other text boxes stretch to 100% of the form's width, it seemed like it would be simpler to just go with a masked single text box.

  • Masalamedia
    Replied on August 30, 2015 at 12:48 PM

    OK. Thanks. 

    As a point of feedback, as a user who employs JotForm precisely to avoid a lot of coding time and effort, my expectation is that the predesigned templates should be carefully crafted to accommodate resizing without falling apart. Area code & Phone Number fields should resize adjacent to each other not resort to separate lines which look weird. The single field & mask solution is an OK workaround, but I would prefer not to have to employ a workaround in the first place.

  • Welvin Support Team Lead
    Replied on August 31, 2015 at 4:34 AM

    You're welcome and thank you for the feedback. I will raise that matter to our developers into a separate thread. 

    Thanks