1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[865],{11752:function(n,e,t){n.exports=t(88027)},56841:function(n,e,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/form/[slug]",function(){return t(9355)}])},96538:function(n,e){"use strict";e.Z={src:"/_next/static/media/create_form_thumbnail.1d4c3ec3.png",height:1080,width:1506,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAG1BMVEX////4+Pr8/PyytNiZmsGJi8yQktB8fcloa8iGwjNIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKElEQVR4nFXGsREAIAwDsbeDE/afmDuoUCV2ku4eCoMpCsn645dZVw4OrwCBLuH39wAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:6}},36859:function(n,e){"use strict";e.Z={src:"/_next/static/media/paste_inside_ide_thumbnail.0a8eb2d9.png",height:1080,width:1500,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAIVBMVEUbIDAnKTV2aVRjVkINFixnXlCylFqSeU+MdU+Se1O0nXP7qKosAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKklEQVR4nGNg42Bn5+Tk4GJgZmFgYGBgYWVgZmBkZGRkQGbApNiYwIALABLAAJVHap47AAAAAElFTkSuQmCC",blurWidth:8,blurHeight:6}},92056:function(n,e){"use strict";e.Z={src:"/_next/static/media/sumbul_code_assistant.6712997f.png",height:260,width:260,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAV1BMVEVMaXFmYWC6qZ9pZ2nRqISTcE68mIF9UCq7vcLgwZeEho2MjZHCn3nEonmrg1yriWOjkYS0trp9WjiEXzuVdleIeW6dinigoqfAnnWwsrh8XT+TlZqolohKVNt8AAAAF3RSTlMANP5f/Pj8DfsXfHQ3xbrW+UVsj+Cxq9J6N+8AAAAJcEhZcwAACxMAAAsTAQCanBgAAABASURBVHicFcnHDcAwDMBAxlW205vS9p8z0Ic4gAD0xUoZrikbxhDiCuSY0rMB3ezct2dYbhE5Af+q6mGrtlY9P0ApAhaA5F4eAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:8}},34803:function(n,e){"use strict";e.Z={src:"/_next/static/media/test_submission_thumbnail.35e94be0.png",height:1080,width:1506,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAHlBMVEX+/v7Xua3p08rjtaPhrpnnybz99PH959z959vhmn1j+h0GAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAJUlEQVR4nGPgZGFhZmZmZmFgZQADJhCDjQ3KYOeAMiBSLIwQAAAM0gBkPUcRPgAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:6}},66496:function(n,e,t){"use strict";t.d(e,{Z:function(){return m}});var r=t(7297),i=t(85893),o=t(92208),s=t(14141);function a(){var n=(0,r.Z)(["\n background: #F7F9FC;\n border-radius: 4px;\n position: relative;\n width: 320px;\n height: 130px;\n border-radius: 120px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 16px;\n"]);return a=function(){return n},n}function c(){var n=(0,r.Z)(["\n display: flex;\n width: 60px;\n height: 24px;\n gap: 4px;\n\n background: #FFFFFF;\n box-shadow: 0px 24px 40px rgba(83, 84, 121, 0.04), 0px 1px 2px rgba(83, 84, 121, 0.02);\n border-radius: 12px;\n justify-content: center;\n align-items: center;\n"]);return c=function(){return n},n}function d(){var n=(0,r.Z)(["\n width: 96px;\n height: 96px;\n border-radius: 96px;\n background: #fff;\n box-shadow: 0px 24px 40px rgba(83, 84, 121, 0.04), 0px 1px 2px rgba(83, 84, 121, 0.02);\n display: flex;\n align-items: center;\n justify-content: center;\n"]);return d=function(){return n},n}var p=s.ZP.div.withConfig({componentId:"sc-ee2d2d83-0"})(a()),l=s.ZP.div.withConfig({componentId:"sc-ee2d2d83-1"})(c()),h=s.ZP.div.withConfig({componentId:"sc-ee2d2d83-2"})(d());function m(n){var e=n.logo,t=n.name;return(0,i.jsxs)(p,{children:[(0,i.jsx)(h,{as:o.E.div,animate:{scale:[1.08,1,1.08]},transition:{repeat:1/0,duration:1.6,ease:[.59,.35,.06,1]},children:(0,i.jsx)("img",{src:"/logo-colored.svg",width:34,height:34,alt:"formcarry"})}),(0,i.jsxs)(l,{as:o.E.div,animate:{rotate:[0,90,180]},transition:{repeat:1/0,duration:1.6,times:[0,.2,.5,1],ease:[.59,.35,.06,1]},children:[(0,i.jsx)("svg",{width:18,height:18,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,i.jsx)(o.E.path,{d:"M9 15.25c-3.45 0-6.25-2.8-6.25-6.25S5.55 2.75 9 2.75s6.25 2.8 6.25 6.25-2.8 6.25-6.25 6.25Zm0-5.625h2.5v-1.25H9V6.5L6.5 9 9 11.5V9.625Z",fill:"#005DFF",animate:{scale:[1,.8,1],fill:["#005dff","#DDE0EE","#005dff"]},transition:{repeat:1/0,duration:1.6,ease:[.59,.35,.06,1]}})}),(0,i.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,i.jsx)(o.E.path,{d:"M8.00005 14.111L2.72228 11.
10555L2.72228 4.94436L8.00006 1.8888L13.2778 4.94436L13.2778 11.0555L8.00005 14.111ZM8.00005 6.33325C7.55803 6.33325 7.1341 6.50884 6.82154 6.8214C6.50898 7.13396 6.33339 7.55788 6.33339 7.99991C6.33339 8.44194 6.50898 8.86586 6.82154 9.17842C7.1341 9.49098 7.55803 9.66658 8.00005 9.66658C8.44208 9.66658 8.86601 9.49098 9.17857 9.17842C9.49113 8.86586 9.66672 8.44194 9.66672 7.99991C9.66672 7.55789 9.49113 7.13396 9.17857 6.8214C8.86601 6.50884 8.44208 6.33325 8.00005 6.33325V6.33325Z",fill:"#005DFF",animate:{scale:[.8,1,.8],rotate:[0,180,-90],fill:["#DDE0EE","#005dff","#005dff","#DDE0EE"]},transition:{repeat:1/0,repeatType:"mirror",duration:1.6,ease:[.59,.35,.06,1]}})}),(0,i.jsx)("svg",{width:18,height:18,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,i.jsx)(o.E.path,{d:"M9 2.74988C12.45 2.74988 15.25 5.54988 15.25 8.99988C15.25 12.4499 12.45 15.2499 9 15.2499C5.55 15.2499 2.75 12.4499 2.75 8.99988C2.75 5.54988 5.55 2.74988 9 2.74988ZM9 8.37488H6.5V9.62488H9V11.4999L11.5 8.99988L9 6.49988V8.37488Z",fill:"#005DFF",animate:{scale:[1,.8,1],fill:["#005dff","#DDE0EE","#005dff"]},transition:{repeat:1/0,duration:1.6,ease:[.59,.35,.06,1]}})})]}),(0,i.jsx)(h,{as:o.E.div,animate:{scale:[1.08,1,1.08]},transition:{repeat:1/0,duration:1.6,ease:[.59,.35,.06,1]},children:(0,i.jsx)("img",{src:"".concat(e||"/mailchimp-logo.svg"),width:48,height:48,alt:t?"".concat(t," logo"):""})})]})}},9355:function(n,e,t){"use strict";t.r(e),t.d(e,{__N_SSG:function(){return wn},default:function(){return vn}});var r=t(828),i=t(7297),o=t(85893),s=t(3508),a=t(76562),c=t(6923),d=t(66496),p=t(63463),l=t(2714),h=t(5817),m=t(14141),u=t(9008),x=t.n(u),f=t(46220),g=t(11752),A=t.n(g),y=t(67294),b=t(61608),w=t.n(b),v=t(92056),j=t(63797),C=t(56929),_=t(88981),Z=t(5051),E=t(55218),F=t(74944),k=t(1358),S=t(97650),I=t(21476),P=t(96538),T={src:"/_next/static/media/copy_example_form_code_thumbnail.e7b739b3.png",height:1080,width:1270,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAMAAAACh/xsAAAAKlBMVEX+/v+TmMefo9WxtN2GjdTr6/b19fzz8/eRltfj5Oj09Ph6gtSprdpfatBLYSugAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMUlEQVR4nB3Ixw0AMAjAQIfQ0vZfNwK/TuapqmYehG4W9oaLEGtFHzdzJpcwL5xRSX4cxgDhDXbEMgAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:7},L=t(36859),M=t(34803);function V(){var n=(0,i.Z)(["\n max-width: 1112px;\n margin: 0 auto;\n padding: 120px 24px 0 24px;\n\n @media (min-width: ","px){\n padding: 200px 0 0 0;\n }\n"]);return V=function(){return n},n}function H(){var n=(0,i.Z)(["\n position: relative;\n margin-top: 12px;\n"]);return H=function(){return n},n}function R(){var n=(0,i.Z)(["\n width: 100%;\n max-width: 440px;\n height: 1px;\n background-color: #ECEFF9;\n margin: 48px auto 40px auto;\n"]);return R=function(){return n},n}function B(){var n=(0,i.Z)(["\n margin-top: 120px;\n display: flex;\n flex-direction: column;\n gap: 128px;\n"]);return B=function(){return n},n}function D(){var n=(0,i.Z)(["\n @media (min-width: ","px){\n width: 75%;\n margin: 140px auto 0 auto;\n }\n\n video {\n max-width: 100%;\n margin: 12px 0;\n border-radius: 12px;\n }\n\n img {\n max-width: 100%;\n margin: 12px 0;\n }\n\n a {\n color: "," !important;\n }\n"]);return D=function(){return n},n}function U(){var n=(0,i.Z)(["\n display: flex;\n flex-direction: ",";\n gap: 12px;\n\n @media (min-width: ","px){\n display: grid;\n grid-template-columns: ",";\n gap: 48px;\n }\n\n align-items: center;\n\n video {\n max-width: 100%;\n margin: 12px 0;\n border-radius: 12px;\n }\n\n img {\n max-width: 100%;\n margin: 12px 0;\n }\n\n a {\n color: "," !important;\n }\n"]);return U=function(){return n},n}function N(){var n=(0,i.Z)(["\n padding: 32px 40px;\n border: 1px solid ",";\n border-radius: 12px; \n margin-top: 24px;\n"]);return N=function(){return n},n}function z(){var n=(0,i.Z)(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-top: 32px;\n"]);return z=function(){return n},n}function G(){var n=(0,i.Z)(["\n width: 48px;\n height: 48px;\n border-radius: 48px;\n background-color: ",";\n display: flex;\n justify-content: center;\n align-items: center;\n"]);return G=function(){return n},n}function X(){var n=(0,i.Z)(["\n box-sizing: border-box;\n margin: 24px auto 0 auto;\n border-radius: 24px;\n padding: 4px;\n background-color: ",";\n min-width: 100%;\n position: relative;\n\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media (min-width: ","px) {\n min-width: 500px;\n flex-direction: initial;\n }\n\n"]);return X=function(){return n},n}function O(){var n=(0,i.Z)(['\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n gap: 6px;
1\n padding: 0 30px;\n height: 40px;\n transition: 150ms all;\n width: 100%;\n cursor: pointer;\n position: relative;\n z-index: 2;\n flex: auto;\n\n &:before {\n content: "";\n z-index: -1;\n width: 100%;\n height: 100%;\n border-radius: ',";\n transform: scaleX(",");\n transition: 170ms all;\n position: absolute;\n top: 0;\n left: 0;\n background: ",";\n ","\n }\n\n p, svg {\n font-weight: 500;\n color: "," !important;\n }\n\n p, path {\n transition: 200ms all;\n transition-delay: 100ms;\n }\n\n p {\n white-space: nowrap;\n }\n"]);return O=function(){return n},n}function W(){var n=(0,i.Z)(["\n width: ","px;\n height: 40px;\n border-radius: 20px;\n background-color: ",";\n box-shadow: 0px 18px 31px rgba(113, 116, 152, 0.1), 0px 8px 16.2244px rgba(113, 116, 152, 0.0651589), 0px 8px 8.46625px rgba(113, 116, 152, 0.05);\n\n position: absolute;\n top: 4px;\n left: ","px;\n\n transition: 200ms left cubic-bezier(0.6, 0.6, 0, 1), 350ms cubic-bezier(0.6, 0.6, 0, 1);\n"]);return W=function(){return n},n}function Y(){var n=(0,i.Z)(["\n width: 1112px;\n height: 498px;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n z-index: -2;\n"]);return Y=function(){return n},n}function J(){var n=(0,i.Z)(['\n width: 100%;\n height: 100%;\n position: relative;\n padding: 32px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 32px;\n\n &:before {\n content: "";\n width: 90%;\n max-width: 744px;\n height: 100%;\n position: absolute;\n top: 0px;\n background: rgb(213, 200, 249);\n z-index: -2;\n left: 50%;\n transform: translateX(-50%);\n border-radius: 24px;\n padding-bottom: 24px;\n }\n\n &:after {\n content: "";\n width: 90%;\n max-width: 744px;\n height: 100%;\n position: absolute;\n top: 0px;\n background-image: url(/black_noise.png);\n mix-blend-mode: overlay;\n z-index: -1;\n left: 50%;\n transform: translateX(-50%);\n border-radius: 24px;\n padding-bottom: 24px;\n }\n\n @media (min-width: ',"px) {\n width: initial;\n }\n"]);return J=function(){return n},n}function q(){var n=(0,i.Z)(["\n width: 100%;\n height: 100%;\n padding: 4px 16px 16px 16px;\n box-sizing: border-box;\n"]);return q=function(){return n},n}function Q(){var n=(0,i.Z)(["\n width: 100%;\n height: 100%;\n border-radius: 6px;\n background-color: ",";\n overflow: scroll;\n\n .react-syntax-highlighter-line-number {\n color: ",";\n }\n"]);return Q=function(){return n},n}function K(){var n=(0,i.Z)(["\n margin-top: 16px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n\n position: relative;\n"]);return K=function(){return n},n}function $(){var n=(0,i.Z)(["\n padding: 4px 12px 4px 8px;\n border-radius: 6px;\n transition: 250ms all;\n\n border: 2px solid #fff;\n background: #fff;\n box-shadow: 0px 1px 1px rgba(108, 111, 147, 0.12);\n cursor: pointer;\n position: absolute;\n top: 64px;\n cursor: pointer;\n right: 36px;\n z-index: 3;\n\n display: flex;\n gap: 4px;\n align-items: center;\n"]);return $=function(){return n},n}function nn(){var n=(0,i.Z)(["\n background-color: transparent;\n width: 48px;\n height: 30px;\n &:after {\n content: '';\n width: 6px;\n height: 6px;\n background-color: ",";\n border-radius: 6px;\n }\n"]);return nn=function(){return n},n}function en(){var n=(0,i.Z)(["\n display: grid;\n gap: 24px;\n grid-template-columns: 48px 1fr;\n"]);return en=function(){return n},n}j.Z.registerLanguage("jsx",C.Z);var tn=A()().publicRuntimeConfig.url,rn=m.ZP.div.withConfig({componentId:"sc-7c877d29-0"})(V(),(function(n){return n.theme.media.md})),on=m.ZP.div.withConfig({componentId:"sc-7c877d29-1"})(H()),sn=(m.ZP.div.withConfig({componentId:"sc-7c877d29-2"})(R()),m.ZP.div.withConfig({componentId:"sc-7c877d29-3"})(B())),an=m.ZP.div.withConfig({componentId:"sc-7c877d29-4"})(D(),(function(n){return n.theme.media.tb}),(function(n){return n.theme.colors.blue_base})),cn=m.ZP.div.withConfig({componentId:"sc-7c877d29-5"})(U(),(function(n){return n.reverse?"column":"column-reverse"}),(function(n){return n.theme.media.tb}),(function(n){return n.reverse?"1fr .8fr":".8fr 1fr"}),(function(n){return n.theme.colors.blue_base})),dn=(0,m.ZP)(sn).withConfig({componentId:"sc-7c877d29-6"})(N(),(function(n){return n.theme.colors[200]})),pn=m.ZP.div.withConfig({componentId:"sc-7c877d29-7"})(z()),ln=m.ZP.div.withConfig({componentId:"sc-7c877d29-8"})(G(),(function(n){return n.theme.colors[100]})),hn=m.ZP.div.withConfig({componentId:"sc-7c877d29-9"})(X(),(function(n){return n.theme.colors[100]}),(function(n){return n.theme.media.md})),mn=m.ZP.div.withConfig({componentId:"sc-7c877d29-10"})(O(),(function(n){return n.isActive?"20px":"100px"}),(function(n){return n.isActive?1:.8}),(function(n){return n.isActive?n.theme.colors.white:"transparent"}),(function(n){return n.isActive&&"\n box-shadow: 0px 18px 31px rgba(113, 116, 152, 0.1
1), 0px 8px 16.2244px rgba(113, 116, 152, 0.0651589), 0px 8px 8.46625px rgba(113, 116, 152, 0.05);\n "}),(function(n){return n.isActive?n.theme.colors[900]:n.theme.colors[500]})),un=(m.ZP.div.withConfig({componentId:"sc-7c877d29-11"})(W(),(function(n){return n.width}),(function(n){return n.theme.colors.white}),(function(n){return n.left})),m.ZP.div.withConfig({componentId:"sc-7c877d29-12"})(Y()),m.ZP.div.withConfig({componentId:"sc-7c877d29-13"})(J(),(function(n){return n.theme.media.md}))),xn=m.ZP.div.withConfig({componentId:"sc-7c877d29-14"})(q()),fn=m.ZP.div.withConfig({componentId:"sc-7c877d29-15"})(Q(),(function(n){return n.theme.colors[100]}),(function(n){return n.theme.colors[400]})),gn=m.ZP.div.withConfig({componentId:"sc-7c877d29-16"})(K()),An=m.ZP.div.withConfig({componentId:"sc-7c877d29-17"})($()),yn=(0,m.ZP)(ln).withConfig({componentId:"sc-7c877d29-18"})(nn(),(function(n){return n.theme.colors[200]})),bn=m.ZP.div.withConfig({componentId:"sc-7c877d29-19"})(en()),wn=!0;function vn(n){var e=n.record,t=n.markdown,i=void 0!==t&&t,m=(0,y.useState)(!1),u=m[0],g=m[1],A=(0,y.useState)(!1),b=A[0],C=A[1],V=(0,r.Z)((0,S.YD)({threshold:.2}),2),H=V[0],R=V[1],B=(0,r.Z)((0,S.YD)({threshold:.2}),2),D=B[0],U=B[1];(0,y.useEffect)((function(){R&&!u&&g(!0),U&&!b&&C(!0)}),[R,U]);var N=(0,y.useState)(1),z=N[0],G=N[1],X=(0,y.useState)(!1),O=X[0],W=X[1],Y=(0,r.Z)((0,S.YD)({threshold:.4}),2),J=Y[0],q=Y[1],Q=(0,y.useState)(!1),K=Q[0],$=Q[1];return(0,y.useEffect)((function(){!K&&q&&$(!0)}),[q]),(0,y.useEffect)((function(){O&&setTimeout((function(){W(!1)}),2e3)}),[O]),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(f.Z,{title:e.seo_title||"".concat(e.name," Contact Form Example: Send Emails with No Backend | Formcarry"),description:e.seo_description||"Copy a working ".concat(e.name," contact form and submit it with a plain POST or fetch. Formcarry sends you the emails, no backend code required."),path:"/form/".concat(e.slug),ogType:"article"}),(0,o.jsxs)(x(),{children:[(0,o.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:'\n {\n "@context":"https://schema.org",\n "@type":"Article",\n "datePublished":"'.concat(e.date_created.split("T").shift(),'",\n "description": "This guide will teach you how to make a contact form with ').concat(e.name,'. Receive submission emails, get notifications, without any backend code.",\n "mainEntityOfPage":{\n "@type":"WebPage",\n "@id":"https://formcarry.com/form/').concat(e.slug,'"\n },\n "headline":"').concat(e.name,' Contact Form with Only Frontend, Send emails without any backend code",\n "dateModified":"').concat(e.date_updated.split("T").shift(),'",\n "image":"https://formcarry.com/og-image.jpg",\n "author":{\n "@type":"Organization",\n "name":"Formcarry",\n "url":"https://formcarry.com",\n "sameAs": [\n "https://twitter.com/formcarry",\n "https://github.com/formcarry"\n ]\n },\n "publisher":{\n "@type":"Organization",\n "name":"Formcarry",\n "logo":{\n "@type":"ImageObject",\n "url":"https://carrier.formcarry.com/website-assets/formcarry_logo.png",\n "width": "256",\n "height": "256"\n }\n },\n "keywords": ["').concat(e.name,'", "Contact Form", "Frontend", "formcarry", "Email Notifications", "Auto Responses", "Upload Files ').concat(e.name,' Form"],\n "isAccessibleForFree": "True",\n "hasPart": {\n "@type": "WebPageElement",\n "isAccessibleForFree": "True",\n "cssSelector": ".main-content"\n }\n }\n ')}}),(0,o.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:'\n {\n "@context":"https://schema.org",\n "@type":"HowTo",\n "name":"How to set up a '.concat(e.name,' contact form with Formcarry",\n "totalTime":"PT2M",\n "step":[\n {"@type":"HowToStep","name":"Create your Formcarry form endpoint","text":"Sign up to Formcarry, create a form, and copy its endpoint URL."},\n {"@type":"HowToStep","name":"Copy the example code","text":"Copy one of the ').concat(e.name,' examples on this page into your project."},\n {"@type":"HowToStep","name":"Replace the placeholder endpoint URL","text":"Point the form at your own Formcarry endpoint URL."},\n {"@type":"HowToStep","name":"Send a test submission","text":"Submit the form and receive the message by email and in your dashboard."}\n ]\n }\n ')}})]}),(0,o.jsx)(l.Z,{}),(0,o.jsxs)(rn,{children:[(0,o.jsxs)(h.kC,{flexDirection:"column",alignItems:"center",className:"main-content",children:[(0,o.jsx)(w(),{src:v.Z,width:84,height:84,unoptimized:!0,priority:!0,style:{position:"relative",top:"6px"},alt:""}),(0,o.jsx)(d.Z,{logo:"".concat(tn,"assets/").concat(e.logo),name:e.name}),(0,o.jsx)(h.xv,{as:"p",type:"headline_m",color:"purple_base",m:"48px 0 0 0",children:"FORMCARRY EXAMPLES"}),(0,o.jsx)(on,{children:(0,o.jsxs)(h.xv,{type:"h1",mobileType:"h5",textAlign:"center",children:[e.name," Contact Form ",(0,o.jsx)("br",{})," with only Frontend Code"]})}),(0,o.jsx)(h.xv,{whiteSpace:"pre-line",type:"body_m",textAlign:"center",m:"12px 0 0 0",children:"".concat(e.description)})]}),e.examples&&(0,o.jsxs)(gn,{children:[e.examples.length>1&&(0,o.jsx)(hn,{children:e.examples.map((function(n,e){return(0,o.jsx)(mn,{onClick:function(){return G(e+1)},isActive:z===e+1,children:(0,o.jsx)(h.xv,{type:"button",color:500,weight:"medium",children:n.type})},e)}))}),(0,o.jsx)(un,{children:(0,o.jsx)(p.Z,{className:"CodeEditor",shadow:"0px 96px 164px -48px rgba(65, 0, 163, 0.24)",height:"auto",width:"836px",noAnimate:!0,children:(0,o.jsx)(xn,{children:(0,o.jsxs)(fn,{children:[(0,o.jsx)(Z.Z,{text:e.examples[z-1||0].code||"",onSuccess:function(){W(!0)},children:(0,o.jsxs)(An,{children:[" ",O?(0,o.jsx)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,o.jsx)("path",{d:"M6.52789 6.52789V3.75011C6.52789 3.56593 6.60105 3.3893 6.73128 3.25906C6.86152 3.12883 7.03815 3.05566 7.22233 3.05566H16.2501C16.4343 3.05566 16.6109 3.12883 16.7412 3.25906C16.8714 3.3893 16.9446 3.56593 16.9446 3.75011V12.7779C16.9446 12.9621 16.8714 13.1387 16.7412 13.2689C16.6109 13.3992 16.4343 13.4723 16.2501 13.4723H13.4723V16.2452C13.4723 16.6314 13.1605 16.9446 12.773 16.9446H3.75497C3.66311 16.9446 3.57213 16.9266 3.48725 16.8915C3.40236 16.8564 3.32524 16.8049 3.26028 16.7399C3.19533 16.675 3.14382 16.5979 3.10871 16.513C3.0736 16.4281 3.05557 16.3371 3.05566 16.2452L3.05775 7.22719C3.05775 6.84108 3.36955 6.52789 3.75705 6.52789H6.52789ZM7.91678 6.52789H12.773C13.1591 6.52789 13.4723 6.83969 13.4723 7.22719V12.0834H15.5557V4.44455H7.91678V6.52789ZM7.57164 14.1668L11.4994 10.2383L10.5175 9.25636L7.57164 12.2029L6.09733 10.7293L5.11539 11.7112L7.57164 14.1668Z",fill:"#959FB2"})}):(0,o.jsx)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,o.jsx)("path",{d:"M6.52789 6.52789V3.75011C6.52789 3.56593 6.60105 3.3893 6.73128 3.25906C6.86152 3.12883 7.03815 3.05566 7.22233 3.05566H16.2501C16.4343 3.05566 16.6109 3.12883 16.7412 3.25906C16.8714 3.3893 16.9446 3.56593 16.9446 3.75011V12.7779C16.9446 12.9621 16.8714 13.1387 16.7412 13.2689C16.6109 13.3992 16.4343 13.4723 16.2501 13.4723H13.4723V16.2452C13.4723 16.6314 13.1605 16.9446 12.773 16.9446H3.75497C3.66311 16.9446 3.57213 16.9266 3.48725 16.8915C3.40236 16.8564 3.32524 16.8049 3.26028 16.7399C3.19533 16.675 3.14382 16.5979 3.10871 16.513C3.0736 16.4281 3.05557 16.3371 3.05566 16.2452L3.05775 7.22719C3.05775 6.84108 3.36955 6.52789 3.75705 6.52789H6.52789ZM7.91678 6.52789H12.773C13.1591 6.52789 13.4723 6.83969 13.4723 7.22719V12.0834H15.5557V4.44455H7.91678V6.52789Z",fill:"#959FB2"})})," ",(0,o.jsx)(h.xv,{type:"body_s",children:"Copy Code"})]})}),e.examples.map((function(n,e){return(0,o.jsx)("div",{style:{display:z===e+1?void 0:"none"},children:(0,o.jsx)(j.Z,{language:n.language||"html",style:_.Z,showLineNumbers:!0,wrapLines:!0,lineNumberStyle:{minWidth:"17px"},customStyle:{margin:0,padding:"16px 1em"},children:n.code})},e)}))]})})})})]}),i&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(h.kC,{flexDirection:"column",m:"100px 0 0 0",alignItems:"center",gap:"8px",children:[(0,o.jsx)(h.xv,{as:"p",type:"headline_m",color:"blue_base",m:"48px 0 0 0",textAlign:"center",children:"Step-by-step guide"}),(0,o.jsx)(h.xv,{type:"h2",mobileType:"h4",textAlign:"center",children:(0,o.jsxs)("div",{children:["How to build ",e.name," contact form"]})})]}),(0,o.jsx)(k.Z,{children:i})]}),(0,o.jsxs)(an,{children:[(0,o.jsx)(h.xv,{textAlign:"center",type:"headline_m",color:"blue_base",m:"48px 0 0 0",as:"p",children:"INSTALLATION"}),(0,o.jsxs)(h.xv,{textAlign:"center",type:"h3",mobileType:"h5",as:"h2",children:["How to set up your ",e.name," contact form"]}),(0,o.jsx)(dn,{children:(0,o.jsxs)(pn,{children:[(0,o.jsxs)(bn,{children:[(0,o.jsx)(ln,{children:(0,o.jsx)(h.xv,{type:"headline_l",as:"span",children:"1"})}),(0,o.jsxs)("div",{ref:H,children:[(0,o.jsxs)(h.xv,{type:"body_m",children:["Sign up to ",(0,o.jsx)("a",{href:"https://app.formcarry.com/register",style:{color:I.O9.blue_base},children:"formcarry"})," to create your first form API endpoint then copy your endpoint"]}),u?(0,o.jsx)("video",{src:"https://carrier.formcarry.com/website-assets/tutorial-videos/create_form_and_copy_endpoint2.mp4",muted:!0,controls:!0,loop:!0}
1):(0,o.jsx)(w(),{src:P.Z,quality:75,alt:"Steps to create first form"}),(0,o.jsxs)(h.xv,{type:"body_s",color:500,children:["You can follow the steps like in the video above \ud83d\udc46",(0,o.jsx)("br",{}),"Save your endpoint to somewhere, you are going to use it in 3rd step."]})]})]}),(0,o.jsx)(yn,{}),(0,o.jsxs)(bn,{children:[(0,o.jsx)(ln,{children:(0,o.jsx)(h.xv,{type:"headline_l",as:"span",children:"2"})}),(0,o.jsxs)("div",{children:[(0,o.jsx)(h.xv,{type:"body_m",children:"Copy the example code."}),u?(0,o.jsx)("video",{src:"https://carrier.formcarry.com/website-assets/tutorial-videos/copy_example_form_code2.mp4",muted:!0,controls:!0,loop:!0}):(0,o.jsx)(w(),{src:T,alt:"Copy example code",quality:75}),(0,o.jsxs)(h.xv,{type:"body_s",color:500,children:["If you are in a rush and want to quickly test it, consider using ",(0,o.jsx)("a",{href:"https://codesandbox.io",target:"_blank",children:"CodeSandbox"})," to quickly test the code."]})]})]}),(0,o.jsx)(yn,{}),(0,o.jsxs)(bn,{children:[(0,o.jsx)(ln,{children:(0,o.jsx)(h.xv,{type:"headline_l",as:"span",children:"3"})}),(0,o.jsxs)("div",{ref:D,children:[(0,o.jsxs)(h.xv,{type:"body_m",children:["Paste the code and replace the ",(0,o.jsx)("a",{href:"https://formcarry.com/docs/getting-started",children:"form API endpoint"})," that you got in 1st step."]}),b?(0,o.jsx)("video",{src:"https://carrier.formcarry.com/website-assets/tutorial-videos/paste_and_replace_endpoint.mp4",muted:!0,controls:!0,loop:!0}):(0,o.jsx)(w(),{src:L.Z,quality:75,alt:"Paste your code inside your project."}),(0,o.jsx)(h.xv,{type:"body_s",color:500,children:"Take the endpoint that you got from 1st step then replace the test endpoint inside the example code with your form endpoint."})]})]}),(0,o.jsx)(yn,{}),(0,o.jsxs)(bn,{children:[(0,o.jsx)(ln,{children:(0,o.jsx)(h.xv,{type:"headline_l",as:"span",children:"4"})}),(0,o.jsxs)("div",{children:[(0,o.jsx)(h.xv,{type:"body_m",children:"Collect submissions \u2728"}),(0,o.jsxs)(h.xv,{type:"body_s",color:500,children:["Now you are ready to collect submissions from your ",e.name," form."]}),b?(0,o.jsx)("video",{src:"https://carrier.formcarry.com/website-assets/tutorial-videos/test_submission.mp4",muted:!0,controls:!0,loop:!0}):(0,o.jsx)(w(),{src:M.Z,quality:75,alt:"Collect Submissions!"})]})]}),(0,o.jsx)(yn,{}),(0,o.jsxs)(h.xv,{type:"body_m",textAlign:"center",color:700,children:["Check out our ",(0,o.jsx)("a",{href:"https://formcarry.com/docs/getting-started",children:"documentation"})," for more information."]})]})})]}),(0,o.jsxs)(sn,{children:[(0,o.jsxs)(cn,{children:[(0,o.jsxs)("div",{ref:J,children:[(0,o.jsx)(h.xv,{as:"p",type:"headline_m",color:"pink_base",m:"48px 0 0 0",children:"FREE FORM GENERATOR"}),(0,o.jsx)(on,{children:(0,o.jsxs)(h.xv,{type:"h3",mobileType:"h5",children:["Need templates?",(0,o.jsx)("br",{})," Say less."]})}),(0,o.jsx)(h.xv,{whiteSpace:"pre-line",type:"body_m",m:"12px 0 0 0",children:"Use our free form generator to kickstart your form, customize based on your needs, choose your framework and get your fully-working form code."}),(0,o.jsx)("a",{href:["react","nextjs","vuejs","html","alpinejs"].includes(String((null===e||void 0===e?void 0:e.slug)||"").split("-")[0])?"/contact-form-generator":"/html-form-generator",children:(0,o.jsx)(s.Z,{variant:"secondary",m:"34px 0 0 0",icon:!0,children:"Create Your Free Form Code"})})]}),K?(0,o.jsx)("video",{poster:"https://carrier.formcarry.com/website-assets/tutorial-videos/free_form_cover.png",src:"https://carrier.formcarry.com/website-assets/tutorial-videos/free_form_templates2.mp4",autoPlay:!0,muted:!0,loop:!0}):(0,o.jsx)(w(),{src:"https://carrier.formcarry.com/website-assets/tutorial-videos/free_form_cover.png",width:591,height:503,alt:"Free form templates"})]}),(0,o.jsxs)(cn,{reverse:!0,children:[K?(0,o.jsx)("video",{poster:"https://carrier.formcarry.com/website-assets/tutorial-videos/adding_email_cover.png",src:"https://carrier.formcarry.com/website-assets/tutorial-videos/adding_email_notifications.mp4",autoPlay:!0,muted:!0,loop:!0}):(0,o.jsx)(w(),{src:"https://carrier.formcarry.com/website-assets/tutorial-videos/adding_email_cover.png",width:591,height:503,alt:"Setting email notifications"}),(0,o.jsxs)("div",{children:[(0,o.jsx)(h.xv,{type:"headline_m",color:"purple_base",m:"48px 0 0 0",as:"p",children:"EMAIL NOTIFICATIONS"}),(0,o.jsx)(on,{children:(0,o.jsx)(h.xv,{type:"h3",mobileType:"h5",children:"Set email notifications for your form"})}),(0,o.jsx)(h.xv,{whiteSpace:"pre-line",type:"body_m",m:"12px 0 0 0",children:"Get an email from formcarry whenever you receive a new submission, add your own HTML template, use it with our smart tags"}),(0,o.jsx)("a",{href:"".concat("https://app.formcarry.com","/register"),children:(0,o.jsx)(s.Z,{variant:"secondary",m:"34px 0 0 0",icon:!0,children:"Get Started"})})]})]}),(0,o.jsxs)(cn,{children:[(0,o.jsxs)("div",{children:[(0,o.jsx)(h.xv,{type:"headline_m",color:"orange_base",m:"48px 0 0 0",as:"p",children:"THANK YOU!"}),(0,o.jsx)(on,{children:(0,o.jsx)(h.xv,{type:"h3",mobileType:"h5",children:"Use our customizable thank you pages"})}),(0,o.jsx)(h.xv,{whiteSpace:"pre-line",type:"body_m",m:"12px 0 0 0",children:"Formcarry offers 3 different customizable thank you pages that you can customize based on your brand image. Available on all plans."}),(0,o.jsx)("a",{href:"".concat("https://app.formcarry.com","/register"),children:(0,o.jsx)(s.Z,{variant:"secondary",m:"34px 0 0 0",icon:!0,children:"Get Started"})})]}),K?(0,o.jsx)("video",{poster:"https://carrier.formcarry.com/website-assets/tutorial-videos/thank_you_cover.png",src:"https://carrier.formcarry.com/website-assets/tutorial-videos/thank_you_pages.mp4",autoPlay:!0,muted:!0,loop:!0}):(0,o.jsx)(w(),{src:"https://carrier.formcarry.com/website-assets/tutorial-videos/thank_you_cover.png",width:591,height:503,alt:"Customizable thank you pages"})]})]}),(0,o.jsx)(F.Z,{}),(0,o.jsx)(h.di,{on:"desktop",children:(0,o.jsx)(a.default,{})}),(0,o.jsx)(c.Z,{}),(0,o.jsx)(E.Z,{copied:O,text:"Copied example to clipboard \ud83d\udc4f"})]})]})}}},function(n){n.O(0,[590,396,619,209,768,981,312,603,774,888,179],(function(){return e=56841,n(n.s=e);var e}));var e=n.O();_N_E=e}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.