Below, you will find both the HTML and CSS code for RSVP's customized widget, Example 2. Further down, we have included screenshots corresponding to each step and any code for custom elements in that step.
HTML
<rsvp-element bookable-id="2642" 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-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>
<div class="padding-top-20">
<rsvp-range-section default-expanded="false" range-type="month-status">
<div slot="left-icon">
<div>
<img width="16" height="16" src="~/Site2/wp-content/uploads/2019/left-arrow.png" />
</div>
</div>
<div slot="right-icon">
<div>
<img width="16" height="16" src="~/Site2/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>
<rsvp-seating-section available-text="No availability"></rsvp-seating-section>
</rsvp-seating-selector>
</rsvp-step>
<rsvp-step step-name="ContactDetails">
<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-container">
<h6 class="rsvp-confirmation-message text-left">You are booking for <rsvp-span name="Booking.Seats"></rsvp-span> people at <rsvp-span name="Booking.Time" data-type="time"></rsvp-span> on <rsvp-span name="Booking.Time" data-type="date"></rsvp-span></h6>
<div class="padding-top-10">
<hr class="step-underline" />
</div>
<div class="padding-top-20">
<rsvp-input type="textarea" label=" " name="Comments" placeholder="Comments" rows="5"></rsvp-input>
</div>
<div class="padding-top-20 text-left">
<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 margin-top-10"> 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="padding-top-20">
<h1 class="success-title text-left">SUCCESS!</h1>
<img src="~/Site2/wp-content/uploads/2019/success-img.jpg" />
</div>
<div class="step-container">
<h6 class="rsvp-success-message text-left">Your booking is confirmed for <rsvp-span name="Booking.Seats"></rsvp-span> people at <rsvp-span name="Booking.Time" data-type="time"></rsvp-span> on <rsvp-span name="Booking.Time" data-type="date"></rsvp-span></h6>
<div class="padding-top-10">
<hr class="step-underline" />
</div>
<p class="padding-top-20 text-left">
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: Georgia, "Times New Roman", serif;
--rsvp-font-weight: 300;
--rsvp-font-size: 1em;
--rsvp-text-primary: #ffe1ca;
--rsvp-selector-color: #ffe1ca;
--rsvp-selected-background: #ffe1ca;
--rsvp-border-color: rgba(0, 0, 0, .5);
--rsvp-button-primary: #010413;
--rsvp-button-text: #fff;
--rsvp-background-color: transparent;
font-family: Georgia, "Times New Roman", serif;
}
rsvp-seating-item > div.selected {
color: #000;
}
rsvp-seating-section {
--rsvp-selector-color: #000;
--rsvp-selected-background: #ffe1ca;
}
rsvp-seating-section .seating-items {
padding-top: 5px;
padding-bottom: 15px;
border-bottom: 1px dotted #ffe1ca;
justify-content: flex-start;
}
rsvp-seating-section > div {
padding-top: 10px;
padding-left: 10px;
}
rsvp-seating-section h4.seating-section-header {
padding-top: 20px;
text-align: left;
font-weight: 600;
}
rsvp-seating-item {
max-width: 80px;
}
rsvp-seating-item > div {
background-color: transparent;
padding: 10px 2px;
border: 1px solid #ffe1ca;
border-radius: 0px;
margin: 3px;
font-size: 18px;
letter-spacing: 1px;
font-style: italic;
}
rsvp-booking-button {
height: 45px;
max-width: 140px;
margin-top: 30px;
cursor: pointer;
border: 2px solid #000;
--rsvp-button-text: #000;
margin-left: 20px;
}
rsvp-booking-button > button {
font-weight: 700;
background-color: #fee0c9;
font-size: 20px;
outline: none;
}
rsvp-booking-button > button:hover {
background-color: #e0c4ae;
}
rsvp-pax-section {
--rsvp-selector-title-flex: 0 0 auto;
--rsvp-selector-flex-direction: row;
--rsvp-selector-color: #000;
}
rsvp-selector-row {
--rsvp-selector-justify-content: flex-start;
}
rsvp-range-section rsvp-selector-row {
--rsvp-selector-title-flex: 0 0 auto;
--rsvp-selector-title-padding: 5px 10px 5px 10px;
}
rsvp-calendar-month {
--rsvp-calendar-header-color: #ffe1ca;
--rsvp-calendar-color: #000;
--rsvp-calendar-background-color: #ffe1ca;
--rsvp-calendar-selected-background-color: #000;
--rsvp-calendar-selected-color: #ffe1ca;
--rsvp-calendar-selected-border: 1px solid #ffe1ca;
--rsvp-calendar-placeholder-background-color: #000;
--rsvp-calendar-placeholder-border: 1px solid #000;
--rsvp-calendar-border: 0px solid #000;
--rsvp-calendar-border-radius: 0px;
--rsvp-calendar-font-weight: 500;
--rsvp-calendar-header-font-weight: 500;
--rsvp-font-weight: 700;
--rsvp-selector-color: #000;
}
INPUT
rsvp-input input, rsvp-input textarea {
background-color: #000;
border: 1px solid #ffe1ca !important;
padding: 10px !important;
font-size: 15px;
color: #ffe1ca !important;
}
rsvp-input input:focus, rsvp-input textarea:focus {
outline: none;
}
rsvp-input input::-webkit-input-placeholder, rsvp-input textarea::-webkit-input-placeholder {
color: rgba(254,224,201,0.8);
}
rsvp-input input:-ms-input-placeholder, rsvp-input textarea:-ms-input-placeholder {
color: rgba(254,224,201,0.8);
}
rsvp-input input::placeholder, rsvp-input textarea::placeholder {
color: rgba(254,224,201,0.8);
}
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;
font-size: 15px;
}
.step-checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.step-checkmark {
position: absolute;
top: 0;
left: 0;
height: 16px;
width: 16px;
background-color: #000;
border: 1px solid #ffe1ca;
}
.container:hover input ~ .checkmark {
background-color: #ffe1ca;
}
.step-checkbox-container input:checked ~ .step-checkmark {
background-color: #ffe1ca;
}
.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: 5px;
top: 0px;
width: 5px;
height: 10px;
border: solid black;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
COMMON
.step-underline {
border-bottom: 1px dotted #ffe1ca;
}
.pax-arrow {
padding: 0px 0px 2px 0px;
font-size: 30px;
height: 22px;
width: 22px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fee0c9;
}
.font-weight-200 {
font-weight: 200;
}
.text-left {
text-align: left;
}
.rsvp-success-message {
line-height: 34px;
font-size: 22px;
padding-top: 10px;
}
.rsvp-confirmation-message {
line-height: 26px;
}
.success-title {
font-size: 48px;
font-weight: 800;
}
.padding-top-10 {
padding-top: 10px;
}
.padding-top-20 {
padding-top: 20px;
}
.padding-top-30 {
padding-top: 30px;
}
.padding-left-10 {
padding-left: 10px;
}
.margin-top-10 {
margin-top: 10px;
}
.step-container {
padding-left: 10px
}
.text-left {
text-align: left;
}
rsvp-seating-section .limited-seats-label > span {
width: 20px;
height: 20px;
border: 2px solid red;
margin-right: 12px;
}
.limited-seats-label {
color: #ffe1ca !important;
text-transform: uppercase;
font-weight: 600 !important;
font-size: 16px !important;
display: flex;
align-items: center;
text-align:left;
}
.js-open-booking-Reservaction {
text-align: center !important;
font-size: 50px !important;
color: #fee0c9 !important;
font-weight: 400 !important;
margin-top: 50px !important;
}
.slider {
height: 150vh !important;
}
.r {
display: block !important;
background-color: black;
}
</style>
SCREENSHOTS
Step 1: Initial Step
Below is the code to set custom selector icons for the number of guests
<div>
<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>
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>
<img width="16" height="16" src="~/Site2/wp-content/uploads/2019/left-arrow.png" />
</div>
</div>
<div slot="right-icon">
<div>
<img width="16" height="16" src="~/Site2/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
