Advanced get in touch form screen template

The advanced get in touch form enables you to notify different people by email about new form submissions according to the topic selected in the submission.

This screen is a low code screen that uses code, the purpose of this article is to explain how to configure the form to your preferences.

Get started

1. Configure the form
2. Create a new data source
3. Update the JavaScript
4. Test the screen

Step 1 – Configure the form

1. Add the “Advanced Get in Touch Form” screen template to your app using the “Add screen” button
2. Click on the form component and customize it according to your preferences. To learn more on configuring a form component see here
   Note: You must keep the “Topic” dropdown field, as this field determines who will receive the email. You can change the field label and the topics that are available if you need to, but not the Field Name
   The field names “Emails” and “Message” in the form should also not be changed, as the code will not work correctly
   

Step 2 – Create a new data source

1. Using the App Data, create a new data source
2. Add two columns to this data source: 
   1. Topic: This column should have the topic
   2. Emails: This column should have the emails of everyone that should be notified, separated by commas
3. Add one row in the data source for each topic that is available for the user to choose in the form
4. Ensure that the column names in the data source are written exactly as “Emails” and “Topic”. If the data source does not contain those fields, the code will not work
5. Save changes

Step 3 – Update the JavaScript

1. Open the screen JavaScript tab, using the development options icon on the right hand side toolbar
2. Change ‘Screen templates – Who should be contacted’, line 13 of the code, to the name of your new data source
3. Save and run

Step 4 – Test the screen

1. Click the Preview option in the top right corner on Studio
2. Fill and submit the form
3. Check if the notification was received by the correct email