29 lines
32 KiB
TypeScript
29 lines
32 KiB
TypeScript
|
export const ConvertKitEmailForm = () => {
|
||
|
return (
|
||
|
<div dangerouslySetInnerHTML={convertkitHTML} />
|
||
|
)
|
||
|
}
|
||
|
|
||
|
const convertkitHTML = {
|
||
|
__html: `
|
||
|
<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="{"settings":{"after_subscribe":{"action":"message","success_message":"Success! Now check your email to confirm your subscription.","redirect_url":""},"analytics":{"google":null,"facebook":null,"segment":null,"pinterest":null,"sparkloop":null,"googletagmanager":null},"modal":{"trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15},"powered_by":{"show":true,"url":"https://convertkit.com/features/forms?utm_campaign=poweredby&utm_content=form&utm_medium=referral&utm_source=dynamic"},"recaptcha":{"enabled":false},"return_visitor":{"action":"show","custom_content":""},"slide_in":{"display_in":"bottom_right","trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15},"sticky_bar":{"display_in":"top","trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15}},"version":"5"}" 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>
|
||
|
`
|
||
|
}
|