I've built out a section on a page that contains multiple instances (why I'm using querySelectorAll()
) of this Request Brochure form. They are using Campaign Monitor so much of the form code has been removed for this post.
Operation
- On page load an event handler that calls
preventDefault
on click events is added to elements with class download to prevent the submit action. - A class of
.is-open
is added to the.download
container. - This triggers a keyframe animation that transitions the height, then the opacity of the forms
- The event listener is removed to allow the button to perform it's submit action
I did try using the method of setting the button to disabled initially, then removing this attribute onclick but found this meant the hover states would not work.
I'm looking to see if this is the most efficient way of adding, then removing preventDefault
once it is no longer required.
const packageCMCont = document.querySelectorAll('.download');
packageCMCont.forEach(function(item) {
function handleClick(e) {
e.preventDefault()
var btn = item.querySelector('.btn');
item.classList.add('is-open');
btn.classList.remove('is-style-outline');
btn.classList.add('is-style-default');
item.removeEventListener('click', handleClick);
}
item.addEventListener('click', handleClick);
})
.download {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.download.is-open .inputs {
display: flex;
height: 100px;
animation: showForms 3s forwards;
}
.inputs {
opacity: 0;
display: none;
flex-direction: column;
height: 0;
overflow: hidden;
}
input {
height: 50px;
}
button {
height: 50px;
width: 100%;
background-color: green;
color: white;
}
button:hover {
background-color: white;
color: green;
}
@keyframes showForms {
0% {
height: 0;
}
50% {
height: 100px;
opacity: 0;
}
100% {
height: 100px;
opacity: 1;
}
}
<div class="download">
<form>
<div class="inputs">
<input aria-label="Name" id="fieldName" maxlength="200" name="cm-name" placeholder="Name">
<input autocomplete="Email" aria-label="Email" id="fieldEmail" maxlength="200" required="" type="email" placeholder="Email">
</div>
<div class="button-cont">
<button class="btn" type="submit">Request Brochure</button>
</div>
</form>
</div>