|
<!-- |
|
if using jekyll, indents wrap html into pre tag |
|
so dont indent html |
|
--> |
|
<script type="text/javascript" src="/assets/js/jquery-3.5.0.min.js"></script> |
|
|
|
<div class="subscribe-to-newsletter"> |
|
<div class="top"> |
|
<h3 class="title">Receive new articles in your inbox</h3> |
|
<h4 class="subtitle">Never more than once a week</h4> |
|
</div> |
|
<div class="bottom"> |
|
<div class="before"> |
|
<div class="input"> |
|
<input type="email" placeholder="[email protected]" value=""/> |
|
</div> |
|
<div class="button"> |
|
<button>Subscribe</button> |
|
</div> |
|
<div class="disclaimer"> |
|
<small>I will not share your email with third-parties</small> |
|
</div> |
|
</div> |
|
<div class="after hidden"> |
|
<div class="input-cont"> |
|
<p class="input">Thank you for subscribing!</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script type="text/javascript"> |
|
$(document).ready(function () { |
|
console.log("airtable"); |
|
$('.subscribe-to-newsletter button').bind('click', function () { |
|
const cont = $(this).closest('.subscribe-to-newsletter'); |
|
const emailVal = $(cont).find('.input input').val(); |
|
console.log("click", emailVal); |
|
|
|
if (emailVal.indexOf('@') !== -1) { |
|
const data = {fields: {email: emailVal}, typecast: true}; |
|
$.ajax({ |
|
// email subscribers is the table's name |
|
url: 'https://api.airtable.com/v0/BASE_ID/email_subscribers', |
|
type: 'post', |
|
data: JSON.stringify(data), |
|
// api key |
|
headers: { |
|
"Authorization": 'Bearer MY_API_KEY', |
|
"Content-Type": 'application/json' |
|
}, |
|
dataType: 'json', |
|
success: function (data) { |
|
console.info(data); |
|
$(cont).find('.before').addClass('hidden'); |
|
$(cont).find('.after').removeClass('hidden'); |
|
} |
|
}); |
|
} |
|
}); |
|
}); |
|
</script> |
