|

Fast Website Development with PHP Components
|
|
|
Using Form Submission Page Object
Below are the tutorials for creating front-end page using 'Form Submission' page object. Let's say, you've built a Desktop Computer Catalog module and you wish to create a page that will allow visitors to post enquiries on your website. |
Create Page Object
|
 |
- Login to your One Admin area and click on the 'Desktop Computer Catalog' in the module's pane to run module through back-end system. Otherwise, click on the Pro button in the One Admin panel to access Modules Builder Pro and create 'Desktop Computer Catalog' module.
- Once you have completed step 1, proceed to module's Launch Builder and a page similar to above will prompt out. On this page, select Front-End design area and create a page using 'Form Submission' page object.
- Name this page as 'Enquiry Form', define the 'Data' source name (Table's name in the database) and enter the text for 'Submit' and 'Back' buttons.
|
Insert Form's Fields
|
 |
- On the same page as previous screenshot, click on the Add Field to insert new fields in 'Desktop Catalog' form such as textbox, dropdown menu, radio button, checkbox, HTML editor, etc.
- Otherwise, click on the Edit Field to select any field that you want and click on the
icon. There are different type of fields in which you can select from.
Textbox
- Label - Insert or edit field's label that will display in your form adjacent to the textbox, e.g. 'Code'.
- Name - This is your database field name, e.g. code. Keep the name short, no space is allowed, and cannot be left blanked.
- vAlign & Align - Select field's alignment such as 'vAlign' (Top, Middle or Bottom) and 'Align' (Left, Center or Right).
- Location - Choose the display location for your textbox in your form either on the Left or Right.
- Display - Place your textbox on top in your form before other fields or choose to display textbox within existing fields.
- Width - Set your textbox size in pixel.
- Value - Add or edit text and value that you wish to assign to this field. Write a short tips if necessary to give users a hint of what to input in the textbox. If the value you wish to use is PHP code, click on the below checkbox to 'Interprete field's value as PHP code'. For example, you may wish to use return date("Y-M-D"); as your field's value.
Textarea
- Label - Insert or edit field's label that will display in your form adjacent to the textarea, e.g. 'Brief Description'.
- Name - This is your database field name, e.g. description. Keep the name short, no space is allowed, and cannot be left blanked.
- vAlign & Align - Select field's alignment such as 'vAlign' (Top, Middle or Bottom) and 'Align' (Left, Center or Right).
- Location - Choose the display location for your textarea in your form either on the Left or Right.
- Display - Place your textarea on top in your form before other fields or choose to display textarea within existing fields.
- Width & Row - Set field's width in pixel and number of rows (height) of your textarea. .
- Value - Add or edit text and value that you wish to assign to this field. Write a short tips if necessary to give users a hint of what to input in the textarea. If the value you wish to use is PHP code, click on the below checkbox to 'Interprete field's value as PHP code'. For example, you may wish to use return date("Y-M-D"); as your field's value.
Selection - Display multiple options in a drop down list.
- Label - Insert or edit field's label that will display in your form adjacent to the drop down box, e.g. 'Product Type'.
- Name - This is your database field name, e.g. type. Keep the name short, no space is allowed, and cannot be left blanked.
- vAlign & Align - Select field's alignment such as 'vAlign' (Top, Middle or Bottom) and 'Align' (Left, Center or Right).
- Location - Choose the display location for your drop down box in your form either on the Left or Right.
- Display - Place your drop down box on top in your form before other fields or display it within existing fields.
- Validation - Validate field, e.g. Not Empty, Is Integer, or Is Email.
- Multiple & Size - Enable this option to allow multiple selection and enter how many options to be displayed in this field.
- Select Options - You can get value from module's table or database.
- Get value from table - Select which module's table that you wish to get the option values from.
- Get value from database - Select which database table that you wish to get the option values from.
OR
You can also manually add multiple option selections into this field. Enable 'Set as default value' to set option as default. Click on 'Save' button once you're done.
Radio Button
- Label - Insert or edit field's label that will display in your form adjacent to the radio button, e.g. 'Gender'.
- Name - This is your database field name, e.g. gender. Keep the name short, no space is allowed, and cannot be left blanked.
- vAlign & Align - Select field's alignment such as 'vAlign' (Top, Middle or Bottom) and 'Align' (Left, Center or Right).
- Location - Choose the display location for your radio button in your form either on the Left or Right.
- Display - Place your radio button on top in your form before other fields or choose to display radio button within existing fields.
- Validation - Validate field, e.g. Not Empty, Is Integer, or Is Email.
- Select Options - You can get value from module's table or database.
- Get value from table - Select which module's table that you wish to get the option values from.
- Get value from database - Select which database table that you wish to get the option values from.
OR
You can also manually add multiple option selections into this field. Enable 'Set as default value' to set option as default. Click on 'Save' button once you're done.
Checkbox
- Label - Insert or edit field's label that will display in your form adjacent to the checkbox, e.g. 'Product Type'.
- Name - This is your database field name, e.g. type. Keep the name short, no space is allowed, and cannot be left blanked.
- vAlign & Align - Select field's alignment such as 'vAlign' (Top, Middle or Bottom) and 'Align' (Left, Center or Right).
- Location - Choose the display location for your checkbox in your form either on the Left or Right.
- Display - Place your checkbox on top in your form before other fields or choose to display checkbox within existing fields.
- Validation - Validate field, e.g. Not Empty, Is Integer, or Is Email.
- Select Options - Get Value from module's table or database.
- Get value from table - Select which module's table that you wish to get the option values from.
- Get value from database - Select which database table that you wish to get the option values from.
OR
You can also manually add multiple option selections into this field. Enable 'Set as default value' to set option as default. Click on 'Save' button once you're done.
Date - The icon is shown by default when you create this field.
- Label - Insert or edit field's label that will display in your form adjacent to this field, e.g. 'Date'.
- Name - This is your database field name, e.g. date. Keep the name short, no space is allowed, and cannot be left blanked.
- vAlign & Align - Select field's alignment such as 'vAlign' (Top, Middle or Bottom) and 'Align' (Left, Center or Right).
- Location - Choose the display location for your field in your form either on the Left or Right.
- Display - Place your field in the beginning of your form before other fields or display it within existing fields.
- Width - Set your field size in pixel.
- Value - Add or edit text and value that you wish to assign to this field. Write a short tips if necessary to give users a hint of what to input in the field. If the value you wish to use is PHP code, click on the below checkbox to 'Interprete field's value as PHP code'. For example, you may wish to use return date("Y-M-D"); as your field's value.
- Validation - Validate field, e.g. Not Empty, Is Integer, or Is Email.
File - This field enable users to upload documents and images in JPG, GIF, DOC, PDF format.
- Label - Insert or edit field's label that will display in your form adjacent to textbox, e.g. 'File'.
- Name - This is your database field name, e.g. file. Keep the name short, no space is allowed, and cannot be left blanked.
- vAlign & Align - Select field's alignment such as 'vAlign' (Top, Middle or Bottom) and 'Align' (Left, Center or Right).
- Location - Choose the display location for your field in your form either on the Left or Right.
- Display - Place your field on top in your form before other fields or display it within existing fields.
- Width - Set your field size in pixel.
- Validation - Validate field, e.g. Not Empty, Is Integer, or Is Email.
Text/Label
- Label - Insert or edit text or label to display in your form.
- Name - This is your database field name. Keep the name short, no space is allowed, and cannot be left blanked.
- vAlign & Align - Select field's alignment such as 'vAlign' (Top, Middle or Bottom) and 'Align' (Left, Center or Right).
- Location - Choose the display location for your label in your form either on the Left or Right.
- Display - Place this field on top in your form before other fields or display it within existing fields.
Hidden - This field is not visible to the public in the front-end web page. It is use as counter, status (pending or active), etc.
- Label - Insert or edit text or label to display in your form.
- Name - This is your database field name. Keep the name short, no space is allowed, and cannot be left blanked.
- vAlign & Align - Select field's alignment such as 'vAlign' (Top, Middle or Bottom) and 'Align' (Left, Center or Right).
- Location - Choose the display location for your field in your form either on the Left or Right.
- Display - Place this field on top in your form before other fields or display it within existing fields.
- Width - Set field's width in pixel.
- Value - Add or edit text and value that you wish to assign to this field. Write a short tips if necessary to give users a hint of what to input in the field. If the value you wish to use is PHP code, click on the below checkbox to 'Interprete field's value as PHP code'. For example, you may wish to use return date("Y-M-D"); as your field's value.
HTML Editor
- Label - Insert or edit text or label to display in your form.
- Name - This is your database field name. Keep the name short, no space is allowed, and cannot be left blanked.
- vAlign & Align - Select field's alignment such as 'vAlign' (Top, Middle or Bottom) and 'Align' (Left, Center or Right).
- Location - Choose the display location for this HTML editor in your form either on the Left or Right.
- Display - Place your field on top in your form before other fields or display it within existing fields.
- Width & Height - Set field's width and height in pixel.
- Value - Add or edit text and value that you wish to assign to this field. Write a short tips if necessary to give users a hint of what to input in the field. If the value you wish to use is PHP code, click on the below checkbox to 'Interprete field's value as PHP code'. For example, you may wish to use return date("Y-M-D"); as your field's value.
- Validation - Validate field, e.g. Not Empty, Is Integer, or Is Email.
- Toolbar - Choose toolbar type either Default, Basic or BasicNoFont.
|
Upon Submission
|
 |
- You can preview your designed form by simply click on the 'Design Form' tab and on the same page you will find the 'Upon Submit' tab as well. You can personalize messages to display on your website after users have submitted your form.
- Use HTML editor to write the 'Thank You' message upon successful form submission (i.e. Thank you for your submission, we will follow up your request shortly). Meanwhile for unsuccessful form submission message is (i.e. We are sorry that we are unable to proceed with your submission. Please try again).
|
Run Additional Codes
|
 |
- On the same screenshot as before, you will also find the 'Run Code' tab which is used to execute additional PHP codes when users submit your 'Enquiry Form'. For e.g. You can notify users through email about successful form submission.
- You can execute additional PHP codes without PHP opening and closing tags such as <? or ?>. For your references, you can click on a list of variables and fields that you can use from the form submission data and view all of your data source tables respectively.
|
Front-End
|
 |
'Modules Builder Pro' will automatically generate the inclusion code for all the front end's page objects. Copy and paste the codes into a .php file of your client's web page, and start running your 'Desktop Computer Catalog' system. |
|
|