Prefilled input fields can be very handy. Not only does it help our customers fill out input fields faster, it can also serve as a starting point for their comment.

Before we get started, I will quickly address what you can do with the input fields in Booking.js. Feel free to skip ahead and start copy pasting if that's your cup of tea.

What can we do with the input fields?

There are currently six different input fields you can activate and customise with Booking.js. They are; name , email , comment , phone , voip , and location.

Please note that the examples that follow are applied to your booking widget by adding the key(s) to the config as you initialise your widget. At the end of this article you can find a fully working example if this.

Disabling/Enabling an input

You can enable and disable each of the six booking fields with a boole  value like so:

bookingFields: {
    name: {
        enabled: false
    },
    location: {
        enabled: true
    }
}

Placeholder text

You can change the placeholder text of any input field by using the placeholder key like this:

bookingFields: {
    name: {
        placeholder: 'eg: Marty McFly'
    }
}

Prefill inputs

You can prefill an input by adding the prefilled key and adding a value:

bookingFields: {
    name: {
        prefilled: 'Doc Brown'
    }
}

Required inputs

You can make an input required, meaning that the form will not be sent before this has a value:

bookingFields: {
    name: {
        required: true
    }
}

Locked inputs

If you need to lock an input but still show the user, you can lock an input like this:

bookingFields: {
    name: {
        locked: true
    }
}


Now that we have seen a snippet of how each option works on our inputs, it's time to look at a working example so you can get on with your agenda. The following example can be found on GitHub right here, should you wish to inspect further.

You can also find more of our Booking.js examples in the same folder. We suggest you have a look and find out what other customisations you can have fun with.


A working example of prefilled and other input customisations

This example shows how we can manipulate the booking fields to deliver the exact experience we want:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.timekit.io/booking-js/v1/booking.min.js"></script>
  <div id="bookingjs">
    <script type="text/javascript">
      TimekitBooking().init({
        name:     'Doc Brown',
        email:    'marty.mcfly@timekit.io',
        apiToken: 'XT1JO879JF1qUXXzmETD5ucgxaDwsFsd',
        calendar: '22f86f0c-ee80-470c-95e8-dadd9d05edd2',
        avatar:   '../misc/avatar-doc.jpg',
        app:      'back-to-the-future',
        bookingFields: {
          name: {
            placeholder: 'Your name please'
          },
          email: {
            prefilled: 'doc.brown@timekit.io',
            disabled: true
          },
          comment: {
            enabled: true,
            prefilled: 'This is a comment'
          },
          phone: {
            enabled: true,
            required: true
          },
          voip: {
            enabled: true,
            prefilled: 'doc.brown',
            required: true,
            locked: true
          },
          location: {
            enabled: true,
            placeholder: 'Place of meeting'
          }
        }
      });
    </script>
  </div>


We hope you now understand how you can change, prefill and much more with each of your booking fields for your widget. Remember you can always see the latest changes made to Booking.js by visiting it on GitHub.

Did this answer your question?