<div class="subscribe">
<form id="subscribe-form" class="subscribe__form">
<input id="subscribe-form-email" class="subscribe__email" type="email" name="email" placeholder="Subscribe for updates"></input>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_28501d4bc2d9052c6e6c31801_f908d3aeda" tabindex="-1" value=""></div>
<button id="subscribe-submit-button" class="subscribe__button disabled">Send</button>
</form>
</div>
{#
To connect this subscription button with the mailchimp account, use this tutorial:
https://mailchimp.com/help/host-your-own-signup-forms/
Example:
<form id="subscribe-form" class="subscribe__form form" action="https://ccmdesign.us18.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="28501d4bc2d9052c6e6c31801"> <!-- Mailchimp -->
<input type="hidden" name="id" value="f908d3aeda"> <!-- Mailchimp -->
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_28501d4bc2d9052c6e6c31801_f908d3aeda" tabindex="-1" value=""></div>
<input id="subscribe-form-email" class="subscribe__email" type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" placeholder="Subscribe for updates">
<button id="subscribe-submit-button" class="subscribe__button disabled">Send</button>
</form>
#}
<div class="subscribe">
<form id="subscribe-form" class="subscribe__form">
<input id="subscribe-form-email" class="subscribe__email" type="email" name="email" placeholder="Subscribe for updates"></input>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_28501d4bc2d9052c6e6c31801_f908d3aeda" tabindex="-1" value=""></div>
<button id="subscribe-submit-button" class="subscribe__button disabled">Send</button>
</form>
</div>
/* No context defined for this component. */
const emailSubscription = document.getElementById('subscribe-form-email');
if(emailSubscription){
emailSubscription.oninput = event => {
const submitButton = document.getElementById('subscribe-submit-button');
if (emailSubscription.checkValidity() && event.target.value.length > 0) {
submitButton.classList.remove('disabled');
} else {
submitButton.classList.add('disabled');
}
};
}
// // Structure
.subscribe {
padding: 2.5rem;
&__form {
display: flex;
margin: auto;
}
// &__button { padding: 0.5rem 1rem; }
}
.subscribe__form {
width: -webkit-fit-content;
width: -moz-fit-content;
// max-width: 40%;
> span { flex: 1; }
> a { flex: 0; }
}
// // Visuals
.subscribe {
background-color: var(--color-yellow);
span {
font-weight: 600;
display: inline-block;
align-self: center;
text-align: right;
padding-right: 2rem;
}
}
// input.subscribe__email {
// color: var(--color-white);
// border: none;
// background-color: var(--color-yellow);
// font-weight: bold;
// text-align: left;
// letter-spacing: 0.39px;
// outline: none;
// font-size: 1.2rem;
// width: 50vw;
// max-width: 480px;
// &::placeholder {
// color: var(--color-white);
// font-weight: bold;
// opacity: 1;
// }
// &:-webkit-autofill {
// -webkit-box-shadow:0 0 0 50px var(--color-yellow) inset;
// -webkit-text-fill-color: var(--color-white);
// }
// &:-webkit-autofill:focus {
// -webkit-box-shadow: 0 0 0 50px var(--color-yellow) inset;
// -webkit-text-fill-color: var(--color-white);
// }
// &__button {
// background-color: transparent;
// color: var(--color-white);
// text-transform: uppercase;
// font-weight: bold;
// border: none;
// cursor: pointer;
// outline: none;
// font-size: 1.2rem;
// &.disabled {
// opacity: 0.4;
// }
// }
// }
// .subscribe__form {
// // border-bottom: 2px solid var(--color-white);
// }
There are no notes for this item.