How do I adjust forms?

How do I?
1

Hi,

I’ve created a form inside Five, and want to adjust the size of the fields so that they are not all the same size. How do I do this?

Can I make some fields appear based on the responses I get from my users?

2

Hi The MaskedDev,

There are two methods to changing the layout of your form fields.

The Form Designer

  1. Select Forms in the menu.
  2. Select the Form record in the list.
  3. Click the Pages tab.
  4. Select the Page record.
  5. Click the Open Form Designer button.
  6. You can now use your mouse to drag, drop and resize fields.
  7. Click the Save button in the Form Designer.
  8. Click the Save button in the Form record.

unnamed

The Field Record

  1. Select Forms in the menu.
  2. Select the Form record in the list.
  3. Click the Pages tab.
  4. Select the Pages record.
  5. Click the Fields tab.
  6. Select the Field record.
  7. Click the Display Tab.
  8. Under the Desktop Layout heading fill in the values in the following fields:
    Pre Width, Width, Post Width
  9. Click the Save button for the Field record.
  10. Click the Save button for the Form record.

Field Record)

It operates on 12 grid positions and by default the fields are set to 2, 8, 2. And of course, you can change the layout of the fields on creation of a new record.

Please find the attached videos to visually help. There is one for the Form Designer and one for the individual field.

1 Like
3

Thanks!

Do I need to manually adjust for different screen sizes? What if someone accesses my application from mobile and I want the forms to be shown differently?

4

Hi there!

Five builds responsive web applications, so you don’t have to worry about manually creating a separate UI for users on mobile or tablet.

Five automatically adjusts forms (and other elements inside your end-user application) to the screen size that is available to them. You can test what your form will look like on mobile or tablet by re-sizing your browser window on your desktop.

Usually, there are two things that happen when someone accesses an application on mobile:

  1. Five will stack form fields on top of each other, and
  2. Five will collapse the menu on the left. To bring back the menu, your end-users can simply click on the hamburger item.

Here’s an example of what a form looks like on a full-screen vs. on mobile:

Five.Co - Responsive Design
Five.Co - Responsive Design4246×2579 498 KB

1 Like