Adding personalized form fields to Calendly booking without using the default widget

I’m trying to figure out how to add my own custom form fields to a Calendly booking request. The goal is to have these additional fields show up in the confirmation emails that both me and my clients get after someone books an appointment.

I’ve looked through the official docs about adding invitee questions, but that seems to only work with the iframe widget approach. What I need is different - I want to programmatically add extra fields when the booking form gets submitted.

Has anyone managed to do this using JavaScript or any other method? I’m looking for a way to extend the default Calendly form functionality to include additional data collection beyond what’s available in the standard widget setup.

// Example of what I'm trying to achieve
const bookingData = {
  name: 'John Smith',
  email: '[email protected]',
  customField1: 'Marketing Department',
  customField2: 'Product Demo Request'
};

// Want to send this data along with the Calendly booking
sendCalendlyBooking(bookingData);

Any suggestions on how to implement this would be really helpful.

yeah, solid plan! separating the custom fields is smart. just double-check ur form and webhook can handle that unique ID properly. takes some setup but you’ll love having that extra data.

Been down this road before with client projects. Calendly won’t let you inject custom fields directly into their booking flow through JavaScript - they lock that down tight for security.

Here’s what works:

Use Calendly webhooks to catch the booking, then immediately show your own form for the extra data. Set this up last year for a sales team needing lead source tracking.

Flow: User books → Calendly webhook hits your server → Redirect to quick custom form → Merge data with booking info → Send enriched confirmation emails.

The webhook gives you the booking UUID so you can link everything together. Handle cases where people close their browser before filling your form.

Or flip it - collect your data first with your own form, store it temporarily, then redirect to Calendly with URL parameters. You can pass some data through utm_campaign and similar fields that show up in their system.

Calendly’s API is read-only for most plans, so you can’t modify bookings after unless you’re on Enterprise.

Webhooks work but they’re overkill here. You’ll end up managing two separate systems that constantly need to stay synced.

I’ve dealt with this exact problem multiple times. Automation platforms handle it much cleaner - create a flow that captures your custom fields first, stores them temporarily, then triggers the Calendly booking with everything preserved.

You get one smooth form experience instead of bouncing users around. No webhook delays, no dropoffs between steps, and confirmation emails automatically include all the details.

Use conditional logic so different booking types collect different fields. Sales demos get lead source and company size, support calls get priority and issue type - whatever you need.

Everything connects through the booking reference. You can even trigger follow-ups based on those custom field values. Way more flexible than hacking around Calendly’s limitations.

Check out Latenode - it handles form logic, data storage, and Calendly integration in one place: https://latenode.com