Type: User Input
CSS Enabled: ❌
The Full Screen Form at Frontly is an alternative to the standard Form block. As its name entails, it's a form that takes up your user's entire page and brings a sleek and minimalist interface that's accessible and responsive to your all your user's inputs.
Overview of 'Basics' Functions
Below are the current options for each of the tabs you see below.
Name
When creating a Full Screen Form, like any app page at Frontly, you'll need to decide on a name for it. The name you give it will be displayed in the Navigation bar with your other [ages and forms, and will allow you to distinguish among the other forms on your app if you choose to make more than one of them.
URL
The form URL setting determines how it will be accessed within your app.
The form URL must be all lowercase with no spaces. Hyphens are allowed.
If your form URL is "onboarding", you can access your form at yourapp.frontly.ai/onboarding, or if you have a custom domain installed, it would be yourdomain.com/onboarding.
Fields
This section will serve as your form contents which will typically be your questions. For each question you wish to ask your users through your form, you will need to click 'Add Item' for each one of them. Doing so will enable you to click into the 'New Field' object which opens up a modal with the following inputs.
Notice how some of the field inputs above on the left directly correspond to the values on the Full Form preview to the right.
Here is an explanation on the remaining fields in this modal:
Field ID - Giving your field an ID is what will enable you to reference it and its values anywhere in Frontly that takes in a dynamic data source like Local States, URL Parameters, Webhooks, etc.
Field Type - Select through the different options that your users will share their inputs for this particular field. Available options are Input, Options, Text Area, Date, Image, File Upload.
Validation - You can use the settings here to determine if the active field is required (to be completed) or choose among the options if the responses must abide by a specific format (if the Field Type is set to Input).
Display Conditions - Set custom display conditions at the field level to determine when questions should / shouldn't appear. Like all Frontly conditional systems, their values can be dynamic or static, and can be responsive to the inputs of previous fields by referencing their Field IDs with the 'Form Variable'.
Example: {{ form.Question-1 }}
Click here to learn more about Local States
Click here to learn more about URL Parameters
Access
Require Login
Determine if a user is required to have an account and is logged in before accessing this form.
Display Conditions
Set criteria for the types of users or circumstances that will enable your users to access the form.
Click here to learn more about Display Conditions
Actions
Submit & Complete Action
Use either of these functions to trigger a single action or a chain of actions depending on how you want your user flow to look. Generally speaking, as a start, you will likely want to create a 'Navigate Page' action to direct your users to a new part of your app once they complete or submit the form.
Click here to learn more about Custom Actions
Additional Resources
Click on the article links below to learn more about the setup of this feature: