Flexi Form enables users to create dynamic and interactive forms tailored to their specific requirements within applications or websites. Fuzen allows you to easily add such flexi forms to your SaaS apps.
To add a flexi form to your page, click on “Add New Block”.
Then select UI Element as the block type.
Select “Flexi Form” from the block dropdown. Then select the data collection in which all the data entered in this form will be stored.
Select the fields from the data collection that you want to add to your form.
Keep the new entry as true, if you wish to open a fresh blank form whenever the page is refreshed, or keep the entry as false if you want the display the data that is saved in the form.
Provide all the required fields for the form.
Now give the button a name and manage it’s width & color. You can also adjust the position of the button.
Now link your form to the page where it should be redirected after the form is submitted.
Finally, adjust the margin and padding of the form.
Padding: Padding is the space that’s inside the element between the element and the border.
Margin: Margin is the space between the border and the next element of your design.
Click on Add and save the HTML. Your Flexi Form is now added.
Advance Settings
Whenever you add a flexi form to your SaaS app, you may want to change the field label, add some hidden field, change the type of the field (eg. change the field with text type to a dropdown type), add a predefined value or add options from some data variable.
Flexi form also allows you to adjust the size of any form field. This can help you to improve the design of the form.
This can be done from the advanced setting of the flexi form.
For this click on the settings icon in front of the form fields.
A pop-up will open where you can make all the edits.
This section can be used to make the following changes:
Change the label of the field.
Change the type of the field. (Eg: change the type from text to select)
Add a predefined value to the field. Or enter a predefined variable using the data variable. This can be done by clicking on the toggle button and then selecting the data variable.
Edit the options used in the dropdown, checkbox, radio button, etc.
To dynamically load options from the database. For this click on the toggle button, then select the data variable and then select the attributes which will be displayed in the dropdown and dropdown value to be saved.
To add team members as dropdown options.
To adjust the size of the field. You can check the preview of the field in the Preview section.
Make all the changes and click on “Save Advance Settings” button. Finally, save or update the form.
Edit Flexi Form
As your app evolves, you may want to edit the Flexi form later. For this, go to the “Build with no-code” page and click on the block that you want to edit.
A Edit form for that block will open on the left side. Make all the required changes and click on Update.
Adding New Fields To Form
After adding your flexi form to the page, you may later want to add new fields to the form. For this, you don’t have to delete the current form and add a new one.
You can simply use the refresh field option in the edit section of the flexi form.
For this, first, add the required fields in the data collection.
Then go to the edit section of the flexi form.
Click on the refresh field button. The newly added fields in data collection gets added to the checklist.
Select the fields and click on the update.