The form doesn't look good on mobile. How can I improve the responsiveness?
This article presents a series of steps to improve the form and make it appear nicely on mobile devices. Follow these action point to achieve better mobile form designs.
If your form doesn't look good on mobile screens, here are some good practices to fix it:
1. Use visual image/icon buttons with 2 columns only: If you are using select buttons with image or icon as the skin type, make sure to use a maximum of 2 columns. Otherwise, mobile screens don't provide enough room for several columns to show up properly.
Alternatively, switch back to select or radio buttons which are mobile responsive.
2. Reduce text sizing: Use smaller settings for question title, description text, input box, textboxes, etc. so that your text is better suited to mobile screens. Go to Design, Typography make the changes.
3. Create a dedicated form for mobile: If you still find it hard to make the form look good on mobile, consider duplicating your form and creating a slightly adjusted form, designed for mobile screens.
Use smaller text values, decrease form internal spacing and make other changes to achieve a good look.
Use smaller text values, decrease form internal spacing and make other changes to achieve a good look.
Decrease form internal spacing so that the form use the full width to display content
Different form internal spacing settings and the effect on the form design. Small form internal spacing on the left, higher form internal spacing on the right
2 Separate forms
You can simply paste the 2 different embed codes into your page-builder, hide the mobile code on web and vice versa.
These steps should help avoid most issues with mobile responsiveness.
These steps should help avoid most issues with mobile responsiveness.