(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Requirement only for “form” widget else use other form plugins (WPforms, Contact Form 7 etc.)
1 – Elementor Pro
In CSS
.CtaForm is CSS class for whole container
.ctaIcon is CSS class for down arrow icon
.flipped is CSS class that flips the arrow icon
.formContainer is CSS class for container with form
.CtaFormClick is CSS class for container that should be clicked for form to move.
In Javascript JS
moveUp function makes the container go up on click
moveDown function makes the container go down on click
Different values in “ctaForm.style.bottom” can be added for desktop, mobile, tablet. This would make form go up/down to different height. Only do this if needed else keep all the values same.
window.innerWidth <= 767/1024 : The numbers here is used for responsiveness for mobile(767px) and tablet(1024px), change it to your desired width if needed.
<style>
.CtaForm {
transition: bottom 0.5s ease; /* Add smooth transition effect */
}
.ctaIcon {
transition: transform 0.5s ease; /* Add transition effect for arrow flipping */
}
.flipped {
transform: scaleY(-1); /* Flip arrow vertically */
}
.formContainer {
overflow-x: hidden
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var ctaForm = document.querySelector(".CtaForm");
var ctaFormClick = document.querySelector(".CtaFormClick");
var ctaIcon = document.querySelector(".ctaIcon");
var isUp = false;
// Function to move the CtaForm up
function moveUp() {
if (window.innerWidth <= 767) { // For mobile
ctaForm.style.bottom = "0px"; // Adjust value for mobile
} else if (window.innerWidth <= 1024) { // For tablet
ctaForm.style.bottom = "0px"; // Adjust value for tablet
} else { // For desktop
ctaForm.style.bottom = "0px"; // Default value for desktop
}
}
// Function to move the CtaForm down
function moveDown() {
if (window.innerWidth <= 767) { // For mobile
ctaForm.style.bottom = "-476px"; // Adjust value for mobile
} else if (window.innerWidth <= 1024) { // For tablet
ctaForm.style.bottom = "-476px"; // Adjust value for tablet
} else { // For desktop
ctaForm.style.bottom = "-476px"; // Default value for desktop
}
}
// Toggle between moveUp and moveDown functions on click
ctaFormClick.addEventListener("click", function() {
if (isUp) {
moveDown();
ctaIcon.classList.remove('flipped'); // Remove the 'flipped' class to return the arrow to its original orientation
} else {
moveUp();
ctaIcon.classList.add('flipped'); // Add the 'flipped' class to flip the arrow vertically
}
isUp = !isUp;
});
});
</script>
Leave a Message (Demo)
