Creating a responsive, two-columns inline form

A common request for our support team is to provide indications on how to create a responsive form layout, having the fields set up on 2 columns. RSForm!Pro does not offer this by default but it is flexible enough to allow you to create one by yourself.


All of this is possible using the Form Layout feature which, aside from automatically generating the form's layout and providing 7 pre-defined layouts to get you started, also allows you to adjust any of them manually to better suit your needs.


As an example, we will be tweaking the RSForm!Pro example form's Responsive (CSS3) layout by replacing both the containers in which the form's fields will be enclosed and the CSS classes that are associated with them. Below, you can have a look at the end result viewed on the most commonly used resolutions (desktop, tablet and smartphone):


Smartphones (320x480) Tablets (768x1024) Desktop (1920x900)

Note: To install the sample form on your website, download it by clicking on the link above and then head to Components >> RSForm!Pro >> Backup / Restore >> Restore tab, browse for the file and click on Restore. The form will then be available in RSForm!Pro's Manage Forms tab.

Bootstrap


Which brings us to the most important part of this article: The Bootstrap framework. Designed by Twitter, this is a grid-based system which offers, aside from templates for interface components (forms, tables, buttons, etc.) that you can use on your website, responsive capabilities - the layout will be automatically modified to fit screens of all types of resolutions, ranging from desktop monitors to smartphone and tablet displays.


The modified form layout


As we have mentioned earlier, to demonstrate this we have altered the layout of the default form that gets installed along with RSForm!Pro, RSForm!Pro example. You can have a look at the layout (and copy it) below:





To add it to your form's configuration, please take the following steps:


  • Select and copy the code in the textarea above
  • Head to Components >> RSForm!Pro >> Manage Forms >> edit the RSForm!Pro example form >> Properties >> Form Layout tab
  • Set Auto Generate Layout to No and paste the code in the form's layout area

Note: By disabling the form layout's automatic generation, any future changes that you will make will not be applied in the frontend. If you intend to later add some more fields to the form, you will need to do so by editing the form's layout manually, specifically by adding the fields' placeholders where they best suit your needs.

How it was made


By having a look at the layout provided above, you might be tempted to believe that there is nothing special about it, just the fields' placeholders enclosed in, mostly, some <div> tags.


However, the secret behind our form's responsive layout lies in the CSS classes it uses, designed to bring responsive capabilities (and a nice look and feel) for the most important HTML elements, all provided by Bootstrap:


  • .row-fluid: Add this class to the <div> container in which you wish to enclose the 2 fields (caption + body + validation + description) that will make up for one row. It will shift the second field below the first one on smaller resolutions. You will need one <div> container associated with this class for each row in your form
  • .control-group: Add this class to the <div> container in which you wish to enclose each field's inputs and labels
  • .control-label: Wrap the labels in a <div> container associated with this class
  • .controls: Wrap the inputs in a <div> container associated with this class
  • .spanx: Where x ranges from 1 to 12. Containers having these classes represent cells in the grid system. A row may contain up to 12 cells (each having the span1 class) or any combination, with the single condition that the sum of the span classes must not exceed 12 (for example: span6+span6, span5+span5+span2, etc.)

31 persons found this article helpful.


Was this article helpful?

Yes No
Sorry about that

You Should Also Read

How to create a multi-page form HOT

Dynamic Drop-down change form example

Create Tabbed Forms

Creating a Send me a copy scenario

How to override front.css file in RSForm!Pro