Form Builder Basics (Quick Guide) | FB_003
In this tutorial, we'll take a very quick look at the fundamental capabilities of the Infigo Form Builder. This piece of functionality allows you to easily configure variable product templates, whilst giving your users a minimalist, user-friendly form with which to interact with it.
1. Begin by creating a MegaEdit product and navigating to its MegaEdit config settings
2. Click on Scripts
Be sure to apply resources such as canvas, fonts, stock, etc to your MegaEdit product in the usual way.
Before we can use the Infigo Form Builder, we need to ensure the relevant script is active.
3. Enable the relevant script
At the time of creation, this script is named Form Builder Refactor, however there is a high possibility the name has been altered prior to official release. Information will be available on the Infigo Academy as to the script to look out for, should the name have been changed.
4. Click on Save changes
5. Launch the MegaEdit product on the storefront front end
6. Click on Custom Tab
With the Infigo Form Builder enabled, a new tab will be available on the MegaEdit left pane.
This contains all of the configuration options for the Infigo Form Builder.
7. Click on Page
We can use the form builder to control whole-page elements such as:
Page name
Background
Layout
With backgrounds and layouts, once selection has been enabled, the administrator is able to pick and choose which background or layout categories the customer will be able to select from. This is accomplished using simple to use toggles.
8. Background or Layout change options will be shown on the form to the right of the screen
NOTE: The form to the right is what your end users will eventually see. Your users will not be able to interact with the Custom Tab, on which you are configuring the form.
9. Click on Fields
Next, we can configure individual fields present on the canvas.
Each field will have its own set of configuration options available within the Custom Tab.
10. Enter field names
11. Select the order in which these fields are to appear on your customer facing form
The lower the number, the higher up the form it appears.
12. Specify how your end users will be able to interact with this field on the canvas
This set of toggles includes options such as preventing field deletion, preventing selection and preventing movement.
13. Access more advanced configuration options for each field by clicking the gear icon
14. For a text field, select the format you require the data to be input. Such as a date, single line of text or area of text
15. By default, your form will be contain a range of formatting options
16. Remove these by clicking No formatting options
17. Inputting text into the main form will automatically place the text in the associated frame on the canvas
18. Text on the canvas
19. Next, we'll configure our image field to be controlled by the form
20. Specify that you wish the image field to be populated with clipart
21. Select applicable clipart categories
22. The image field can now be controlled from the main form
23. Use the form to navigate available imagery
24. Populated image field
