Is there a way to get a pop-in animated contact form, but without Javascript or queryselectors?

I was able to make a contact form like this work but I wasn’t able to make this work without Javascript. I want the form to pop in from the right side with a click on the “open” icon and then stay open until user closes the form with the “close” icon and then pop out back to the original state. Any assistance would be greatly appreciated. Thanks!

<button id="contact" type="button" onclick="openForm()"><div class="triangle-left"></div></button>
<div id="contactForm">
<div class="containerContact">
<form action="emailsend.php" method="post" enctype="text/plain">
<h3 class="formheading">CONTACT</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit velit ut placerat suscipit.</p> <input type="text" name="name" placeholder="Name or Company*" size="75" autocomplete="on" required>
<input type="text" name="phone" placeholder="Phone*" size="75" autocomplete="on" required>
<input type="text" name="mail" placeholder="Email*" size="75" required>
<select name="project" required>
<option value="" disabled selected hidden>Test*</option>
<option value="1">Test</option>
<option value="2">Test</option>
<option value="3">Test</option>
<option value="4">Test</option>
<option value="5">Test</option>
</select>
<textarea class="messageInput" name="Message" placeholder="Message*" rows="7" cols="45" required></textarea>
<input class="sendButton" type="submit" value="Let's Chat!">
</form>
<button id="closeContact" type="button" onclick="closeForm()"><div class="triangle-right"></div></button>
</div>
</div>

CSS:

.triangle-left {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-right: 50px solid #555;
    border-bottom: 25px solid transparent;
}

.triangle-right {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid #323;
    border-bottom: 25px solid transparent;
}

#contact {
    z-index: 200;
    background: none;
    border: none; 
    cursor: pointer;
    position: fixed;
    bottom: 10px;
    right: 30px;
    width: 60px;
}

#closeContact {
    z-index: 500;
    background: none;
    border: none; 
    cursor: pointer;
    position: fixed;
    bottom: 10px;
    right: 30px;
    width: 60px;
}

#contactForm {
    display: none;
    top: 0;
    height: 100%;
    z-index: 400;
    position: fixed; 
    background: lightblue;
}

#contactForm.open{
    display: block;
    transition: .5s linear;
    animation-name: formOpen;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}

#contactForm.close{
    transition: .5s linear;
    animation-name: formClose;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}

@keyframes formClose {
    from {right: 0;}
    to {right: -410px;}
}

@keyframes formOpen {
    from {right: -300px;}
    to {right: 0;}
}

.containerContact{
    padding: 25px;
    width: 300px;
    height: fit-content;
}

.formheading { 
    font-size: 30px; 
    color: #212529;
}

input[type=text]{
    margin: 0 auto;
    display: block;
    width: 100%;
    height: 20px;
    color: #212529;
    background: transparent;
    border: 1px;
    border-style: solid;
    border-color: #212529;
    font-size: 13px;    
}

select {
    margin: 0 auto;
    display: block;
    margin-top: 15px;
    padding-left: 8px;
    width: 100%;
    height: 40px;
    background: transparent;
    border: 1px;
    border-style: solid;
    border-color: #212529;
    font-size: 13px;
}

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

.messageInput {
    margin: 0 auto;
    display: block;
    margin-top: 15px;
    padding: 8px;
    width: 100%;
    color: #212529;
    background: transparent;
    border: 1px;
    border-style: solid;
    border-color: #212529;
    font-size: 14px;
    font-family: sans-serif;
    resize: none;   
}

.sendButton {
    margin: 0 auto;
    display: block;
    cursor: pointer;
    margin-top: 15px;
    width: 100%;
    height: 40px;
    color: #FFF;
    background: #212529;
    border: 1px;
    border-style: solid;
    border-color: #212529; 
    transition: all 0.5s ease-out 0s
}

.sendButton:hover {
    background-color: #000;
}

JS

const Contact = document.querySelector("#contactForm");

function openForm() {
Contact.classList.add('open');
}
        
function closeForm() {
Contact.classList.add('close');
setTimeout(function(){
Contact.classList.remove('open');
Contact.classList.remove('close');
},300);
}