Reservation form template

A reservation form that let users book a date and a simple way to grow yous sms and newsletter subscribers.

The reservation form popup can be customized for use in multiple situations. It allows you to invite your visitors to provide phone numbers, e-mails and/or a date. Some will use it as a simple and sleek way for your visitors to opt in to receive emails and SMS. Others will use it as a callback form to additionally collect customers' preferred date and time to be called back.

10241024

Collected data

This popup contains a javascript program that sends an Event to WonderPush whenever the form is submitted. This event is called Reservation and it contains several attributes with the data filled by your visitor:

  • string_name contains the name of your visitor,
  • string_email contains his email address,
  • string_phone: contains his phone number,
  • date_datetime contains the date/time selected for the reservation,
  • string_date,
  • string_time: .

You can adapt the name of the event:

window.WonderPushPopupSDK.trackEvent('Reservation', eventData).then(function () {
            window.WonderPushPopupSDK.dismiss();
          });

You can view and download the collected data on the detail page of your popup:

19041904

A list of email addresses collected, along with the download button

Audience

By default, the audience is set to Everybody.

12801280

But you could limit the audience to users who haven't made any Reservation event yet.

You can further restrict the audience by adding more criteria by clicking "Add criteria". There is a complete reference of the data you can use to segment your audience, there is also a guide to get started with audience segmentation

Trigger

The default settings of the Reservation form template trigger will show the popup immediately after the user made the ShowReservationForm event by clicking, for example, on a button.

19041904

Triggering the popup immediately on first visit, then 24 hours later

Here is an example of code you could add to your pages to allow your visitors to trigger the popup:

<button type="button" onclick="(window.WonderPush = window.WonderPush || []).push(['trackEvent', 'ShowReservationForm']);">Reserve your seat!</button>

Triggering on exit

A common variant of this could be to trigger the reservation popup when users are about to leave, at the end of their first visit, and another time if they visit more than 24h later. That would be done by setting the trigger to "When visitor is about to leave" and keeping the max impressions and time between impressions value unchanged.

19101910

Triggering the popup when users are about to leave (Exit intent)

Waiting for a few page views

You can also wait for a number of page views before showing the popup, and show the popup many times at a week interval

19041904

Waiting for 3 page views before showing the popup, and show it 5 times at 7 days interval

Content

The reservation form template contains:

  • a title, "Make a reservation"
  • an image
  • an email field
  • a phone number field with country code
  • a date and time picker
  • a subscribe button, "Reserve"
  • a dismiss button, "Maybe later"

Adapt the title by changing this line:

<h1>Make a reservation</h1>

Adapt the image by changing this line and putting the URL of another image in the src attribute:

<img src="https://cdn.by.wonderpush.com/upload/01d48biaffai1lb2/17be02b50c2956b97ce51a3d83eb50e922c90b24/v1/large"/>

Adapt the email field placeholder by changing the placeholder attribute of this line:

<input id="email" type="email" placeholder="Email" required/>

Adapt the dismiss button text by changing this line:

<button id="decline" class="btn-text" type="submit">No, thanks.</button>

Look and feel

Colors and fonts of texts and buttons can be adapted in the CSS editor:

10861086

Adding a background image

Add the following CSS (adapt https://example.com/image.png) to add a background to the main section, making sure the background is stretched to cover the entire section (but keeping its aspect-ratio):

#content {
  background-image: url(https://example.com/image.png) !important;
  background-repeat: no-repeat;
  background-size: cover;
}

Button colors

Add the following CSS.

.btn-primary {
  background-color: blue !important; /* Adapt "blue" to the desired color */
}

Text color

To adapt the colors of the title, input, button and dismiss button, adapt the following.

/* Use the following for the main button */
.btn-primary {
  color: red !important; /* Adapt "red" to the desired color */
}

/* Use the following for the dismiss button */
.btn-text {
  color: red !important; /* Adapt "red" to the desired color */
}

/* Use the following for the title */
h1 {
  color: red !important; /* Adapt "red" to the desired color */
}

/* Use the following for the placeholder input */
input::placeholder {
  color: red !important; /* Adapt "red" to the desired color */
}

/* Use the following for the user content input */
input {
  color: red !important; /* Adapt "red" to the desired color */
}

FAQ

How do I remove the "Powered by WonderPush"

Just remove this line:

<a href="https://www.wonderpush.com/" target="_blank" class="powered-by-wonderpush">Powered by <strong>WonderPush</strong></a>