Enable and activate MailChimp support in subscribe form

This is not just MailChimp, but any service really that lets you
embed a form
This commit is contained in:
Badri Sunderarajan 2020-03-15 13:31:23 +05:30
parent f23715d4b9
commit dd68fea249
2 changed files with 36 additions and 2 deletions

View file

@ -14,6 +14,15 @@ social_media:
instagram: 'snipettemag' instagram: 'snipettemag'
liberapay: 'snipettemag' liberapay: 'snipettemag'
subscribe_form:
form:
action: 'https://medium.us18.list-manage.com/subscribe/post?u=63d185e7c795f2758d0d07c8b&id=81720ca987'
id: 'mc-embedded-subscribe-form'
email_input:
name: 'EMAIL'
honeypot:
name: 'b_63d185e7c795f2758d0d07c8b_81720ca987'
nav_home: nav_home:
- title: Home - title: Home
link: / link: /

View file

@ -1,7 +1,25 @@
<template> <template>
<form method="post" action="/subscribe/" id="" class=""> <form method="post"
:action="Admin.subscribe_form && Admin.subscribe_form.form.action || '/subscribe/'"
:id="Admin.subscribe_form && Admin.subscribe_form.form.id"
:class="Admin.subscribe_form && Admin.subscribe_form.form.class"
>
<div class="form-group"> <div class="form-group">
<input class="subscribe-email" type="email" name="email" :placeholder=placeholder> <input
:class="Admin.subscribe_form && Admin.subscribe_form.email_input.class || 'subscribe-email'"
type="email"
:name="Admin.subscribe_form && Admin.subscribe_form.email_input.name || 'email'"
:placeholder=placeholder
/>
<div
v-if="Admin.subscribe_form && Admin.subscribe_form.honeypot"
style="position:absolute; left: -200vw;"
aria-hidden="true"
>
<input
:name="Admin.subscribe_form && Admin.subscribe_form.honeypot.name || 'nothing'"
/>
</div>
</div> </div>
<button id="" class="" type="submit"> <button id="" class="" type="submit">
@ -11,12 +29,19 @@
</template> </template>
<script> <script>
import Admin from "../../data/admin.yml";
export default { export default {
props: { props: {
placeholder: { placeholder: {
type: String, type: String,
default: "youremail@example.com" default: "youremail@example.com"
} }
},
computed: {
Admin() {
return Admin;
}
} }
} }
</script> </script>