Back
Banner 6
Copy component
Copy component
Marketing banner featuring a simple horizontal marketing subscribe form with dismiss option.
Home
Components
Components
Banner
Banner 6
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"700205fa-58a1-1b8a-434b-5662732d2ead","type":"Block","tag":"div","classes":["bac3c25f-9f9a-de68-14cc-9490b58fb625"],"children":["a2d8fe66-a183-9492-fe0c-7ff7134f0d77","0de16d72-1c46-dc7a-72df-ecff6672b531","87a30a4f-a905-b4a1-6d29-054fb5c0c195"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a2d8fe66-a183-9492-fe0c-7ff7134f0d77","type":"Block","tag":"div","classes":["bac3c25f-9f9a-de68-14cc-9490b58fb629"],"children":["a4c11fe8-0fd4-c282-22cf-1e5c024507c7"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a4c11fe8-0fd4-c282-22cf-1e5c024507c7","text":true,"v":"Subscribe and save 10% off your next purchase:"},{"_id":"0de16d72-1c46-dc7a-72df-ecff6672b531","type":"FormWrapper","tag":"div","classes":["bac3c25f-9f9a-de68-14cc-9490b58fb626"],"children":["b80566a5-a67c-d3f6-0e82-d8ddb694c67c","aa418793-eeb6-78fb-3172-041283be3a22","6617e5f2-c97a-a18e-cf2b-9ac146ad0f09"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"b80566a5-a67c-d3f6-0e82-d8ddb694c67c","type":"FormForm","tag":"form","classes":["bac3c25f-9f9a-de68-14cc-9490b58fb62c"],"children":["11a1b128-1444-aa30-4416-19f3623c6cfb","357423eb-546f-5f11-c782-3621c8a7a80d"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":"Banner 6 Subscribe"},"attr":{"id":"wf-form-Banner-6-Subscribe","name":"wf-form-Banner-6-Subscribe","data-name":"Banner 6 Subscribe","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"11a1b128-1444-aa30-4416-19f3623c6cfb","type":"FormTextInput","tag":"input","classes":["bac3c25f-9f9a-de68-14cc-9490b58fb62d"],"children":[],"data":{"form":{"name":"Banner 6 Email","type":"input","passwordPage":false},"attr":{"id":"Banner-6-Email","name":"Banner-6-Email","maxlength":256,"data-name":"Banner 6 Email","placeholder":"Enter your email address...","disabled":false,"type":"email","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"357423eb-546f-5f11-c782-3621c8a7a80d","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":"aa418793-eeb6-78fb-3172-041283be3a22","type":"FormSuccessMessage","tag":"div","classes":["bac3c25f-9f9a-de68-14cc-9490b58fb627"],"children":["98719584-dda3-796b-aa26-7ef957dcc02b"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"98719584-dda3-796b-aa26-7ef957dcc02b","type":"Block","tag":"div","classes":[],"children":["0d9f5752-7cfd-862e-de15-bf0ab5649671"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0d9f5752-7cfd-862e-de15-bf0ab5649671","text":true,"v":"You have been subscribed! Please check your email for your coupon code."},{"_id":"6617e5f2-c97a-a18e-cf2b-9ac146ad0f09","type":"FormErrorMessage","tag":"div","classes":["bac3c25f-9f9a-de68-14cc-9490b58fb62a"],"children":["6170a48e-b66e-85de-d111-76eeb8a4a9c2"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"6170a48e-b66e-85de-d111-76eeb8a4a9c2","type":"Block","tag":"div","classes":[],"children":["40c7b52f-5447-b952-99cc-78958826a323"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"40c7b52f-5447-b952-99cc-78958826a323","text":true,"v":"Couldn't subscribe you, please try again."},{"_id":"87a30a4f-a905-b4a1-6d29-054fb5c0c195","type":"Link","tag":"a","classes":["bac3c25f-9f9a-de68-14cc-9490b58fb62b"],"children":["013b03ab-0884-e396-e1aa-c34e8599d428"],"data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"013b03ab-0884-e396-e1aa-c34e8599d428","type":"HtmlEmbed","tag":"div","classes":["bac3c25f-9f9a-de68-14cc-9490b58fb628"],"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":"bac3c25f-9f9a-de68-14cc-9490b58fb627","fake":false,"type":"class","name":"banner-6_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":"bac3c25f-9f9a-de68-14cc-9490b58fb62d","fake":false,"type":"class","name":"banner-6_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":"bac3c25f-9f9a-de68-14cc-9490b58fb62b","fake":false,"type":"class","name":"banner-6_close","namespace":"","comb":"","styleLess":"position: absolute; right: 0.5rem;","variants":{"small":{"styleLess":"top: 0.5rem;"}},"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":"bac3c25f-9f9a-de68-14cc-9490b58fb629","fake":false,"type":"class","name":"banner-6_text","namespace":"","comb":"","styleLess":"font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"bac3c25f-9f9a-de68-14cc-9490b58fb62c","fake":false,"type":"class","name":"banner-6_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":"bac3c25f-9f9a-de68-14cc-9490b58fb628","fake":false,"type":"class","name":"banner-6_icon","namespace":"","comb":"","styleLess":"width: 1.25rem; height: 1.25rem; color: #3b4961;","variants":{},"children":[],"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":"bac3c25f-9f9a-de68-14cc-9490b58fb626","fake":false,"type":"class","name":"banner-6_form","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"bac3c25f-9f9a-de68-14cc-9490b58fb625","fake":false,"type":"class","name":"banner-6","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1rem; padding-left: 2rem; justify-content: center; align-items: center; grid-column-gap: 1rem; grid-row-gap: 1rem; background-color: #e3eaf4;","variants":{"small":{"styleLess":"flex-direction: column; flex-wrap: nowrap; grid-column-gap: 0.25rem; grid-row-gap: 0.25rem; text-align: center;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"bac3c25f-9f9a-de68-14cc-9490b58fb62a","fake":false,"type":"class","name":"banner-6_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}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Built by hand with
from