Working with Forms
Last updated
Last updated
Traditionally, creating forms for your webpage may seem standard but can be incredibly difficult to set up across different device views with a custom look that fits the style of your webpage. Quest makes it super easy to create robust forms that work reliably, with clean code and with any custom design that will fit with your brand.
In order to set up forms, the group / layer structure needs to be in a specific order. The easiest way to see that order is to check out the link below. Even easier still is just to copy and paste the forms from that file into your design and then to restyle them.
https://www.figma.com/community/file/999797902053948866/Quest---Components-Kit
This is an example of how the layer structure should look for “Input Field”. Each form type has its own layer structure and amount of children. Make sure to copy these exactly.
To use it, click on the top parent of the Input Field, in this case called “Input Field” and add the Input Field from the Features drop-down in the right panel. This will only work if you click on the correct parent layer in Quest to add the feature because otherwise that would mean the children layers’ order or naming are not correct.
Note:
You can change the parent name to anything you’d like. It doesn’t have to be “Input Field” it can be “Email” for instance. What matters is the children’s names and order.
In the example above, the different Form related features are:
Input Field
Text Area
Checkbox
Submit Form Data
Input Field
Adding this feature to an input group/frame in your design will give you several options.
First, you have the option of what type of field you want this to be. By default, this is simply any text character the user wants to enter. Choosing “password” and every thing the user types will be hidden and a default “•” character. Choosing “email” will not limit what the user inputs but when paired with the “Required” option (more on this below) it will validate if the user correctly entered an email address.
Next, you have a max character count. This is off by default but you can choose to limit how many characters total the user can input into the field.
The third option is how you want to handle the placeholder text for the field. By default, Quest will convert the text into placeholder text which means it will look slightly less dark than dark text. You can also choose to remove any placeholder text completely and have it be a blank field until the user starts typing.
Last, is the toggle to say if this field is required. Required fields will show a warning from the validation group and will not allow the data to be sent unless they are filled in. This validation will only take place / show when the user presses the submit button using the “Send Form Data” action (see more on this below).
From the design:
The area for the text itself is driven by the design file. Make sure to carefully adjust the text box size to what is desired. And validation messages are also driven from the design file so feel free to tweak the text position, color, style or text in the message itself.
Text Area
Text Area has the same options as Input Field so refer to that above for more details.
There are 2 main differences.
First, Text Area’s text will not infinitely scroll to the right but wrap at the end of the Text Box. If a user types a ton of text into this field, it may start to scroll and show a scrollbar unless there’s a character limit set before that can happen.
Second, there is no type option for this feature and any and all text entered will be part of the field.
From the design:
The area for the text itself is driven by the design file. Make sure to carefully adjust the text box size to what is desired. Unlike Input Text, this field also needs to take height into consideration so be careful as you can’t see the outline of the text box in your design unless it is selected. Again, validation messages are also driven from the design file so feel free to tweak the text position, color, style or text in the message itself.
Checkbox
Checkboxes simply have the option to either be checked on Page Load or not. Also, you can set them up to be a required input by the user or not.
From the design:
The size of both the checkbox and the check inside of it come from the design file. Feel free to tweak as necessary and experiment with various styles of checkboxes including checkboxes with animations or videos as the check themselves. Or not but basically you’re free to dream then do. Validation messages are also driven from the design file so feel free to tweak the text position, color, style or text in the message itself.
Send Form Data
A form “Submit” button can be anything on the page and the children's name, order, or number does not matter. Simply assign the “Send Data Form” feature from the “Click/Tap” feature to any layer or group in your design.
This will give you the ability to submit the data on the page as an email. You will need to fill out the email field with the address you’d like it to send to. It will only send the data if the user has filled out the form fields correctly and if all fields that have been marked as required are filled out.
Last, you have the option to clear all the fields on the page once a user submits it. This will reset all inputs, text area boxes, or checkboxes to their original state that is shown when the page is loaded.
Pro Tip:
If you want to have the form send to more than one email address, in the email field, simply use a comma/s after the email address to send to more than one.
Note:
Once the forms are in your own designs / the different Figma frames, you’ll want to be sure they are unified if you want the data to be the same across all frames. Please see the Lesson on Unified Divs to learn more about this.
If you want them all to be the same but don’t want to worry about setting up every layer to be unified, a simply way to do this is just to keep all your forms inside 1 frame that sits on the top-layer of on all your frames / device views you want to include as a single page.
