Today, you will learn how to easily build a demo request form for your SaaS.
Discover how to build a form that integrates Calendly to allow the user to choose the day and time of the demo, in the time slots you have configured.
To build this use case you just need:
- A Calendly account, to set the day and time of the meeting.
- An Arengu account, to build the form and embed the calendar.
1. Create the form steps
Go to Arengu’s form editor and start one from scratch. In the first step of the form, include two ‘Text’ fields, to ask for the user name and the company name, and an ‘Email’ field to ask for an email address.
Click on each field to open the settings and configure them as follows:
- ID: change them to ‘name’, ‘email’, and ‘company’ to make them easier to reference.
- Required: enable this checkbox on each one to make them mandatory.
Then, click on the plus button to add a second step to the form and include a HTML block in it. We will use it to embed the calendar and to run a script that will submit the form automatically, once the user has chosen the date and time of the meeting.
To configure it, copy this code and paste it into the ‘Source code’ field of the HTML block:
To use your own calendar, just replace the 'calendar-slug' string with your calendar’s slug.
2. Get your calendar’s slug
Login to Calendly and go to your dashboard. Just click on the ‘Copy link’ button of the proper calendar to get it.
You can edit it under Account > Account Settings > My link. Just remember that if you are already using it somewhere, after changing it, it will stop working there.
3. Paste the slug in Arengu
Finally, go back to the form and paste it in the source code of the HTML block.
Once everything is set up, click on the ‘Publish’ button to publish the form.
4. Trigger after-submission actions
For example, you can send custom notifications to a Slack channel or send the contact data to your CRM. To do this, you just need to create an after-submission flow connected to the form and configure the proper native actions.
Click on the ‘Flows’ tab of the light menu and then on the plus button to create a flow in the proper stage of the form. You can also add logic between form steps, for example, to connect it with a data enrichment service and get data from the user without asking for it.
6. Customize form styles
You can modify the design in the ‘Design’ tab using specific color pickers. Plus, if you have CSS skills, you can use all these styling variables to perfectly adapt it to your brand.
7. Preview, test and embed
Go back to the form editor, click on the ‘Preview’ button and test it. Then you can check if everything is working properly on the ‘Executions’ tab of the flow linked to the form.
You can get the code to embed it in any stack in the 'Embed' tab of the form editor. Just choose if you want to embed it inline or as a popup and follow the instructions.