Banner 22

Vertically aligned banner featuring a subscription form with both name and email address input fields.

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"93ba607e-abc7-54bd-4200-a1d45168dc3b","type":"Block","tag":"div","classes":["75cca2c7-8081-6b0a-091a-c273661396dc"],"children":["c0b5292e-3d98-b713-d343-3caa82712e53","c2348f97-995d-b23d-2982-a7d1f530e593","c798ec3a-a3ac-9f08-b0f6-d2ffab303d48"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"c0b5292e-3d98-b713-d343-3caa82712e53","type":"Block","tag":"div","classes":["75cca2c7-8081-6b0a-091a-c273661396da"],"children":["7ac689b1-972c-f879-be18-0231741a4fb6"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7ac689b1-972c-f879-be18-0231741a4fb6","text":true,"v":"Subscribe and save 10% off your next purchase:"},{"_id":"c2348f97-995d-b23d-2982-a7d1f530e593","type":"FormWrapper","tag":"div","classes":["75cca2c7-8081-6b0a-091a-c273661396d8"],"children":["41e8b53f-ff26-7b4f-1da3-05e2010d6d63","dbb06fa2-9d83-8d85-6866-fa0a4fac3179","0c12cad2-e250-2c5d-d8dc-c823053aebe0"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"41e8b53f-ff26-7b4f-1da3-05e2010d6d63","type":"FormForm","tag":"form","classes":["75cca2c7-8081-6b0a-091a-c273661396db"],"children":["0112dbae-3335-a653-d1fc-a6fae01f2ed7","a008c522-b301-c347-ad2a-666bcc2ede33","00b1cdf1-a26d-0294-95df-1ca72944e4ff"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":"Banner 22 Subscribe"},"attr":{"id":"wf-form-Banner-22-Subscribe","name":"wf-form-Banner-22-Subscribe","data-name":"Banner 22 Subscribe","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0112dbae-3335-a653-d1fc-a6fae01f2ed7","type":"FormTextInput","tag":"input","classes":["75cca2c7-8081-6b0a-091a-c273661396dd"],"children":[],"data":{"form":{"name":"Banner 21 Name","type":"input","passwordPage":false},"attr":{"id":"Banner-22-Name","name":"Banner-21-Name","maxlength":256,"data-name":"Banner 21 Name","placeholder":"Your name","disabled":false,"type":"text","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a008c522-b301-c347-ad2a-666bcc2ede33","type":"FormTextInput","tag":"input","classes":["75cca2c7-8081-6b0a-091a-c273661396dd"],"children":[],"data":{"form":{"name":"Banner 21 Email","type":"input","passwordPage":false},"attr":{"id":"Banner-22-Email","name":"Banner-21-Email","maxlength":256,"data-name":"Banner 21 Email","placeholder":"Your email address","disabled":false,"type":"email","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"00b1cdf1-a26d-0294-95df-1ca72944e4ff","type":"FormButton","tag":"input","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8d9","3b4f261d-5209-659d-b43e-d49e7abe6e82"],"children":[],"data":{"form":{"type":"button"},"attr":{"type":"submit","value":"Subscribe","data-wait":"Please wait...","id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"dbb06fa2-9d83-8d85-6866-fa0a4fac3179","type":"FormSuccessMessage","tag":"div","classes":["75cca2c7-8081-6b0a-091a-c273661396d6"],"children":["eadb24ea-d1e3-d9b6-1707-922c25348e8e"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"eadb24ea-d1e3-d9b6-1707-922c25348e8e","type":"Block","tag":"div","classes":[],"children":["98172fe0-4643-1422-2039-28e414426dc9"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"98172fe0-4643-1422-2039-28e414426dc9","text":true,"v":"You have been subscribed! Please check your email for your coupon code."},{"_id":"0c12cad2-e250-2c5d-d8dc-c823053aebe0","type":"FormErrorMessage","tag":"div","classes":["75cca2c7-8081-6b0a-091a-c273661396d5"],"children":["fcb665c5-2b0c-071f-caf7-2c7f7153ff79"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"fcb665c5-2b0c-071f-caf7-2c7f7153ff79","type":"Block","tag":"div","classes":[],"children":["f54d4ce2-aba0-42c8-b6d7-8f95766498ef"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"f54d4ce2-aba0-42c8-b6d7-8f95766498ef","text":true,"v":"Couldn't subscribe you, please try again."},{"_id":"c798ec3a-a3ac-9f08-b0f6-d2ffab303d48","type":"Link","tag":"a","classes":["75cca2c7-8081-6b0a-091a-c273661396d7"],"children":["586de5c2-2474-b5a5-9355-32ead196d3f2"],"data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"aria-label","value":"close"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"586de5c2-2474-b5a5-9355-32ead196d3f2","type":"HtmlEmbed","tag":"div","classes":["75cca2c7-8081-6b0a-091a-c273661396d4"],"children":[],"v":"<svg width=\"auto\" height=\"auto\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.7729 8.28771C17.0658 7.99481 17.0658 7.51994 16.7729 7.22705C16.48 6.93415 16.0052 6.93415 15.7123 7.22705L16.7729 8.28771ZM7.22699 15.7123C6.9341 16.0052 6.9341 16.4801 7.22699 16.773C7.51989 17.0659 7.99476 17.0659 8.28765 16.773L7.22699 15.7123ZM15.7123 16.7729C16.0052 17.0658 16.48 17.0658 16.7729 16.7729C17.0658 16.48 17.0658 16.0052 16.7729 15.7123L15.7123 16.7729ZM8.28765 7.22699C7.99476 6.9341 7.51989 6.9341 7.22699 7.22699C6.9341 7.51989 6.9341 7.99476 7.22699 8.28765L8.28765 7.22699ZM15.7123 7.22705L7.22699 15.7123L8.28765 16.773L16.7729 8.28771L15.7123 7.22705ZM16.7729 15.7123L8.28765 7.22699L7.22699 8.28765L15.7123 16.7729L16.7729 15.7123Z\"/>\n</svg>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<svg width=\"auto\" height=\"auto\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.7729 8.28771C17.0658 7.99481 17.0658 7.51994 16.7729 7.22705C16.48 6.93415 16.0052 6.93415 15.7123 7.22705L16.7729 8.28771ZM7.22699 15.7123C6.9341 16.0052 6.9341 16.4801 7.22699 16.773C7.51989 17.0659 7.99476 17.0659 8.28765 16.773L7.22699 15.7123ZM15.7123 16.7729C16.0052 17.0658 16.48 17.0658 16.7729 16.7729C17.0658 16.48 17.0658 16.0052 16.7729 15.7123L15.7123 16.7729ZM8.28765 7.22699C7.99476 6.9341 7.51989 6.9341 7.22699 7.22699C6.9341 7.51989 6.9341 7.99476 7.22699 8.28765L8.28765 7.22699ZM15.7123 7.22705L7.22699 15.7123L8.28765 16.773L16.7729 8.28771L15.7123 7.22705ZM16.7729 15.7123L8.28765 7.22699L7.22699 8.28765L15.7123 16.7729L16.7729 15.7123Z\"/>\n</svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}}],"styles":[{"_id":"75cca2c7-8081-6b0a-091a-c273661396dc","fake":false,"type":"class","name":"banner-22","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1.25rem; padding-left: 2rem; flex-direction: column; justify-content: center; flex-wrap: nowrap; align-items: center; grid-column-gap: 0.25rem; grid-row-gap: 0.25rem; background-color: #eef3fa;","variants":{"small":{"styleLess":"flex-direction: column; flex-wrap: nowrap; text-align: center;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"75cca2c7-8081-6b0a-091a-c273661396d8","fake":false,"type":"class","name":"banner-22_form","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8d9","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"display: inline-block; padding-top: 1rem; padding-right: 1.5rem; padding-bottom: 1rem; padding-left: 1.5rem; border-top-style: solid; border-top-width: 2px; border-top-color: #0c60f5; border-right-style: solid; border-right-width: 2px; border-right-color: #0c60f5; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0c60f5; border-left-style: solid; border-left-width: 2px; border-left-color: #0c60f5; background-color: #0c60f5; color: white; font-size: 1em; line-height: 1.125em; font-weight: 700; text-align: center; text-decoration: none; white-space: nowrap;","variants":{"main_hover":{"styleLess":"border-top-color: #0049ca; border-right-color: #0049ca; border-bottom-color: #0049ca; border-left-color: #0049ca; background-color: #0049ca;"}},"children":["27e2c28d-84e7-9136-e293-5ae1ccc4f8de","a6b7c620-6703-68cb-4e59-d2b3a9d1ab04","5eb34a0d-1d4c-bc49-56cf-7af9cc5e2dcf","3b4f261d-5209-659d-b43e-d49e7abe6e82"],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"3b4f261d-5209-659d-b43e-d49e7abe6e82","fake":false,"type":"class","name":"is-banner","namespace":"","comb":"&","styleLess":"height: 3rem; padding-top: 0rem; padding-bottom: 0rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"75cca2c7-8081-6b0a-091a-c273661396dd","fake":false,"type":"class","name":"banner-22_form-input","namespace":"","comb":"","styleLess":"height: 3rem; margin-bottom: 0px; padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem; border-top-style: solid; border-top-width: 0.0625rem; border-top-color: #9eabc1; border-right-style: solid; border-right-width: 0.0625rem; border-right-color: #9eabc1; border-bottom-style: solid; border-bottom-width: 0.0625rem; border-bottom-color: #9eabc1; border-left-style: solid; border-left-width: 0.0625rem; border-left-color: #9eabc1; background-color: white; font-size: 1rem; line-height: 1.2em;","variants":{"main_placeholder":{"styleLess":"color: #7587a5;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"75cca2c7-8081-6b0a-091a-c273661396da","fake":false,"type":"class","name":"banner-22_text","namespace":"","comb":"","styleLess":"font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"75cca2c7-8081-6b0a-091a-c273661396d4","fake":false,"type":"class","name":"baner-21_icon","namespace":"","comb":"","styleLess":"width: 1.25rem; height: 1.25rem; color: #3b4961;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"75cca2c7-8081-6b0a-091a-c273661396d5","fake":false,"type":"class","name":"banner-22_form-error","namespace":"","comb":"","styleLess":"margin-top: 0.5rem; padding-top: 0rem; padding-right: 0rem; padding-bottom: 0rem; padding-left: 0rem; background-color: transparent; color: #d91b5f; font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"75cca2c7-8081-6b0a-091a-c273661396db","fake":false,"type":"class","name":"banner-22_form-container","namespace":"","comb":"","styleLess":"display: flex; grid-column-gap: 0.25rem; grid-row-gap: 0.25rem;","variants":{"tiny":{"styleLess":"flex-direction: column; flex-wrap: nowrap;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"75cca2c7-8081-6b0a-091a-c273661396d6","fake":false,"type":"class","name":"banner-22_form-success","namespace":"","comb":"","styleLess":"margin-top: 0px; padding-top: 0rem; padding-right: 0rem; padding-bottom: 0rem; padding-left: 0rem; background-color: transparent; color: #0049ca; font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"75cca2c7-8081-6b0a-091a-c273661396d7","fake":false,"type":"class","name":"banner-22_close","namespace":"","comb":"","styleLess":"position: absolute; top: 0.5rem; right: 0.5rem;","variants":{"small":{"styleLess":"top: 0.5rem;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Built by hand with
from
Piixel Media