1.  Form as it is - The whole form is embedded on the page.
   
   Click Done in the Form Embed Configuration pane that slides open to embed the form on the page. If required, you can configure further properties and set default field values before clicking Done.

Note: To save the configuration and embed the form as a button on the page, you can click the X icon on the top-right corner.

Alternately, you can configure custom display, action, and style properties for the button, and text or image panel elements can be added to give more context. To learn more about the button as a panel element, check out the Understanding panels page.

2. Additional configurations

Note: The below sections are applicable only when a Creator form is embedded as it is onto a page. If it is embedded as a button, read on how the display, action, and style properties for the button can be configured.

2.1. Configure properties for the embedded form

Once a form is embedded as it is on a page, you can set placeholder values for fields, customize button labels, and more. This can be done from the Form Embed Configuration pane that appears when you add or edit the element.

1. Enter field values for the following interface elements for the embedded form:

1. Success message - The toaster message that appears once a record is submitted through the embedded form.
2. Submit button text - The label of the submission CTA for the embedded form.
3. Reset button text (applicable only for web device) - The label of the refresh CTA for the embedded form. Clicking this button will remove all the field inputs.
   

2. Choose an option under Redirect to dropdown to navigate the end-user once a record is submitted:

1. None - No redirection happens
   
2. Form - A form from any application within the current Creator account
3. Report - A report from any application within the current Creator account
4. Page - A page from any application within the current Creator account
5. Website URL - Any public or private URL that the end-user may have access to
   

 

Note:

a) If Form, Report, or Page is selected, choose the required component as well from the dropdown that appears. Click Change App to choose a component from another application within the same Creator account.

b) Further, select if you want to open the target component in the Same window or in a New window.
 

3. Choose to enable Allow public access for the embedded form. This ensures that the embedded element is visible when the current page is published, given that the form is published as well.

Note: By default, Allow public access will be disabled, which can be switched if required.

4. Click Done to save the configuration.

Further, you can configure and display auto-filled initial field values specifically for the embedded form, on load of the page. The steps to set default field values are mentioned in the next section.

2.2. Autofill initial field values on the embedded form

Once a form is embedded as it is on a page, follow the below steps in the Form Embed Configuration pane that appears. Alternately, you can also double click on the embedded form to open its configuration.

1. Navigate to the Field values tab in the Form Embed Configuration pane and click Configure field values.

2. Enter a default value for the listed field. This value will auto-fill the input area in the live mode of the embedded form. You can also include preconfigured page variables as the value using the format "${<pagevariable>}".

 

3. Click + Add New Value to choose more fields from the target form to set default values for them as well.

Note:

1. The fields that are not supported for auto-filling on load of the embedded form are Auto Number, QR/Barcode, Add Notes, and Section.
2. Hover over the required field and click the bin icon to remove the default values entered for them.
   

4. Click Done to save the configuration. The changes will reflect in the live mode of the application.

3. Managing embedded forms

1. Add Element Name - Click the pencil () icon in the top right corner of the Form Embed Configuration pane to edit the element's name. This name can be used to locate the specific element in the page builder among others.
2. Click Change form to choose another form from any application in the current Creator account to be embedded instead. The configurations are reset when the form is switched.

Once you're done configuring the embedded form, click the () icon to navigate back to the page builder. You can further manage the embedded form from there, such as relocating its position on the page, giving it a live mode title, and more.

 

1. Adding a title - Click the T icon to give a title for your embedded form element. This will appear as a heading above the embedded form in the live mode of the application. Once inserted, click the embedded form's title to format it using the below options:
   
1. Font family - Choose from six different font types in the dropdown.
2. Font size - Choose a size from 12 - 40 px in the dropdown. The default value is 20px.
3. Bold - Click the B icon to embolden the title.
4. Font style - Click the I icon to italicize the title.
5. Font color - Click the A icon to choose a matching color for the title.
6. Update title - Double click the inserted title to update it.
7. Remove title - Select the embedded form element and click the T icon again to remove it.
   
2. Adjusting height of the embedded form - Click the  icon to set the height of the embedded element to Auto or a Custom length.
   

Note:

1. By default, the height of the embedded element is set to Auto.
   
2. If Custom is chosen, the default value mentioned is 150 px which can be altered according to the requirement.
   

1. Deleting embedded element - Click the bin icon to remove the form element from the page.
   
2. Relocating an embedded form - Drag and drop an embedded form elsewhere on the page builder to relocate it.