On Form Submission - Email Submission

Now that you are aware of the different forms, let us have a look at a scenario where we would like to submit the form and then trigger an email to, for example, the initiator or the initiator’s manager or even a specific group of people. Such email confirmation informs the concerned groups about the current status or provides an update. This in turn makes the whole application very interactive and personalized giving the user a definitely improved experience.

Hence when you are building forms, you need to keep in mind that typically the email task on form submission action is triggered on the click event of the Submit button. You need to add a separate email task for in a workflow. You can also add the email task, say for example after the Insert or Update data task that you need after the Submit button is clicked.

Let us first have a look at this video to understand how to use the Email task on Form submission.

Let us take an example to understand the process. Let us create a form to submit the image file and the supporting documents for a product. After these documents are uploaded and the form is submitted, an email confirmation would be sent to the concerned parties.

Adding form controls

So now let us add a text control for the product name and file upload control for the Product image and supporting documents . Set properties such that a single product image can be added while multiple supporting documents can also be added.

Add email task to the workflow

Now you need to add another email task to this workflow as you want to trigger an email to the specified person or group of people on submission. First add the list of users or initiators, or initiator’s manager’s email address, or a group of users and so on to whom the email has to be delivered.

All these details are stored in the User sheet wherein you can maintain user details. You can get the data from the columns for user email, manager, department, band, status, and others relevant to storing the user details.

Adding Email User options

Typically following are the options available to select the users to send the email to:

  • Email Ids: Allows you to provide specific email ids. If you want to send them to multiple recipients you can provide a command separated list of Email IDs.

  • Directly to the initiator or one who finished the previous input task: You can choose from the dropdown as an initiator or last user.

  • To a user related to the initiator or one who finished the previous input task: Email is sent to the user’s or initiator’s manager or based on any other columns of Users Sheet. among other options.

  • Directly to individual users : EMail is sent to specific users from the list of users present in the User sheet.

  • To a group of users related to the initiator or the one who finished the previous input task: The email will be sent to a group of users from a department or a specific band.

  • To a group of users based on current group filters : Email is sent to a group of users based on the filters defined for their department or band.

  • To a group of users based on group filters : Email is sent to a group of users based on filters like manager > department > specific departments.

  • Use Formula to resolve User : Email to a user derived by using a LOOKUP formula.

Adding sender details

Once you add the recipient details, you would also need to provide the sender details and then configure the email including the subject, email body, and attachments. Also, provide the sender details and the email subject and body text.

Adding custom body text with variables

The email subject and body will contain the custom body text but it also can have values that are added dynamically using variables and assigning formulas. To add the variable you can simply define the variable as {{variablename}} in the text. The variables are listed out after the Email Body section. You can bind the control data to these variables using a formula. In the illustration below we are binding the variable to the initiator name and the data for productname text control as follows:

Email body with plain and unformatted text

Now if you take a preview of this form and submit the form with all the relevant information, an email is sent to the assigned email id with the subject and email body as defined. In this example, it will also have an attachment showing the files uploaded.

The email sent on submitting data will have plain and unformatted text. However, if you want that there should be a rich view to the email text being sent, you can add an HTML text instead of plain text when you are defining the Workflow.

Email body with formatted text using HTML

If you are well versed with HTML tags, you can add the text of your choice. There is a workaround that you can consider using to add HTML if you are not aware of HTML. Add a RichText Editor to your form and a Text control. Bind the RichTextEditor control to the Text Control as shown in the illustration below. You can then copy the HTML output given by the RichTextEditor through the text control.

Preview

Now if you take a preview of the form you can design your message text in the RichText Editor. Copy the HTML code and paste it in the Email Body > HTML box. Using the HTML tags to design your email body helps in creating a well-formatted message.

Now if you take a preview of this form and submit the form with all the relevant information, an email is sent to the assigned email id with the subject and email body as defined. In this example, it will also have an attachment showing the files uploaded. Your email will have the dynamic values with the formatted text as can be seen in the illustration below.

So by adding an Email task you have been able to customize the form submission and make it more personalized wherever required.