Below, you will find both the HTML and CSS code for RSVP's customized widget, Example 3. Further down, we have included screenshots corresponding to each step and any code for custom elements in that step.
HTML
<rsvp-element bookable-id="2814" api-path="restaurants" target-slot="dev">
<rsvp-booking-steps button-text="Next">
<template>
<rsvp-step step-name="Initial">
<rsvp-seating-selector booking-mode="widget">
<div>
<rsvp-range-section default-expanded="false" range-type="month-status">
<div slot="left-icon">
<div class="pax-arrow">
<img width="24" height="24" src="~/Site3/wp-content/uploads/2019/left-arrow.png" class="rsvp-calender-left-arrow attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/left-arrow.png" />
</div>
</div>
<div slot="right-icon">
<div class="pax-arrow">
<img width="24" height="24" src="~/Site3/wp-content/uploads/2019/right-arrow.png" class="rsvp-calender-right-arrow attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/right-arrow.png" />
</div>
</div>
<div slot="left-month-icon"><div class="pax-arrow">-</div></div>
<div slot="right-month-icon"><div class="pax-arrow">+</div></div>
</rsvp-range-section>
</div>
<div style="padding-top:20px;">
<rsvp-pax-section text-value="PEOPLE" current-value="2" min-value="1" max-value="10">
<div slot="left-icon"><div class="pax-arrow">-</div></div>
<div slot="right-icon"><div class="pax-arrow">+</div></div>
</rsvp-pax-section>
</div>
<rsvp-seating-section available-text="No availability"></rsvp-seating-section>
</rsvp-seating-selector>
</rsvp-step>
<rsvp-step step-name="ContactDetails">
<div class="step-title">
<h3 class="text-center underline">YOUR DETAILS</h3>
</div>
<div class="step-container">
<div class="padding-top-10">
<rsvp-input label=" " placeholder="First Name*" name="FirstName"></rsvp-input>
</div>
<div class="padding-top-10">
<rsvp-input label=" " placeholder="Surname*" name="LastName"></rsvp-input>
</div>
<div class="padding-top-10">
<rsvp-input label=" " placeholder="Email*" name="ContactEmail"></rsvp-input>
</div>
<div class="padding-top-10">
<rsvp-phone label="Phone" name="Phone" code="+45"></rsvp-phone>
</div>
</div>
</rsvp-step>
<rsvp-step step-name="ConfirmInfo">
<div class="step-title">
<h3 class="text-center underline">YOU ARE BOOKING FOR</h3>
</div>
<div class="step-container">
<div class="padding-top-10">
<img width="24" height="24" src="~/Site3/wp-content/uploads/2019/user.png" class="attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/user.png" /> <span class="padding-left-10"><rsvp-span name="Booking.Seats"></rsvp-span> PEOPLE</span>
</div>
<div class="padding-top-10">
<img width="24" height="24" src="~/Site3/wp-content/uploads/2019/calendar.png" class="attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/calendar.png" /> <span class="padding-left-10"><rsvp-span name="Booking.Time" data-type="date"></rsvp-span> </span>
</div>
<div class="padding-top-10">
<img width="24" height="24" src="~/Site3/wp-content/uploads/2019/clock-circular-outline.png" class="attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/clock-circular-outline.png" /> <span class="padding-left-10"><rsvp-span name="Booking.Time" data-type="time"></rsvp-span></span>
</div>
<div class="padding-top-20">
<rsvp-input type="textarea" label=" " name="Comments" placeholder="Dietary requirements or comments..." rows="5"></rsvp-input>
</div>
<div class="padding-top-20">
<label class="step-checkbox-container">Yes, I confirm the details and conditions<input type="checkbox" name="Confirm" /> <span class="step-checkmark"></span> </label>
<label class="step-checkbox-container"> Yes, please notify me of future events<input type="checkbox" name="ConfirmEmail" /> <span class="step-checkmark"></span></label>
</div>
</div>
</rsvp-step>
<rsvp-step step-name="Summary">
<div class="step-title">
<h3 class="text-center underline">SUCCESS!</h3>
</div>
<div class="step-container">
<h3 class="font-weight-200">Your booking is confirmed for</h3>
<div class="padding-top-20">
<img width="24" height="24" src="~/Site3/wp-content/uploads/2019/user.png" class="attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/user.png" /> <span class="padding-left-10"><rsvp-span name="Booking.Seats"></rsvp-span> PEOPLE</span>
</div>
<div class="padding-top-10">
<img width="24" height="24" src="~/Site3/wp-content/uploads/2019/calendar.png" class="attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/calendar.png" /> <span class="padding-left-10"><rsvp-span name="Booking.Time" data-type="date"></rsvp-span> </span>
</div>
<div class="padding-top-10">
<img width="24" height="24" src="~/Site3/wp-content/uploads/2019/clock-circular-outline.png" class="attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/clock-circular-outline.png" /> <span class="padding-left-10"><rsvp-span name="Booking.Time" data-type="time"></rsvp-span></span>
</div>
<p class="padding-top-30">
Email confirmation is sent to <rsvp-span name="Booking.Email"></rsvp-span>
</p>
</div>
</rsvp-step>
</template>
</rsvp-booking-steps>
</rsvp-element>
CSS
<style>
rsvp-element {
--rsvp-expand-position: relative;
--rsvp-font: Roboto,Times New Roman,Georgia,Times,serif;
--rsvp-font-weight: 500;
--rsvp-font-size: 1.3em;
--rsvp-text-primary: #000;
--rsvp-selector-color: #333;
--rsvp-selected-background: #e9d4d0;
--rsvp-selected-color: #000;
--rsvp-border-color: #cca59e;
--rsvp-button-primary: #000;
--rsvp-button-text: #fff;
--rsvp-background-color: transparent;
font-family: Roboto,Times New Roman,Georgia,Times,serif;
}
rsvp-booking-button {
height: 40px;
max-width: 150px;
margin-top: 30px;
cursor: pointer;
}
rsvp-pax-section {
--rsvp-selector-title-flex: 0 0 auto;
}
rsvp-range-section rsvp-selector-row {
--rsvp-selector-title-flex: 0 0 auto;
}
rsvp-seating-section h4.seating-section-header {
text-align: center;
text-transform: uppercase;
border-bottom: 2px solid #d1a8a0;
font-weight: 800;
padding-bottom: 12px;
}
rsvp-seating-section .seating-items {
padding-top: 15px;
}
rsvp-seating-section > div {
padding-top: 30px;
}
rsvp-seating-item {
max-width: 80px;
}
rsvp-seating-item > div {
background-color: #fff;
padding: 8px 2px;
border: 1px solid #000;
border-color: #000;
border-radius: 0px;
margin: 5px;
font-size: 20px;
letter-spacing: 1px;
}
rsvp-calendar-month {
--rsvp-calendar-header-color: #000;
--rsvp-calendar-color: #000;
--rsvp-calendar-background-color: #fff;
--rsvp-calendar-selected-background-color: #000;
--rsvp-calendar-selected-color: #fff;
--rsvp-calendar-placeholder-background-color: #e9d4d0;
--rsvp-calendar-placeholder-border: 1px solid #fff;
--rsvp-calendar-border-radius: 0px;
--rsvp-calendar-font-weight: 700;
--rsvp-font-weight: 800;
--rsvp-selector-text-transform: uppercase;
--rsvp-font-size: 28px;
}
rsvp-calendar-month rsvp-selector-row {
font-size: 48px;
}
INPUT
rsvp-input input, rsvp-input textarea {
background-color: #f6eeec;
border: none;
padding: 8px !important;
font-size: 15px;
}
rsvp-input input:focus, rsvp-input textarea:focus {
border: 1px solid #d1a8a0;
outline: none;
}
rsvp-input input::-webkit-input-placeholder, rsvp-input textarea::-webkit-input- placeholder {
color: #000;
}
rsvp-input input:-ms-input-placeholder, rsvp-input textarea:-ms-input-placeholder
{
color: #000;
}
rsvp-input input::placeholder, rsvp-input textarea::placeholder {
color: #000;
}
CHECKBOX
.step-checkbox-container {
display: block;
position: relative;
padding-left: 30px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.step-checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.step-checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
}
.container:hover input ~ .checkmark {
background-color: #ccc;
}
.step-checkbox-container input:checked ~ .step-checkmark {
background-color: #cca59e;
}
.step-checkmark:after {
content: "";
position: absolute;
display: none;
}
.step-checkbox-container input:checked ~ .step-checkmark:after {
display: block;
}
.step-checkbox-container .step-checkmark:after {
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
COMMON
.rsvp-calender-left-arrow {
width: 16px;
height: 16px;
margin-left: -3px;
margin-top: 2px;
}
.rsvp-calender-right-arrow {
width: 16px;
height: 16px;
margin-top: 2px;
}
.pax-arrow {
padding: 0px 0px 2px 2px;
background-color: #d1a8a0;
border-radius: 50%;
font-size: 30px;
height: 30px;
width: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.font-weight-200 {
font-weight: 200;
}
.padding-top-10 {
padding-top: 10px;
}
.padding-top-20 {
padding-top: 20px;
}
.padding-top-30 {
padding-top: 30px;
}
.padding-left-10 {
padding-left: 10px;
}
.step-title h3 {
padding-bottom: 12px;
font-weight: 800;
text-align: center;
border-bottom: 2px solid #d1a8a0;
}
.step-container {
padding-top: 12px;
}
.underline {
border-bottom: 2px solid #d1a8a0;
}
rsvp-seating-section .limited-seats-label > span {
width: 20px;
height: 20px;
border: 2px solid red;
margin-right: 12px;
}
.limited-seats-label {
color: #000 !important;
text-transform: uppercase;
font-weight: 600 !important;
font-size: 16px !important;
display: flex;
align-items: center;
}
</style>
SCREENSHOTS
Step 1: Initial Step
Below is the code to set custom selector icons for the number of guests
<rsvp-pax-section text-value="PEOPLE" current-value="2" min-value="1" max-value="10">
<div slot="left-icon"><div class="pax-arrow">-</div></div>
<div slot="right-icon"><div class="pax-arrow">+</div></div>
</rsvp-pax-section>
Below is the code to set custom selector icons for the calendar
<rsvp-range-section default-expanded="false" range-type="month-status">
<div slot="left-icon">
<div class="pax-arrow">
<img width="24" height="24" src="~/Site3/wp-content/uploads/2019/left-arrow.png" class="rsvp-calender-left-arrow attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/left-arrow.png" />
</div>
</div>
<div slot="right-icon">
<div class="pax-arrow">
<img width="24" height="24" src="~/Site3/wp-content/uploads/2019/right-arrow.png" class="rsvp-calender-right-arrow attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/right-arrow.png" />
</div>
</div>
<div slot="left-month-icon"><div class="pax-arrow">-</div></div>
<div slot="right-month-icon"><div class="pax-arrow">+</div></div>
</rsvp-range-section>
Step 2: Contact Detail Step
Step 3: Confirm Info Step
Step 4: Summary Step