The Form tool creates the HTML of a form only, and you would have to insert your own JavaScript into its exported HTML to make it work.
We usually recommend adding your own JavaScript in the final HTML to capture the form output. You can look for all elements that are in the ".u_content_form form" and apply it onSubmit callback and then capture the input.
To add an action to the submit button in the Form Tool on Unlayer, you can define pre-defined actions for the form submission endpoint within the Unlayer initialization script.
Here's how you can do it:
1. Initialize Unlayer with the unlayer.init method.
2. Within the tools object, specify the form tool.
3. Define the properties object for the form tool.
4. Within properties, specify the action object.
5. In the action object, use the editor object to define the dataobject.
6. Within data, provide an array of actions. Each action should be an object that includes the following attributes:
• label: A string that users will see in the dropdown if there are multiple actions.
• method: The HTTP method for your endpoint, such as GET or POST.
• url: The URL where the form will submit.
• target: Optionally, you can specify the target window where the form will submit, such as _blank to open in a new tab.
Here is an example of how you might configure the submit actions:
unlayer.init({ tools: { form: { properties: { action: { editor: { data: { actions: [ { label: 'Marketing', method: 'POST', url: 'http://yourdomain.com/marketing-form-submission', }, { label: 'Sales', method: 'POST', target: '_blank', url: 'http://yourdomain.com/sales-form-submission', } ] } } } } } } });
In this example, when the user submits the form, they will have the option to choose between two actions: one labeled "Marketing" and another labeled "Sales". Depending on the selection, the form data will be submitted to the corresponding URL using the POST method. The 'Sales' action will open the submission in a new tab because of the _blank target attribute.
Remember to replace http://yourdomain.com/marketing-form-submission and http://yourdomain.com/sales-form-submission with the actual URLs where you want to process the form submissions.
If you want to allow end-users to add a custom URL for the submit action, you can set allowCustomUrl to true within the data object.