Email form adjustments

This commit is contained in:
Thomas Smith 2023-02-08 12:02:33 -05:00
parent f3d1f23510
commit 35a007bd55
2 changed files with 26 additions and 10 deletions

View file

@ -79,7 +79,9 @@
padding-top: 16vw; padding-top: 16vw;
padding-bottom: 16vw; padding-bottom: 16vw;
} }
.email{
height: 50px !important;
}
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {

View file

@ -11,11 +11,12 @@
<div class="mb-4 subscribe-collapse"> <div class="mb-4 subscribe-collapse">
<div class="col"> <div class="col">
<p class="text-center small grid-gray">Enter your email to join our newsletter:</p>
<form id="subscribeForm"> <form id="subscribeForm">
<div class="mb-3"> <div class="form-container p-1 flex">
<input class="p-3 text-center" placeholder="Enter your email" type="email" id="email" required> <input class="email p-3" placeholder="Enter your email" type="email" id="email" required>
<button class="ms-2 email email-send hbtn hb-fill-right" style="width:100%;" id="subscribe-submit-btn" type="submit"><i class="icon-telegram"></i></button>
</div> </div>
<button class="hbtn hb-fill-right" style="width:100%;" id="subscribe-submit-btn" type="submit">Subscribe</button>
</form> </form>
<div id="formResponse"></div> <div id="formResponse"></div>
</div> </div>
@ -27,18 +28,29 @@
display:none; display:none;
} }
.form-container{
border: 1px solid #949494;
border-radius: 5px !important;
height: 50px;
}
#email{ #email{
width:100%; width:100%;
height: 60px; height: 100% !important;
background-color: #1a1a1a; background-color: #1a1a1a;
border: 1.5px solid #949494; border:none !important;
color: white; color: white;
font-family: "inter", sans-serif; font-family: "inter", sans-serif;
text-transform: uppercase; border-radius: 5px;
border-radius: 0px !important;
} }
#email-btn{ #email-btn{
text-transform: uppercase; text-transform: uppercase !important;
}
.email-send{
text-transform: uppercase !important;
width:20% !important;
border-radius: 3px;
height: 100% !important;
} }
</style> </style>
@ -87,7 +99,9 @@
}) })
.catch(error => { .catch(error => {
formResponse.innerHTML = formResponse.innerHTML =
'<p style="color: red">An error occurred. Please try again later.</p>'; `<div class="mt-3 orange-bg p-2 flex" style="border-radius: 3px;">
<span class="small" style="color: #fff; display:block; margin-left:auto; margin-right:auto;">An error occurred. Please try again later.</span>
</div>`;
}); });
}); });
</script> </script>