manifold/web/components/convert-kit-email-form.tsx

27 lines
32 KiB
TypeScript
Raw Normal View History

2021-12-02 18:38:49 +00:00
export const ConvertKitEmailForm = () => {
2021-12-02 23:39:11 +00:00
return <div dangerouslySetInnerHTML={convertkitHTML} />;
};
2021-12-02 18:38:49 +00:00
const convertkitHTML = {
2021-12-02 23:39:11 +00:00
__html: `
2021-12-02 18:38:49 +00:00
<script src="https://f.convertkit.com/ckjs/ck.5.js"></script>
<form action="https://app.convertkit.com/forms/2815990/subscriptions" class="seva-form formkit-form" method="post" data-sv-form="2815990" data-uid="db04a49037" data-format="inline" data-version="5" data-options="{&quot;settings&quot;:{&quot;after_subscribe&quot;:{&quot;action&quot;:&quot;message&quot;,&quot;success_message&quot;:&quot;Success! Now check your email to confirm your subscription.&quot;,&quot;redirect_url&quot;:&quot;&quot;},&quot;analytics&quot;:{&quot;google&quot;:null,&quot;facebook&quot;:null,&quot;segment&quot;:null,&quot;pinterest&quot;:null,&quot;sparkloop&quot;:null,&quot;googletagmanager&quot;:null},&quot;modal&quot;:{&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;powered_by&quot;:{&quot;show&quot;:true,&quot;url&quot;:&quot;https://convertkit.com/features/forms?utm_campaign=poweredby&amp;utm_content=form&amp;utm_medium=referral&amp;utm_source=dynamic&quot;},&quot;recaptcha&quot;:{&quot;enabled&quot;:false},&quot;return_visitor&quot;:{&quot;action&quot;:&quot;show&quot;,&quot;custom_content&quot;:&quot;&quot;},&quot;slide_in&quot;:{&quot;display_in&quot;:&quot;bottom_right&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;sticky_bar&quot;:{&quot;display_in&quot;:&quot;top&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15}},&quot;version&quot;:&quot;5&quot;}" min-width="400 ">
<div data-style="clean">
<ul class="formkit-alert formkit-alert-error" data-element="errors" data-group="alert"></ul>
<div data-element="fields" data-stacked="false" class="seva-fields formkit-fields">
<div class="formkit-field" style="max-width:400px;margin-right:12px;"><input class="formkit-input" name="email_address" aria-label="Email Address" placeholder="Email Address" required="" type="email" style="color: rgb(0, 0, 0); border-color: rgb(227, 227, 227); border-radius: 4px; font-weight: 400;"></div>
<button data-element="submit" class="formkit-submit formkit-submit" style="color: rgb(255, 255, 255); background-color: rgb(17, 185, 129); border-radius: 4px; font-weight: 400; max-width: 175px">
<div class="formkit-spinner">
<div></div>
<div></div>
<div></div>
</div>
<span class="">Keep me updated</span>
</button>
</div>
</div>
<style>.formkit-form[data-uid="db04a49037"] *{box-sizing:border-box;}.formkit-form[data-uid="db04a49037"]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.formkit-form[data-uid="db04a49037"] legend{border:none;font-size:inherit;margin-bottom:10px;padding:0;position:relative;display:table;}.formkit-form[data-uid="db04a49037"] fieldset{border:0;padding:0.01em 0 0 0;margin:0;min-width:0;}.formkit-form[data-uid="db04a49037"] body:not(:-moz-handler-blocked) fieldset{display:table-cell;}.formkit-form[data-uid="db04a49037"] h1,.formkit-form[data-uid="db04a49037"] h2,.formkit-form[data-uid="db04a49037"] h3,.formkit-form[data-uid="db04a49037"] h4,.formkit-form[data-uid="db04a49037"] h5,.formkit-form[data-uid="db04a49037"] h6{color:inherit;font-size:inherit;font-weight:inherit;}.formkit-form[data-uid="db04a49037"] h2{font-size:1.5em;margin:1em 0;}.formkit-form[data-uid="db04a49037"] h3{font-size:1.17em;margin:1em 0;}.formkit-form[data-uid="db04a49037"] p{color:inherit;font-size:inherit;font-weight:inherit;}.formkit-form[data-uid="db04a49037"] ol:not([template-default]),.formkit-form[data-uid="db04a49037"] ul:not([template-default]),.formkit-form[data-uid="db04a49037"] blockquote:not([template-default]){text-align:left;}.formkit-form[data-uid="db04a49037"] p:not([template-default]),.formkit-form[data-uid="db04a49037"] hr:not([template-default]),.formkit-form[data-uid="db04a49037"] blockquote:not([template-default]),.formkit-form[data-uid="db04a49037"] ol:not([template-default]),.formkit-form[data-uid="db04a49037"] ul:not([template-default]){color:inherit;font-style:initial;}.formkit-form[data-uid="db04a49037"] .ordered-list,.formkit-form[data-uid="db04a49037"] .unordered-list{list-style-position:outside !important;padding-left:1em;}.formkit-form[data-uid="db04a49037"] .list-item{padding-left:0;}.formkit-form[data-uid="db04a49037"][data-format="modal"]{display:none;}.formkit-form[data-uid="db04a49037"][data-format="slide in"]{display:none;}.formkit-form[data-uid="db04a49037"][data-format="sticky bar"]{display:none;}.formkit-sticky-bar .formkit-form[data-uid="db04a49037"][data-format="sticky bar"]{display:block;}.formkit-form[data-uid="db04a49037"] .formkit-input,.formkit-form[data-uid="db04a49037"] .formkit-select,.formkit-form[data-uid="db04a49037"] .formkit-checkboxes{width:100%;}.formkit-form[data-uid="db04a49037"] .formkit-button,.formkit-form[data-uid="db04a49037"] .formkit-submit{border:0;border-radius:5px;color:#ffffff;cursor:pointer;display:inline-block;text-align:center;font-size:15px;font-weight:500;cursor:pointer;margin-bottom:15px;overflow:hidden;padding:0;position:relative;vertical-align:middle;}.formkit-form[data-uid="db04a49037"] .formkit-button:hover,.formkit-form[data-uid="db04a49037"] .formkit-submit:hover,.formkit-form[data-uid="db04a49037"] .formkit-button:focus,.formkit-form[data-uid="db04a49037"] .formkit-submit:focus{outline:none;}.formkit-form[data-uid="db04a49037"] .formkit-button:hover > span,.formkit-form[data-uid="db04a49037"] .formkit-submit:hover > span,.formkit-form[data-uid="db04a49037"] .formkit-button:focus > span,.formkit-form[data-uid="db04a49037"] .formkit-submit:focus > span{background-color:rgba(0,0,0,0.1);}.formkit-form[data-uid="db04a49037"] .formkit-button > span,.formkit-form[data-uid="db04a49037"] .formkit-submit > span{display:block;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;padding:12px 24px;}.formkit-form[data-uid="db04a49037"] .formkit-input{background:#ffffff;font-size:15px;padding:12px;border:1px solid #e3e3e3;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;line-height:1.4;margin:0;-webkit-transition:border-color ease-out 300ms;transition:border-color ease-out 300ms;}.formkit-form[data-uid="db04a49037"] .formkit-input:focus{outline:none;border-color:#1677be;-webkit-transition:border-color ease 300ms;transition:border-color ease 300ms;}.formkit-form[data-uid="db04a49037"] .formkit-input::-webkit-input-placeholder{color:inherit;opacity:0.8;}.formkit-form[data-uid="db04a49037"] .formkit-input::-moz-placeholder{color:inherit;
</form>
2021-12-02 23:39:11 +00:00
`,
};