- MasalamediaAsked on August 29, 2015 at 12:11 PMI'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.
- JotForm SupportabajanAnswered 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.
- MasalamediaAnswered 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?
- JotForm SupportabajanAnswered 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.
- MasalamediaAnswered on August 30, 2015 at 12:48 PM
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.
- JotForm SupportWelvinAnswered 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.