Step 1: Design


PHsPeed contains a form designer to help you design your bootstrap forms fast and easy. As the display of forms is depending on the platform it is displayed upon, we have not tried to create a full WYSIWYG painter, but a conceptual painter. The generation of application code is very fast. Therefore you can always generate code and look at the real deal.

Designing your form need a few steps:

setup the invisible behavior.

When you create a form, then PHsPeed will usually apply a root and a database component. But beside you might need some supporting components to get things going. If you need data-aware components then you need a table component and a data source component. You can put these on the form when you need them, and then apply the correct connection between the components. Other samples of invisible components are the basic pdf component, email component, in components that are important to implement some kind of functionality but do not require some visual interface. 

design your layout

Bootstrap uses a grid system to layout forms. To find out more about the Bootstrap Grids we advise you to visit Within the IDE you can create panels, apply rows and columns. By applying properties you can define how much space will be occupied and how the form should react if it's being shown on a mobile phone, tablet or desktop.

apply visual components

While creating your columns you can then apply visual components like edits, checkboxes etc. By setting properties you can change the behavior of the components, like color, watermarks etc. By applying events you can easily apply ajax code to them to make your form responsive. PHsPeed hides the full communication process. For the developer, it is just a matter of creating a PHP and a javascript event. 

Screenshot 11

The components are set onto the form by selecting them from the toolbar and putting them on the form. To design the layout there are some components that are equivalent to bootstrap elements as area, panel, row, and column. All components are supporting the bootstrap grid model of 12 sections per parent. After designing the form you can generate and run code to see your form in 'real life'.

Tags: None

About author



We are all dedicated to PHsPeed. It's not the art of finding new customers, but the art of keeping them. If you like the product: spread the word. If you have issues let us know!
My articles