Styling forms using Bootstrap grid

By default all forms are created with full width of their parent. This means that forms by default will stack and can’t be inline. By using bootstrap grid columns, you can change the width of individual elements, so elements can be inline. To check out the different styling options you should read the Bootstrap documentation about the grid or the form styling.

To go from stacked forms to inline forms like the example above you only need to do a few tweaks. This example is based on the Contact form which already exists on the default Swift solution. However, should this not be the case or if you want to understand the setup of forms you can check out our documentation about it here.

To make these changes you need to head to Apps, located in the area menu on the left.

  1. Click on Forms for editors in the “Configurable Apps” section
  2. Click on (or create) the Contact form

For this example, we have changed the width of the Email field and the Phone field. Also, we have added two radio buttons “Customer” and “Partner” as part of a User type identification element.

  1. Click on Email* on the left side of the page to open the settings
  2. Go to Layout located in the top menu
  3. In the Css Class field in the “Layout” section write “g-col-md-6”
  4. Hit OK and Save and close

Now do the same for the phone field:

  1. Click on Phone on the left side of the page to open the settings
  2. Go to Layout located in the top menu
  3. In the Css Class field in the “Layout” section write “g-col-md-6”
  4. Hit OK and Save and close

Now we need to add some Radio buttons.

  1. Click on Radio button in the top menu
  2. Write “User Type” in the Text/label field. Additionally you can add a description or choose if it should be a required field or not
  3. Hit Save
  4. Click on User Type on the left to open the settings
  5. Now add the two options Customer and Partner in the “Options” section.
  6. Scroll to the top and click on Layout in the top menu
  7. In the Css Class field in the “Layout” section write “form-check-inline”
  8. Hit OK and Save and Close

To see the changes made you need to open the page containing the form in frontend and reload the page.