1"use strict";(globalThis.webpackChunk_atlas_docs_zen=globalThis.webpackChunk_atlas_docs_zen||[]).push([[2056],{3110(e,s,i){i.r(s),i.d(s,{assets:()=>a,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"integrations/formstack","title":"Formstack Address Verification | Documentation","description":"Add address verification to your Formstack Form builder with AddressZen Address Lookup integration. Simply insert JavaScript into the form builder.","source":"@site/docs/integrations/formstack.mdx","sourceDirName":"integrations","slug":"/integrations/formstack","permalink":"/docs/integrations/formstack","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"sidebar_label":"Formstack","title":"Formstack Address Verification | Documentation","description":"Add address verification to your Formstack Form builder with AddressZen Address Lookup integration. Simply insert JavaScript into the form builder."},"sidebar":"integrations","previous":{"title":"Forminator","permalink":"/docs/integrations/forminator"},"next":{"title":"Gravity Forms","permalink":"/docs/integrations/gravity-forms"}}');var t=i(5723),d=i(4056);const r={sidebar_label:"Formstack",title:"Formstack Address Verification | Documentation",description:"Add address verification to your Formstack Form builder with AddressZen Address Lookup integration. Simply insert JavaScript into the form builder."},o="Formstack Integration",a={},l=[{value:"Demo",id:"demo",level:2},{value:"Default Address Field",id:"default-address-field",level:3},{value:"Short Answer Fields",id:"short-answer-fields",level:3},{value:"Installation",id:"installation",level:2},{value:"Using the Address Field",id:"using-the-address-field",level:3},{value:"Initialize Address Lookup",id:"initialize-address-lookup",level:4},{value:"Using the Short Answer Fields",id:"using-the-short-answer-fields",level:3},{value:"Initialize Address Lookup",id:"initialize-address-lookup-1",level:4},{value:"Optional: Customize the Address Lookup Script",id:"optional-customize-the-address-lookup-script",level:4}];function c(e){const s={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,d.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("img",{className:"page-icon",src:"/img/icons/integrations/formstack.svg",alt:"",width:"64",height:"64"}),"\n",(0,t.jsx)(s.header,{children:(0,t.jsx)(s.h1,{id:"formstack-integration",children:"Formstack Integration"})}),"\n",(0,t.jsx)(s.h2,{id:"demo",children:"Demo"}),"\n",(0,t.jsx)(s.h3,{id:"default-address-field",children:"Default Address Field"}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"AddressZen Formstack Address Field Integration",src:i(6211).A+"",width:"1080",height:"608"})}),"\n",(0,t.jsx)(s.h3,{id:"short-answer-fields",children:"Short Answer Fields"}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"AddressZen Formstack Short Answer Field Integration",src:i(4005).A+"",width:"1080",height:"608"})}),"\n",(0,t.jsx)(s.h2,{id:"installation",children:"Installation"}),"\n",(0,t.jsx)(s.p,{children:"There are 2 ways of creating your address form. You can use either:"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"Address field"}),"\n",(0,t.jsx)(s.li,{children:"Short Answer Field"}),"\n"]}),"\n",(0,t.jsx)(s.h3,{id:"using-the-address-field",children:"Using the Address Field"}),"\n",(0,t.jsx)(s.p,{children:"You can find the Address field under Basic fields. Drag and drop it to the form builder."}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"Formstack Integration Address Field",src:i(7657).A+"",width:"1659",height:"337"})}),"\n",(0,t.jsx)(s.h4,{id:"initialize-address-lookup",children:"Initialize Address Lookup"}),"\n",(0,t.jsxs)(s.p,{children:["Under the ",(0,t.jsx)(s.code,{children:"Advanced Field"})," menu, click ",(0,t.jsx)(s.code,{children:"Embed Code"})," and drag it below the form you have created."]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"Formstack Integration Address Form",src:i(4641).A+"",width:"1672",height:"575"})}),"\n",(0,t.jsx)(s.p,{children:"Click on the embed code field and paste the code below:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-html",children:"<script src=\"https://cdn.jsdelivr.net/npm/@addresszen/address-lookup\"><\/script>\n\n<script>\n AddressZen.AddressLookup.setup({\n apiKey: 'YOUR_API_KEY',\n outputFields: {\n line_1: '#field165151526-address',\n line_2: '#field165151526-address2',\n city: '#field165151526-city',\n state: '#field165151526-state',\n zip_plus_4_code: '#field165151526-zip',\n },\n onAddressPopulated: function(address) {\n console.log(address)\n const state = document.querySelector(this.options.outputFields.state)\n if (state != null) {\n const option = state.querySelector(`option[value=\"${address.state_abbreviation}\"]`)\n state.dispatchEvent(new MouseEvent(\"click\", {bubbles: true,cancelable: true,view: window,}))\n \n setTimeout(function(){\n option.dispatchEvent(new MouseEvent(\"click\", {bubbles: true,cancelable: true,view: window,}))\n state.value = address.state_abbreviation\n state.dispatchEvent(new Event('change'))\n },100);\n }\n }\n });\n<\/script>\n"})}),"\n",(0,t.jsxs)(s.admonition,{type:"note",children:[(0,t.jsx)(s.p,{children:"Make sure to"}),(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["Update the value for the apiKey with your own API Key. Your API Key typically begins with ",(0,t.jsx)(s.code,{children:"ak_"}),"."]}),"\n",(0,t.jsx)(s.li,{children:"Update the field selectors so they match your input fields"}),"\n"]})]}),"\n",(0,t.jsx)(s.h3,{id:"using-the-short-answer-fields",children:"Using the Short Answer Fields"}),"\n",(0,t.jsxs)(s.p,{children:["Add address input fields to your form. These should be created using ",(0,t.jsx)(s.code,{children:"Short Answer"})," found under Basic Fields. A basic address form to capture a correct US address requires the following fields:"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"Street Line One"}),"\n",(0,t.jsx)(s.li,{children:"Street Line Two"}),"\n",(0,t.jsx)(s.li,{children:"City"}),"\n",(0,t.jsx)(s.li,{children:"State"}
1),"\n",(0,t.jsx)(s.li,{children:"ZIP Code"}),"\n"]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"Formstack Integration Short Answer Fields",src:i(3401).A+"",width:"1688",height:"293"})}),"\n",(0,t.jsx)(s.h4,{id:"initialize-address-lookup-1",children:"Initialize Address Lookup"}),"\n",(0,t.jsxs)(s.p,{children:["Under the ",(0,t.jsx)(s.code,{children:"Advanced Field"})," menu, click ",(0,t.jsx)(s.code,{children:"Embed Code"})," and drag it below the form you have created."]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"Formstack Integration Address Form",src:i(4641).A+"",width:"1672",height:"575"})}),"\n",(0,t.jsx)(s.p,{children:"Click on the embed code field and paste the code below:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-html",children:"<script src=\"https://cdn.jsdelivr.net/npm/@addresszen/address-lookup\"><\/script>\n\n<script>\n AddressZen.AddressLookup.setup({\n apiKey: 'YOUR_API_KEY',\n outputFields: {\n line_1: '#field165145846',\n line_2: '#field165145899',\n city: '#field165145897',\n state: '#field165145456',\n zip_plus_4_code: '#field165145860',\n },\n });\n<\/script>\n"})}),"\n",(0,t.jsxs)(s.admonition,{type:"note",children:[(0,t.jsx)(s.p,{children:"Make sure to"}),(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["Update the value for the apiKey with your own API Key. Your API Key typically begins with ",(0,t.jsx)(s.code,{children:"ak_"}),"."]}),"\n",(0,t.jsx)(s.li,{children:"Update the field selectors so they match your input fields"}),"\n"]})]}),"\n",(0,t.jsx)(s.h4,{id:"optional-customize-the-address-lookup-script",children:"Optional: Customize the Address Lookup Script"}),"\n",(0,t.jsxs)(s.p,{children:["If you wish to add an additional field, include the parameter name ",(0,t.jsx)(s.a,{href:"/docs/data/usps",children:"from our documentation"}),". For instance, adding a line_3 field to your script will look like:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-json",children:"outputFields: \n {\n line_1: '#field165145846',\n line_2: '#field165145899',\n line_3: '#field165145898',\n city: '#field165145897',\n state: '#field165145456',\n zip_plus_4_code: '#field165145860',\n },\n"})}),"\n",(0,t.jsx)(s.admonition,{type:"info",children:(0,t.jsxs)(s.p,{children:["If you need support, you can reach out to us on our ",(0,t.jsx)(s.a,{href:"https://addresszen.com/support",children:"support page"}),"."]})})]})}function h(e={}){const{wrapper:s}={...(0,d.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},3401(e,s,i){i.d(s,{A:()=>n});const n=i.p+"assets/images/formstack-create-form-c6cccc8e493707eb8d9fe97fe4c5adb1.png"},4005(e,s,i){i.d(s,{A:()=>n});const n=i.p+"assets/images/formstack-short-demo-bcc8cd66924eafd2fd5c047254c6200c.gif"},4056(e,s,i){i.d(s,{R:()=>r,x:()=>o});var n=i(2155);const t={},d=n.createContext(t);function r(e){const s=n.useContext(d);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),n.createElement(d.Provider,{value:s},e.children)}},4641(e,s,i){i.d(s,{A:()=>n});const n=i.p+"assets/images/formstack-embed-code-8afa68c7a5a98591c41507d7fe413115.png"},6211(e,s,i){i.d(s,{A:()=>n});const n=i.p+"assets/images/formstack-address-demo-73177a2c9f04a6da9dd34897d65bd85c.gif"},7657(e,s,i){i.d(s,{A:()=>n});const n=i.p+"assets/images/formstack-address-field-02fa46d4b501de0e8d661d87c48f7cdc.png"}}]);
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.