https://github.com/Ahmedalzarka/pod-request-access-landing-page:
let requestBtn = document.getElementById("requestbtn")
let oops = document.querySelector(".oops")
requestBtn.addEventListener("click", () => {
let emailInput = document.getElementById("email").value
emailInput == "" ? oops.classList.remove("hidden") : null
})
:root {
font-size: 10px;
--font-heading: 5.2em;
--font-paragraph: 18px;
--green-color: #54E6AF;
--form-color: #2C344B;
--background-navy-blue-color: #121725;
--white: #ffffff;
--form-hover-color: #5A668A;
--grey-color: #C2CBE5;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Chivo', sans-serif;
font-size: 100%;
}
body {
position: relative;
width: 100%;
height: 100vh;
padding-bottom: 130px;
background-color: var(--background-navy-blue-color);
}
body::before {
width: 100%;
min-height: 100vh;
position: absolute;
content: '';
background-image: url(../assets/desktop/bg-pattern-dots.svg), url(../assets/desktop/image-host.jpg);
background-repeat: no-repeat;
background-position: right bottom 10%, right center;
}
body::after {
width: 100%;
min-height: 100vh;
position: absolute;
content: '';
background-image: url(../assets/desktop/logo.svg);
background-repeat: no-repeat;
background-position: left 20% top 10%;
}
main {
z-index: 1;
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-40%);
max-width: fit-content;
padding: 90px 60px 0 0;
background-color: var(--background-navy-blue-color);
}
.container {
display: flex;
flex-direction: column;
}
main h1 {
font-size: 5.2em;
font-weight: 400;
line-height: 62px;
text-transform: uppercase;
color: var(--green-color);
}
main h1 span {
color: var(--grey-color);
}
main p {
max-width: 445px;
font-size: 18px;
font-weight: 400;
line-height: 28px;
color: var(--grey-color);
opacity: 0.5;
margin-top: 24px;
}
form {
margin-top: 40px;
position: relative;
width: 430px;
}
input {
width: 100%;
padding: 20px 0 20px 32px;
background-color: var(--form-color);
border: none;
outline: none;
border-radius: 1000px;
font-size: 14px;
font-weight: 400;
color: white;
}
input::placeholder {
color: white;
font-size: 14px;
font-weight: 400;
}
button {
color: black;
height: 80%;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 8px;
padding: 10px 28px;
border-radius: 1000px;
border: none;
cursor: pointer;
background-color: var(--green-color);
font-size: 14px;
font-weight: 400;
}
button:hover {
background-color: #B3FFE2;
}
.img-contianer {
margin-top: 42px;
display: flex;
gap: 40px;
}
.img-contianer img {
object-fit: contain;
}
.oops {
color: #FB3E3E;
opacity: 1;
margin: 0;
}
.hidden {
opacity: 0;
}
@media (max-width: 1250px) {
body::after {
background-size: 200px;
background-position: left 40px top 50px;
}
body::before {
background-image: url(../assets/desktop/bg-pattern-dots.svg), url(../assets/tablet/image-host.jpg);
background-position: left 5% bottom, right top;
}
main {
left: 0;
}
main h1 {
font-size: 48px;
}
}
@media (max-width: 800px) {
body::after {
background-position: center top 10%;
opacity: 1;
}
body::before {
background-image: url(../assets/mobile/image-host.jpg);
background-position: top center;
background-size: cover;
backface-visibility: hidden;
opacity: 0.1;
}
main {
width: 100%;
max-width: 100%;
padding: 0 24px;
background-color: transparent;
bottom: 0;
}
main h1 {
text-align: center;
}
main p {
text-align: center;
}
.container {
align-items: center;
}
.img-contianer {
order: 2;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
opacity: 0.8;
margin-top: 30px;
}
form {
order: 3;
}
button {
width: 100%;
position: static;
padding: 20px 0;
margin-top: 16px;
transform: translate(0, 0);
}
}
<main>
<h1>Publish your podcasts<br><span>everywhere</span>.</h1>
<div class="container">
<p>Upload your audio to Pod with a single click. We’ll then distribute your podcast to Spotify, Apple Podcasts, Google Podcasts, Pocket Casts and more!</p>
<form>
<input type="email" placeholder="Email address" id="email">
<button id="requestbtn">Request Access</button>
</form>
<p class="oops hidden">Oops! Please check your email</p>
<div class="img-contianer">
<img src="assets/desktop/spotify.svg" alt="spotify">
<img src="assets/desktop/apple-podcast.svg" alt="apple-podcast">
<img src="assets/desktop/google-podcasts.svg" alt="google">
<img src="assets/desktop/pocket-casts.svg" alt="pocket">
</div>
</div>
</main>
The hidden message "oops….." shows and hides in the same second.
I don’t know what to do.
3
Answers
When you are using a form tag, u need to be careful to the buttons, cause by default in a form they are
type="submit"
, and this cause the page to refresh every time they are clicked.To fix the problem just specify the button type like so:
Hope it helps 🙂
To account for button pressed or user pressing enter on the email field, suggestion to add event listener to form.
To prevent form submission on error, use
event.preventDefault()
As Edoardo Balducci mentions, buttons are
type="submit"
by default. This means, clicking the button will try to submit its associated form.Since the input field is not
required
, it is optional. Because it is the form’s only form control, the form is always valid and will always submit when requested (here: clicking the button).To prevent submission, try (one of) the following:
required
.event.preventDefault()
).type="button"
, and conditionally submit the form manually (e.g. by callingform.requestSubmit()
)As Arty.Simon mentions, it would be better to listen to a
submit
event on the form. This better conveys intent and also handles form submission requests originating from elsewhere than the button.