Blogs by date "June 2016"

New Bootstrap3 Dynamic/Drag-n-Drop Form Designer

New Form DesignerThe new v2.3.8 Patch #4 contains an updated form designer for Bootstrap 3 based themes (sorry we're still running into issues on the non-Bootstrap 3 themes). This allows for much easier and quicker form creation and editing. Whereas the previous interface required going back and forth through various screens (page loads), everything now takes place on the main form designer page with updates being performed in the background. What's more...the form designer looks and operates very similar to the previous version.

To add a new control to the form: you simply select a control from the list of controls to the right (or you can change the theme style to place this list on the left if you use a left sidebar) and drag it onto the form in the location you wish to place it. This opens a dialog on the page to enter the details about that control...or you may cancel the action to add the control.

To move a control to a new location: you simply select the control and drag it either up or down and drop it into it's new place.

To remove a control from the form: you can simply select the control and drag it into the trash can above the list of available controls. You may also remove a control by clicking on the red 'delete' button on that control.

New Form Designer​To edit a control on the form: hover over the control and click on the 'edit' button to bring up the control details.

Some other new features include a button to remove the 'design grid' from the display to provide a better idea of what the form will actually look like (this feature is also available on the non-Bootstrap 3 form designer). We've also added a 'switch styles' button to switch between the two basic form styles of having the label above the control or the labels to the left of the controls

All in all this should be a great improvement for those users dealing with the form module.

About the author

Dave Leffler
Exponent CMS Developer