2021-12-02 18:38:49 +00:00
export const ConvertKitEmailForm = ( ) = > {
2021-12-02 23:49:46 +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 = "{"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 300 ms ease - in - out ; transition :all 300 ms ease - in - out ; padding :12px 24 px ; } . 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 300 ms ; transition :border - color ease - out 300 ms ; } . formkit - form [ data - uid = "db04a49037" ] . formkit - input :focus { outline :none ; border - color : # 1677 be ; - webkit - transition :border - color ease 300 ms ; transition :border - color ease 300 ms ; } . 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
` ,
2021-12-02 23:49:46 +00:00
}