How to build a demo request form with Calendly

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.

Previous requirements

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:

<div class="calendly-inline-widget" style="min-width:320px;height:800px;" data-auto-load="false"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
  Calendly.initInlineWidget({
    url: 'https://calendly.com/calendar-slug/discovery?hide_event_type_details=1',
    parentElement: document.querySelector('.calendly-inline-widget'),
    prefill: {
      name: '{{fields.name}}',
      email: '{{fields.email}}'
    }
  });
</script>
<script>
  function isCalendlyEvent(e) {
    return e.data.event && e.data.event.indexOf('calendly') === 0;
  };
  window.addEventListener(
    'message',
    function (e) {
      if (isCalendlyEvent(e) && e.data.event === 'calendly.event_scheduled') {
        $form.goForward();
      }
    }
  );
</script>

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.

Haven’t you tried Arengu yet? Sign up free or schedule a demo with our team to help you to fully adapt it to your business needs.