ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 15:35:05 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Email form with Klaviyo API for mobile CTA

Browse source
This commit is contained in:
Thomas Smith 2023-02-03 11:30:18 -05:00
parent eaed777728
commit a41f9ee185
1 changed files with 70 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/layouts/index.html
View file

@ -65,6 +65,9 @@
.boilerplate{
display:none;
}
.hero-description{
display:none;
}
}
@media only screen and (min-width: 768px) {
@ -84,7 +87,7 @@
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 my-auto">
<h1 class="display-1" style="z-index:3; position: relative;"><span class="inner-glow ">Invisible</span> yet <span class="callout white">powerful</span></h1>
<p class="lead">Upgrade to Tea - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth updates. From the creator of Brew.</p>
<p class="mb-5">Introducing tea, the cross-platform package manager of the future. Say goodbye to slow package managers. With tea, simply type commands and it takes care of the rest. Get the latest version easily and support specific tool versions for different projects. Encoding dependencies in the README makes it readable by humans and tea, providing easier access for users. Experience better package management with tea.</p>
<p class="mb-5 hero-description">Introducing tea, the cross-platform package manager of the future. Say goodbye to slow package managers. With tea, simply type commands and it takes care of the rest. Get the latest version easily and support specific tool versions for different projects. Encoding dependencies in the README makes it readable by humans and tea, providing easier access for users. Experience better package management with tea.</p>
<!-- Desktop CTA's -->
<div class="row mb-3 desktop-ctas">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
@ -99,10 +102,74 @@
</div>
</div>
<!-- Mobile CTA's -->
<div class="row mb-3 mobile-ctas">
<div class="row mb-3 mt-5 mobile-ctas">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
{{- partial "klaviyo-form.html" -}}
<form id="subscribeForm">
<div class="mb-3">
<input class="p-3 text-center" placeholder="Enter your email" type="email" id="email" required>
</div>
<button class="hbtn hb-fill-right" style="width:100%;" id="email-btn" type="submit">Subscribe</button>
</form>
<div id="formResponse"></div>
</div>
<div class="or-divider flex">
<hr>
<p class="small grid-gray">or</p>
<hr>
</div>
<style>
#email{
width:100%;
height: 60px;
background-color: #1a1a1a;
border: 1.5px solid #949494;
color: white;
font-family: "inter", sans-serif;
text-transform: uppercase;
}
#email-btn{
text-transform: uppercase;
}
</style>
<script>
const subscribeForm = document.getElementById('subscribeForm');
const formResponse = document.getElementById('formResponse');
subscribeForm.addEventListener('submit', (event) => {
event.preventDefault();
const email = document.getElementById('email').value;
if (!email) {
formResponse.innerHTML = '<p style="color: red">Please enter a valid email address.</p>';
return;
}
fetch('https://manage.klaviyo.com/api/v1/list/R2UVm3/members', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
api_key: 'pk_231a258e61a40283566192ee59310c7af4'
})
})
.then(response => {
if (!response.ok) {
throw new Error('Failed to subscribe');
}
formResponse.innerHTML = '<p style="color: green">Form submitted!</p>';
})
.catch(error => {
formResponse.innerHTML = '<p style="color: red">An error occurred. Please try again later.</p>';
});
});
</script>
<div class="col">
<button class="hbtn-light hb-light-fill-right mb-4" id="follow-button" style="width:100%; text-transform:uppercase;"><i class="icon-twitter" style="position:relative;top:2px;"></i>Follow Us on Twitter</button>
</div>