add to theme integration
// Slide-in
jQuery(document).ready(function(){ jQuery(".slide_in_label").click(function(){ jQuery(".slide_in_container").toggleClass("show_form"); }); });
jQuery(document).ready(function(){ jQuery(".close_form_icon").click(function(){ jQuery(".slide_in_container").removeClass("show_form"); }); });
jQuery(document).ready(function(){ jQuery(".slide_in_mobile_label").click(function(){ jQuery(".slide_in_mobile").toggleClass("show_form"); }); });
jQuery(document).ready(function(){ jQuery(".close_form_icon_mobile").click(function(){ jQuery(".slide_in_mobile").removeClass("show_form"); }); });
add to theme custom css
/* ##### SLIDE-IN DESKTOP ##### */
.slide_in_container {
position:fixed;
top: 32%;
right:0px;
z-index:9999999;
transform: translateX(100%);
transition: 0.5s ease-out;
}
.show_form {
transform: translateX(0px);
}
.slide_in_label {
transform: translate(-100%, -100%) rotate(-90deg);
transform-origin: right bottom 0px;
position: absolute !important;
top: 0px;
}
.slide_in_label:hover {
cursor: pointer;
}
.custom_contact_form p input, .custom_contact_form p textarea {
padding: 15px 10px 10px 10px !important;
}
.fa-times-circle {
font-size: 22px;
cursor: pointer;
color: #000 !important;
}
/* ##### SLIDE-IN MOBILE ##### */
@media (max-width: 980px) {
.slide_in_mobile {
position:fixed;
bottom: 0 !important;
right:0px !important;
left:0px !important;
z-index:99999999;
transform: translateY(100%);
transition: 0.5s ease-out;
}
.slide_in_mobile_label {
transform: translate(0%, -100%) rotate(0deg);
transform-origin: center bottom 0px;
position: absolute !important;
top: 0px;
width: 100%;
text-align: center;
justify-content: center;
padding: 1.3rem 1rem 1rem 1em;
margin: 0px;
display: flex;
}
.show_form {
transform: translateY(0px);
}
.slide_in_mobile_label :hover {
cursor: pointer;
}
.cross_icon .fa-times-circle {
float: right !important;
margin-right: 35px !important;
}}
@media (max-height: 560px) {
.slide_in_mobile {
display: none;
}}
.et-tb .slide_in_container,
.et-tb .slide_in_mobile {
display: none;
}