Steal Violet Rollergirl’s Booking Form Code

As described on my colophon, my booking form technique offers a number of advantages over form services such as Google Forms, JotForm, TypeForm, and any other server-side form solution. This page offers some help for how to make your booking form work like mine.

My form code works through “convention over configuration.” That just means you have to use some sensible names for your booking form fields and then the code will pick up on the rest.

On this page

1. Before you begin
2. Quick start
3. Choosing the form to observe
4. Choosing a custom email address for delivery
5. Modifying the message that gets written
6. Recognized form field names
7. Choosing contact links to use
   1. Supported contact methods

Before you begin

You will need:

• Rudimentary knowledge of HTML and JavaScript. (Sorry.)
• Access to the raw source code of your website.
• A copy of this JavaScript file containing the code.

Quick start

My script expects your booking form code to follow certain conventions but beyond what’s documented here you’re free to make your form look and feel however you want.

1. Save a copy of the booking form script.
2. At a minimum, replace my name and email address with your name and email address in the lines that set the providerName and bookingEmail constants in your copy of the script.
3. Copy the source code of the minimal working example to somewhere on your own website.

That’s it.

If it doesn’t work immediately, make sure:

• you’re loading your own copy of the script, not the one from my site.
• you haven’t introduced syntax errors when setting your own name.

Choosing the form to observe

By default, my script will look for a form element whose id value is exactly booking-inquiry-form:

<form id="booking-inquiry-form">
    ...
</form>

If your booking form has a different id value, you can inform my script about this by changing its formId value.

Choosing a custom email address for delivery

When sending email, the script will default to using whatever email address is in the email link it reads from your page. However, many providers (including me), use special email addresses such as “plus addressing” to filter email that comes from different sources more intelligently.

To set a custom override email address used only when email is composed through the form, set a bookingEmail value near the top of the script. To disable this behavior, set this value to false.

Modifying the message that gets written

To change the message that’s written when a client submits the form, edit the inquiryText variable.

This variable is a JavaScript template literal. Edit it to change the message.

Recognized form field names

Form fields MUST include a name attribute that matches this (alphabetized) set:

• booking_inquiry_prospect_alternate_datetime
• booking_inquiry_prospect_booking_type
• booking_inquiry_prospect_carrier_phone
• booking_inquiry_prospect_deposit_method
• booking_inquiry_prospect_location
• booking_inquiry_prospect_name
• booking_inquiry_prospect_preferred_contact_method
  • This is the variable that determines which contact link will be clicked.
• booking_inquiry_prospect_preferred_datetime
• booking_inquiry_prospect_screening_method
• booking_inquiry_prospect_service_type
• booking_inquiry_prospect_source_referral

Choosing contact links to use

By default, my script will look for any a (anchor, link) elements whose id values begin with contact-link-:

<a id="contact-link-email"
    href="mailto:[email protected]">email</a>

This is called the contactLinkIdPrefix. Anything following this prefix must match the value of the booking_inquiry_prospect_preferred_contact_method form field.

Your preferred contact method:
<select name="booking_inquiry_prospect_preferred_contact_method">
    <option>email</option>
    <option value="sms">SMS/text message</option>
</select>

For example, if this selected form field’s value is email, then the link with an id value of contact-link-email will be clicked, assuming the contactLinkIdPrefix is set to contact-link-.

Supported contact methods

The following are contact methods that my script supports out-of-the-box:

• email - To send a message via email using the registered mailto: handler.
• signal - To send a message to the given Signal Private Messenger account via its contact link.
• sms - To send a message via plain SMS/text message.
• whatsapp - To send a message via the slightly better discreet messenger called WhatsApp.
• xmpp - To send a message via a Jabber/XMPP client, which ideally has OMEMO encryption enabled.