Hidden Fields: What they are and how to use them

 Picture this: you are an avid Calendly user and a massive Hubspot fan. You’ve set up routing forms via Hubspot that you are now implementing into your Calendly flow, and you want to be able to pass information between the Hubspot form and your Calendly booking page without others being able to see this information. Is that possible? If so, how do you achieve it? The answer is “yes” – it’s possible! The “how” is by using hidden fields (paired with UTM parameters) to pass information between the two. Hidden fields are an invisible-yet-powerful tool that can be used to send information which you don’t want others seeing from one form to another, or from your Calendly booking page to your website -- and more. 

What are hidden fields? 

We’ve all typed something into Google only to populate overwhelming results that are unclear. “Hidden fields” might very well have been one of those subjects for you, until now (I hope!) – at least as far as hidden fields pertain to Calendly. By the end of this article, you should feel confident in your ability to explore your own use of hidden fields + UTM parameters. Onward! 

🗒️ NOTE: I recommend the assistance of a developer for more advanced attempts at customizing your booking flow, using our API Reference or Developer Portal and setting up advanced embeds, all topics touched on in this article. 

When setting up your Calendly account, there are a couple of instances in which you might want to pass hidden information from one page to another so that it’s not on display for all to see. 

When can I use hidden fields? 

You might be looking for a way to pass hidden data using custom parameters or hidden fields. We don't currently have a way to pass custom parameters, but it is possible to do this using UTM parameters. You can use UTM parameters when embedding your Calendly booking page or event type on a website, for example. You can also use hidden fields in relation to Calendly Routing Forms, which we will cover below! 

💡 Use case example: 

• You are integrating Calendly with Hubspot Forms 
• You can build routes using responses collected in a hidden field
• These responses will pass to the form without being visible to the user/invitee
• You can continue passing the UTM parameters and tracking data from your HubSpot form to the Calendly booking page or external URL, as well
• You can also redirect your Calendly invitee from your booking page to another website/form
  • Go to your event type in Calendly that leads are routed to
  • Go to the Confirmation Page under Additional Options
  • Select to redirect to an external URL under On Confirmation
  • More detailed information can be found here

UTM Parameters

The best way to pass hidden data is to use UTM parameters. When you add these to your scheduling URL, this data will then be associated with the event (in your Scheduled Events tab, in our webhook payloads, and when calling invitee data via our v2 API)! More information about using UTM parameters can be found right here in our Help Center. 

🗒️ NOTE: There is a 255 character limit for UTM values. Values that exceed this limit may not be passed.

While UTM parameters are typically used for tracking and conversion purposes, you can also use other values in these such as a user ID or anything else you need to track. I'd recommend choosing a parameter you are not otherwise using for tracking/analytics - utm_term is generally the least used for this.

This Help Center page is also a great reference for passing UTM parameters specifically to a Calendly embed.

Speaking of embeds…

You can track the source of your invitee in your embed using UTM parameters. The parameters mentioned above will come in handy here!

Alternatively, you have a few other changes you can make to your embed code to track sources, outlined below. 

Map the UTM parameters and values to the URL inside the embed code

You can add UTM parameters directly by modifying Javascript calls. These UTMs will be tracked throughout the booking flow. The parameters manually set will overwrite those set in the parent window.

To achieve this, use the help of a web developer to dynamically pass parameters from a website URL into the objects of the advanced embed code.

Calendly.initInlineWidget({

     url: 'https://calendly.com/YOUR_LINK/30min',

     utm: {

         utmCampaign: "Spring Sale 2019",

         utmSource: "Facebook",

         utmMedium: "Ad",

         utmContent: "Shoe and Shirts",

         utmTerm: "Spring"

    }

});

Add a dynamic query string

Another option is to add a dynamic query string within the embedded Calendly URL, and map the values dynamically from your site’s URL.

<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_LINK/30min?

utm_source={source}" style="min-width:320px;height:630px;"></div>

Hardcode a parameter to the embed code

You can hardcode a parameter to the embed code itself and have a different page view (and embed) render depending on where the click is coming.

<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_LINK/30min?

utm_source=facebook" style="min-width:320px;height:630px;"></div>

Now that we’ve gone over embeds + UTM parameters, you should have a decent idea of one way that hidden fields can benefit you when you are setting up your Calendly booking page. I also briefly mentioned above that another way you can implement hidden fields is with Calendly Routing Forms. How exactly do you bring the two together? Keep reading!

Firstly, it’s important to understand what Calendly routing is and the options that are available to you within the Routing-Universe. 

Calendly Routing Forms

A la carte lead routing created and managed within Calendly (not connected to other tools).

Native Calendly Routing forms let you request information such as industry, company size, specific interests, etc. from website visitors and automatically direct them to a specific scheduling or web page based on their responses. It's great for screening and qualifying sales leads on a website or matching clients or students to the booking page of the right subject-matter expert based on their interests, program, or other criteria. You can read more about setting up routing forms, here! You can also read more about native routing at the links below: 

• Routing forms best practices
• Let invitees choose who to meet with using routing forms

🗒️ NOTE: Native Calendly Routing Forms are available to owners, admins and group admins on our Teams and Enterprise plans. 

Advanced Routing Forms

More sophisticated and integrated lead routing that ties into your existing sales tech stack and workflow.

In addition to the native routing solution that Calendly offers, users on our Teams and Enterprise plans also have the option to set up advanced routing with a number of different solutions/platform integrations. Click on each of the options below to learn more about those different routing solutions. 

• Setup routing from Marketo forms
• Setup routing from Pardot forms
• Setup routing from Hubspot forms
• Setup routing with Hubspot lookup
• Setup routing with Salesforce lookup

Lastly, this page walks you through a step-by-step overview of all Calendly Routing solutions. Check it out! 

That finally brings us back to hidden fields, full-circle!

Hidden field and data enriched routing

Use hidden fields in a Marketo or Hubspot form to create logic in Calendly to route by UTM parameters such as landing page source, or fields enriched by Clearbit with things like job title, company size, or revenue.

In closing, we’ve gone over hidden fields, what they are and how to use them. UTM parameters and routing forms go hand-in-hand with hidden fields when paired with Calendly, and now you’ve learned about how to implement hidden fields in both of those instances. 

If you have questions or comments about hidden fields or anything else discussed in this article, leave them below. ⤵️ We want to hear them!

Until next time, have a wonderful day and happy scheduling! 🗓️