What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by Masalamedia 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?

    responsive phone text boxes phone fields masked input input mask
  • Profile Image
    JotForm Support

    Answered by abajan 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:


    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

  • Profile Image

    Answered by Masalamedia on August 29, 2015 at 03: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?

  • Profile Image
    JotForm Support

    Answered by abajan on August 29, 2015 at 06: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.

  • Profile Image

    Answered by Masalamedia 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.

  • Profile Image
    JotForm Support

    Answered by Welvin on August 31, 2015 at 04:34 AM

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

    Thanks