Your Dubsado proposals are often the first major interaction a potential client has with you. Which is why it’s so important to make sure your proposals are a true representation of your brand. With such a large percentage of users viewing proposals on a mobile device, it’s important that your forms are perfectly optimised for mobile devices.

Something I’ve noticed on a lot of forms recently is the stacking of form fields on mobile devices. This is something that is very easy to overlook, but it’s actually very important for user experience. If your form fields are arranged in two columns, you may have this common issue without even realizing it.

How do your form field stack?

The two Dubsado forms below look identical when viewed on a desktop. However, you can very quickly see that one makes a lot more sense than the other on a mobile device.

How to fix the form field stacking

If your form fields are stacking incorrectly then you’ve likely set up your form fields like the image on the left. You’ve dragged in a column block and then simply added your form fields. In fact, you need to use a separate column block for each row of form fields. The image on the right shows how you should stack your form fields.

The below images will help you understand how stacking works within columns and rows.

The best way to set up your form fields

The best way to set up your form fields is to enclose them in one large column block. Whilst you don’t have to set up your columns within an overall column for the mobile stacking to work, it does mean that you can easily move your entire form field section just by dragging the overall column block. This is a great way to make your Dubsado form fields more robust and easy to edit in the future.

Now head over to your Dubsado forms and check that your proposals and lead captures are stacking in a way that makes sense!