Create a form

Building forms with Mation is easy. The best way to learn is to start with a general example, followed by a simple use case.

NOTE

Forms can only be used within flows, they do not function independently. You need to create a flow to preview your form.

Build the form

In this example, we're setting up a form that includes all available field types and options.

INFO

This form itself has no real use case, its only purpose is to illustrate how to add all available field types.

1. Go to the Forms page. Click the + Create form button to create a new form.

2. Start by filling in the basic fields. Name and Display Name are required fields.

   INFO

   Required form fields (marked with an asterisk) must be completed for the form to work.

   

3. Assign a Name. This is the name under which the form will appear in the Dashboard.

4. Specify a Display Name, this is the form title shown when the flow runs.

5. Add a brief Description of the form’s purpose, so users know what to expect.

6. Enter the Submit Button Text, for example "Send", "Submit", or "Next".

7. Provide the Response Message, e.g. "Form successfully sent".

8. Set up the first form field. Enter a Field name (e.g. Last name), then select a Type. Options include String (default), Checkbox, Dropdown, Multiline, Date, Time, and Date & Time.

9. All field Types include the Required and Readonly checkbox options.

10. The String field type also offers an additional Validation format dropdown, allowing you to validate input as Email, URL, Phone number, Number, Letters and numbers only, Custom pattern (Regex), or leave it unvalidated.

11. Let's validate the text input. Choose Custom pattern, then add a Regex pattern, e.g. ^[a-zA-Z ]+$ to allow only for letters. Add a validation message, like "Sorry, only alphabetic characters are allowed!". Select the Required checkbox.

    TIP

    Learn more about Regex patterns here.

    

12. Then, click the Add field + button underneath to insert a new field.

13. A blank form section appears.

14. Let's add a Multiline text field and name it Text area, for example. This is the form field that will contain the written message. Check the Required checkbox.

15. Use the Add field + button at the bottom again. Another blank form section appears. Insert a Field name (e.g. Dropdown list) and select Dropdown as the field type. Then click the Add option + button and add a few options to choose from.

16. Press the Add field + button underneath. Another empty form section is shown. Enter a Field name (e.g. Date), choose Date as the field type and make it required.

17. Click the Add field + button underneath. Another blank form section is displayed. Add a Field name (e.g. Time), select Time as the field type and check the Readonly checkbox.

18. Hit the Add field + button again. Another blank form section appears. Enter a Field name (e.g. Date and time), choose Date & Time as the field type and make it Readonly.

19. Click the Create button.

20. Your new form has been successfully created. You’ve been redirected to the Forms page, where it is now listed.

Prefilled and hidden fields

1. This view displays a sample Newsletter Signup form with no prefilled data.
2. You can prefill fields by adding tokens to the URL.
3. You may include either visible or hidden information in the URL.
4. As an example, tokens can be used to prefill the Name and Email fields and automatically select the checkbox by default.
5. Tokens added to the URL are reflected in the form. The Name and Email address fields are prefilled, and the checkbox is checked automatically.
6. You can also add a token to include information that remains hidden while the user fills out the form.
7. Click the Register now button to submit the form.
8. Navigate to Executions to verify the form has been successfully transmitted.
9. Select your flow from the list.
10. Go to DATA OUT.
11. The tokens submitted throught the URL have been transmitted successfully.

Edit a form

1. To make changes to a form, navigate to the Forms page and select it from the list.

2. The form can now be edited.

3. Let's assume we would like to permanently delete Option 3 from the Dropdown, as well as remove the Time and Date & Time fields. To remove a form element, click the – (minus) button to the right of the field.

   DANGER

   Once a form element is deleted it is permanently removed and cannot be retrieved!

   

4. The selected form elements have been successfully removed. Click the + Add field button if you would like to add a new field to your form.

5. Press the Update button to save your changes.

6. You’ve been redirected to the Forms page, where your updated form is listed.

Delete a form

1. Go to the Forms page.
2. Click the meatballs menu (...) on the right to delete a form.
3. Press Delete to permanently remove the form.

Example use case

Let's assume we would like to create a form that triggers a flow that fetches new form submissions and then sends them to a Slack channel.

This example shows how to build a simple form where users enter their Name and Email address, agree to the Terms & Services via a checkbox, and click the Submit button. Both text fields and the checkbox are required. Input validation will also be applied to the text fields.

1. Go to the Forms page. Click the + Create form button to create a new form.
2. Assign a Name, for instance "Form to Slack".
3. Specify a Display Name, e.g. "Newsletter Signup".
4. Add a brief Description, for example "Sign up for our newsletter".
5. Enter the Submit Button Text, e.g. "Register for free".
6. Provide the Response Message, like "Thank you for signing up!".
7. Set up the first text field. Enter Name as the Field name. The default type, String, is already selected.
8. Let's validate the text input. Choose Custom pattern, then add a Regex pattern, e.g. ^[a-zA-Z ]+$ to allow only for letters. Add a validation message, like "Sorry, only alphabetic characters are allowed!". Select the Required checkbox.
9. Add a new field and enter Email address as the Field name. The default type, String, is already selected.
10. Let's validate the text input. Choose Email and check the Required checkbox.
11. Add a new field, name it Terms and Services and select Checkbox from the dropdown. Click the Required option.
12. Click the Create button.
13. Your form has been successfully created.
14. Start using your new form with Mation.

Preview the form

Prerequisites

This guide assumes you have a Slack account and a channel set up to receive data.

1. Navigate to the Flows page.

2. Click the + Create Flow button.

3. Assign a meaningful name to your flow.

4. In the Choose app & event section select Forms from the list.

5. Choose New form submission as the event. Click the Continue button.

6. The Set up a trigger section opens up.

7. Select your Form in the Form field dropdown.

8. Select either Yes or No in the Wait until flow is done dropdown.

9. Choose to either provide an Async redirect URL to redirect users before flow completion, or alternatively leave empty to show the Response message. Click the Continue button.

10. Go back to the Set up a trigger section.

11. Click the link to preview your form!

12. A new tab with your form opens.

13. Enter a Name and Email address.

14. Tick the Terms and Services checkbox and click the Submit button.

15. The form has been submitted sucessfully and the Response message is displayed.

    TIP

    If your only goal is to preview the form, you can stop here. Otherwise, continue setting up the flow.

    NOTE

    You have to fill in the form and submit it, otherwise the Test Trigger step will produce an error message!

16. Click the Test & Continue button to verify everything works as expected.

17. The trigger has been tested successfully.

18. Click the Continue button.

19. Configure the Action step.

20. Choose Slack from the list.

21. Select Send a message to channel as the event.

22. Click the Continue button.

23. Choose your Slack connection.

24. Click the Continue button.

25. Select the channel you would like to use.

26. Enter the Message text. Then choose how you would like to send the message in the Send as a bot? dropdown. Available options are SEND AS A BOT? and CUSTOM. Decide if you want to SEND AS A BOT? (Yes/No). Alternatively, choose CUSTOM if you want to send the content of a submitted form field.

27. In this case simply select SEND AS A BOT? and choose No.

28. Click the Continue button.

29. Let's test the Action step. Click the Test & Continue button.

30. The test is successful.

31. Click the Continue button. The flow is ready for publication.

32. Click the Publish button.

33. The flow has been published successfully.