You can add forms to your app in Builder using a third-party form or one you create yourself.
This example uses a Google form; however, the principles are the same for most third-party forms that feature sharing.
- In your Google form, click Send.
- Go to the Send via section and choose the URL icon. Click the Copy button.
- In Builder, go to the Insert tab, open the Media section, and drag and drop the Embed block onto your work area.
- Click Edit and in the URL field, paste the URL you copied from your Google Form.
The following video demonstrates these steps using the Builder Documentation Feedback form.
Tip: You must have Developer permissions to edit the Custom Code field.
This example uses a Google form; however, the principles are the same for most third-party forms that feature sharing.
- In your Google form, click Send.
- Go to the Send via section and choose the code icon. Click the Copy button.
- In Builder, go to the Insert tab, open the Code section, and drag and drop the Custom code block onto your work area.
- Click Edit and paste the code you copied from your Google Form.
The following video shows adding a Google form — in this example, the Builder Documentation Feedback form.
In addition to using third-party forms in Builder, you can create your own, completely custom forms in the Visual Editor.
Because forms help your users submit data, there are two main parts to a form:
- The user interface (UI) with inputs, labels, and buttons.
- The code in the background that does something with the submitted data.
When you use a third-party form, such as a Google form, the code for dealing with the data is already in place. However, when you create your own form from scratch, you must also set up the code to process the data.
These instructions are for building the form UI — you still need a developer to connect your custom form to the backend.
- From the Forms section in the Insert tab, drag and drop a Form block onto the work area.
- To add more form elements, drag in the appropriate blocks from the Forms section of the Insert tab and drop them on your form. For steps on adding different kinds of inputs, see the next section.
- Contact your developer to connect your new form to the backend.
When adding more inputs, make sure you name them according to the data they are associated with. For example, if you add a field to gather a user's address, you could name the input address. This is important for handling the data when users submit their forms.
The following video shows creating and styling the form:
When you create custom forms, you can specify what kinds of inputs you need. For example, you can add a date picker, a password field, or a telephone input, to name a few.
Make sure you already have a custom form, as instructed in the last section.
Add an input
- From the Forms section in the Insert tab, drag and drop an Input block onto your form.
- Click on the Edit button and do two things; choose a Type, and edit the name of your Input.
Give the input a label
- From the Forms section in the Insert tab, drag and drop a Label block onto your form.
- Click on the Edit button and edit the name of your Label.
- Still in the Edit dialogue, specify which input this label is for. Make sure this matches exactly what you named the input.
Contact your developer to connect your new inputs to the backend.
When adding more inputs, make sure you name them according to the data they are associated with. For example, if you add a field to gather a user's address, you could name the input address. This is important for handling the data when users submit their forms.
The following video shows these steps with the checkbox input type as an example and includes basic styling.
Tip: To edit the settings of an input with a Type of hidden, open the Layers tab, select the hidden input layer, and click on the Options tab.
for developers
When a user submits data through your form, you need to have some way to handle the data. You have several options:
- Send to an email address
- Specify a URL to send the data to, with or without JavaScript
- Create a custom action for on submit through the Data tab and handle the data manually
Sending form data to an email address
- Open the Edit dialogue for your form.
- Check that Send submissions to is set to Send to email, which is the default.
- In the Send submissions to field, enter the email address that should receive the form data.
Tip: Note that the Send to email option has a maximum size for form attachments of 30MB.
Sending form data to a URL
- Open the Edit dialogue for your form.
- Check that Send submissions to is set to Custom.
- In the Action field, enter the URL that you want to send your data to.
Creating a custom action
As this option is deeply customized, we recommend referencing Connecting Your API Data to Builder, and Building Interactivity with State and Actions for more context and ideas for leveraging this feature.
- In the Data tab, open the Element events section.
- Select Submit from the on dropdown.
- Click the Edit Action button.
- In the dialogue that opens, click the +Action button.
- Choose Custom Code.
- Paste in your code.
The following video shows where each of these options are in the Visual Editor.
When you are finished with your form and want to reuse it throughout your app, you can save it as a Template. See Creating Templates for more information.
For more interactive content development, read about Building Interactivity Using State and Actions.
