Guides & tutorials
Guides & tutorials
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:
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:
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.
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.
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.
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.
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.
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.