Below, you will find both the HTML and CSS code for RSVP's customized widget, Example 1. Further down, we have included screenshots corresponding to each step and any code for custom elements in that step.
HTML
<rsvp-element bookable-id="2761" 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-30">
<hr class="step-underline" />
</div>
<div class="padding-top-20">
<rsvp-range-section default-expanded="false" range-type="month-status">
<div slot="left-icon">
<div>
<img width="24" height="24" src="~/Site1/wp-content/img/left-arrow.png" />
</div>
</div>
<div slot="right-icon">
<div>
<img width="24" height="24" src="~/Site1/wp-content/img/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 class="seating-section-container">
<rsvp-seating-section available-text="No availability"></rsvp-seating-section>
</div>
<div class="padding-top-30">
<hr class="step-underline" />
</div>
</rsvp-seating-selector>
</rsvp-step>
<rsvp-step step-name="ContactDetails">
<div class="step-container">
<div class="padding-top-20">
<rsvp-input label=" " placeholder="First Name*" name="FirstName"></rsvp-input>
</div>
<div class="padding-top-20">
<rsvp-input label=" " placeholder="Surname*" name="LastName"></rsvp-input>
</div>
<div class="padding-top-20">
<rsvp-input label=" " placeholder="Email*" name="ContactEmail"></rsvp-input>
</div>
<div class="padding-top-20">
<rsvp-phone label="Phone" name="Phone" code="+45"></rsvp-phone>
</div>
<div class="padding-top-30">
<hr class="step-underline" />
</div>
</div>
</rsvp-step>
<rsvp-step step-name="ConfirmInfo">
<div class="step-container">
<h3 class="font-weight-200 rsvp-confirmation-message">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></h3>
<div class="padding-top-20">
<hr class="step-underline" />
</div>
<div class="padding-top-30">
<rsvp-input type="textarea" label=" " name="Comments" placeholder="Comments" rows="3"></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 class="padding-top-30">
<hr class="step-underline" />
</div>
</div>
</rsvp-step>
<rsvp-step step-name="Summary">
<div class="padding-top-10">
<hr class="step-underline" />
</div>
<div class="padding-top-20">
<img src="~/Site1/wp-content/img/success-img.jpg" />
<h1 class="text-center font-weight-200">SUCCESS!</h1>
</div>
<div class="step-container">
<h3 class="font-weight-200 rsvp-success-message">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></h3>
<div class="padding-top-20">
<hr class="step-underline" />
</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 {
margin:20px 0px 0px 0px;
--rsvp-expand-position: absolute;
--rsvp-font: Georgia, "Times New Roman", serif;
--rsvp-font-weight: 300;
--rsvp-font-size: 1.3em;
--rsvp-text-primary: #000;
--rsvp-selector-color: rgb(20, 4, 109);
--rsvp-selected-background: #000;
--rsvp-selected-color: #fff;
--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-section h4.seating-section-header {
text-align: center;
font-weight: 600;
}
rsvp-seating-section .seating-items {
padding-top: 15px;
}
rsvp-seating-section > div {
padding-top: 10px;
}
rsvp-seating-item {
max-width: 80px;
}
rsvp-seating-item > div {
background-color: #fff;
padding: 8px 2px;
border: 2px solid #000;
border-radius: 0px;
margin: 3px;
font-size: 18px;
font-style: italic;
}
rsvp-booking-button {
height: 45px;
max-width: 140px;
margin-top: 30px;
cursor: pointer;
background-color: #fff;
border: 2px solid #000;
--rsvp-button-text: #000;
}
rsvp-booking-button > button {
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
font-weight: 600;
}
rsvp-booking-button > button:hover {
background-color: #000;
color: #fff;
}
rsvp-pax-section {
--rsvp-selector-title-flex: 0 0 auto;
}
rsvp-range-section rsvp-selector-row {
--rsvp-selector-title-flex: 0 0 auto;
--rsvp-selector-title-padding: 0px;
}
rsvp-calendar-month rsvp-selector-row {
--rsvp-font-weight: 700;
}
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: #fff;
--rsvp-calendar-placeholder-border: 1px solid #fff;
--rsvp-calendar-border: 1px solid #000;
--rsvp-calendar-border-radius: 0px;
--rsvp-calendar-font-weight: 500;
--rsvp-font-weight: 700;
--rsvp-calendar-header-font-weight: 500;
--rsvp-selector-padding: 10px 0px 20px 0px;
--rsvp-background-color: #e0e0e0;
}
INPUT
rsvp-input input, rsvp-input textarea {
border: 0;
outline: 0;
border-bottom: 1px solid black;
font-size: 16px;
font-family: Georgia, "Times New Roman", serif;
}
rsvp-input input:focus, rsvp-input textarea:focus {
border-bottom: 2px solid #000;
outline: none;
}
rsvp-input input::-webkit-input-placeholder, rsvp-input textarea::-webkit-input-placeholder {
color: #000;
font-family: Georgia, "Times New Roman", serif;
}
rsvp-input input:-ms-input-placeholder, rsvp-input textarea:-ms-input-placeholder
{
color: #000;
font-family: Georgia, "Times New Roman", serif;
}
rsvp-input input::placeholder, rsvp-input textarea::placeholder {
color: #000;
font-family: Georgia, "Times New Roman", serif;
}
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;
background-color: #fff;
border: 2px solid #000;
}
.container:hover input ~ .checkmark {
background-color: #ccc;
}
.step-checkbox-container input:checked ~ .step-checkmark {
background-color: #fff;
}
.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 black;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
COMMON
.step-underline {
border-top: dotted 3px;
width: 50%;
}
.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;
}
.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;
}
.pax-arrow {
padding: 0px 0px 2px 0px;
border: 2px solid #000;
border-radius: 50%;
font-size: 25px;
height: 25px;
width: 25px;
display: flex;
justify-content: center;
align-items: center;
}
.seating-section-container {
margin-top: 25px;
overflow-y: auto;
max-height: 350px;
}
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;
}
@media only screen and (max-width: 767px) {
.rsvp-div {
top: 413px !important;
}
}
</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>
<img width="24" height="24" src="~/Site1/wp-content/img/left-arrow.png" />
</div>
</div>
<div slot="right-icon">
<div>
<img width="24" height="24" src="~/Site1/wp-content/img/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
