1"use strict";(globalThis.webpackChunk_atlas_docs_zen=globalThis.webpackChunk_atlas_docs_zen||[]).push([[5183],{2526(e,n,s){s.d(n,{A:()=>t});const t=s.p+"assets/images/elementor-al-install-f1b1f1eaa6cdba8508b6835c4b848b20.png"},2535(e,n,s){s.r(n),s.d(n,{assets:()=>a,contentTitle:()=>r,default:()=>h,frontMatter:()=>d,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"integrations/elementor","title":"Elementor Address Validation | Documentation","description":"Add address validation to your WordPress Elementor pages. Follow the address lookup guide to get started.","source":"@site/docs/integrations/elementor.mdx","sourceDirName":"integrations","slug":"/integrations/elementor","permalink":"/docs/integrations/elementor","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"sidebar_label":"Elementor","title":"Elementor Address Validation | Documentation","description":"Add address validation to your WordPress Elementor pages. Follow the address lookup guide to get started."},"sidebar":"integrations","previous":{"title":"Unbounce","permalink":"/docs/integrations/unbounce"},"next":{"title":"Gutenberg Forms","permalink":"/docs/integrations/gutenberg"}}');var o=s(5723),i=s(4056);const d={sidebar_label:"Elementor",title:"Elementor Address Validation | Documentation",description:"Add address validation to your WordPress Elementor pages. Follow the address lookup guide to get started."},r="Elementor",a={},l=[{value:"Demo",id:"demo",level:2},{value:"Installation",id:"installation",level:2},{value:"Create Address Inputs",id:"create-address-inputs",level:3},{value:"Add Address Lookup",id:"add-address-lookup",level:3}];function c(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("img",{className:"page-icon",src:"/img/icons/integrations/elementor.svg",alt:"",width:"64",height:"64"}),"\n",(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"elementor",children:"Elementor"})}),"\n",(0,o.jsx)(n.p,{children:"Add address autocompletion and postcode lookup to your Elementor pages."}),"\n",(0,o.jsx)(n.h2,{id:"demo",children:"Demo"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Activate Address Finder on your address collection form",src:s(4353).A+"",width:"2160",height:"1216"})}),"\n",(0,o.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,o.jsx)(n.h3,{id:"create-address-inputs",children:"Create Address Inputs"}),"\n",(0,o.jsx)(n.p,{children:"This integration works by adding our Address Validation tools using Elementor's page builder. This requires you to upgrade your account to the Pro version to access the necessary components. Below are the instructions to add Address Lookup."}),"\n",(0,o.jsx)(n.p,{children:"First create a form; to do this on Elementor, scroll down to the Pro section on the left-side menu and choose 'Form'."}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Elementor pro side navigation highlighting Form component",src:s(7877).A+"",width:"2646",height:"1334"})}),"\n",(0,o.jsx)(n.p,{children:"A basic address form to capture a correct US address should have the following fields:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Street Line One"}),"\n",(0,o.jsx)(n.li,{children:"Street Line Two"}),"\n",(0,o.jsx)(n.li,{children:"City"}),"\n",(0,o.jsx)(n.li,{children:"State"}),"\n",(0,o.jsx)(n.li,{children:"Zip Code"}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Create address fields-screenshot",src:s(3464).A+"",width:"2684",height:"1368"})}),"\n",(0,o.jsxs)(n.p,{children:["You can optionally include additional fields, which are listed in the ",(0,o.jsx)(n.a,{href:"/docs/data/usps",children:"Address data guide"}),"."]}),"\n",(0,o.jsx)(n.h3,{id:"add-address-lookup",children:"Add Address Lookup"}),"\n",(0,o.jsx)(n.p,{children:"Look for the HTML component, it is located in the General section of the Elementor components menu.\nPlace it underneath the form. Click on the HTML component and add the script below."}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"initialize Address Finder",src:s(2526).A+"",width:"2686",height:"1252"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:"<script src=\"https://cdn.jsdelivr.net/npm/@addresszen/address-lookup\"><\/script>\n\n<script>\n \n AddressZen.AddressLookup.watch({\n apiKey: \"ak_test\",\n outputFields: {\n line_1: '#form-field-line_1',\n line_2: '#form-field-line_2',\n city: '#form-field-city',\n state: '#form-field-state',\n zip_plus_4_code: '#form-field-zip_code'\n }\n });\n<\/script>\n"})}),"\n",(0,o.jsxs)(n.admonition,{type:"caution",children:[(0,o.jsx)(n.p,{children:"Take special care to:"}),(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["Insert your API Key in the ",(0,o.jsx)(n.code,{children:"apiKey"})," field"]}),"\n",(0,o.jsxs)(n.li,{children:["Match the names of your address fields. If your Street Line One has an id=",(0,o.jsx)(n.code,{children:"address-line-one"}),", ensure that ",(0,o.jsx)(n.code,{children:"line_1"})," reads ",(0,o.jsx)(n.code,{children:"'#address-line-one'"})]}),"\n"]})]}),"\n",(0,o.jsxs)(n.p,{children:["If you wish to add an additional field, include the parameter name ",(0,o.jsx)(n.a,{href:"/docs/data/usps",children:"from our documentation"}),". For instance, adding a Building Name field with an ID ",(0,o.jsx)(n.code,{children:"#form-field-building_name"})," will look like:"]}
1),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-javascript",children:"outputFields: {\n building_or_firm_name: '#form-field-building_name',\n line_1: '#form-field-line_1',\n line_2: '#form-field-line_2',\n city: '#form-field-city',\n state: '#form-field-state',\n zip_plus_4_code: '#form-field-zip_code'\n}\n"})}),"\n",(0,o.jsx)(n.admonition,{type:"info",children:(0,o.jsxs)(n.p,{children:["See our ",(0,o.jsx)(n.a,{href:"/docs/address-lookup",children:"Address Lookup Plugin Documentation"})," if you wish to customize Address Lookup."]})}),"\n",(0,o.jsx)(n.admonition,{type:"info",children:(0,o.jsxs)(n.p,{children:["If you need support, you can reach out to us on our ",(0,o.jsx)(n.a,{href:"https://addresszen.com/support",children:"support page"}),"."]})})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},3464(e,n,s){s.d(n,{A:()=>t});const t=s.p+"assets/images/elementor-al-inputs-771565db78fb105739a4cf5216eecd5f.png"},4056(e,n,s){s.d(n,{R:()=>d,x:()=>r});var t=s(2155);const o={},i=t.createContext(o);function d(e){const n=t.useContext(i);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),t.createElement(i.Provider,{value:n},e.children)}},4353(e,n,s){s.d(n,{A:()=>t});const t=s.p+"assets/images/elementor-al-demo-3b27ac10d896da53ffc60dc53aba3cba.gif"},7877(e,n,s){s.d(n,{A:()=>t});const t=s.p+"assets/images/elementor-al-form-a0cd58919e9b29eb6e63ed2386d8241f.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.