Back
Banner 8
Copy component
Copy component
Marketing banner featuring a simple vertical marketing subscribe form with dismiss option.
Home
Components
Components
Banner
Banner 8
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"4418a442-e0b2-7ae7-846a-6bb79c53a175","type":"Block","tag":"div","classes":["a942b5d1-914d-adcd-08c1-f696be8984ca"],"children":["e0b5cefd-9959-4445-5f4b-3e703e02f440","d4dfe380-4441-36a1-fae1-0ad5b91c56e2","af515de7-1ff4-1aad-85f1-d2ed5fe2d3d8"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"e0b5cefd-9959-4445-5f4b-3e703e02f440","type":"Block","tag":"div","classes":["a942b5d1-914d-adcd-08c1-f696be8984c6"],"children":["2f6a4e02-3c7e-6f35-fbba-d9b479b8df10"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"2f6a4e02-3c7e-6f35-fbba-d9b479b8df10","text":true,"v":"Subscribe and save 10% off your next purchase:"},{"_id":"d4dfe380-4441-36a1-fae1-0ad5b91c56e2","type":"FormWrapper","tag":"div","classes":["a942b5d1-914d-adcd-08c1-f696be8984c4"],"children":["c69716fa-6f88-e7f9-27a4-7a2a31157d26","0e32d679-4de2-ca9f-27b4-9f1a605e9fc6","8f8643e3-d9e6-d7f7-7c55-51238528dfaa"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"c69716fa-6f88-e7f9-27a4-7a2a31157d26","type":"FormForm","tag":"form","classes":["a942b5d1-914d-adcd-08c1-f696be8984c3"],"children":["80c87840-8ea3-8d3f-7cb6-64550733bbdd","cfa2de58-d128-03c8-8e70-4f161aa6d229"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":"Banner 8 Subscribe"},"attr":{"id":"wf-form-Banner-8-Subscribe","name":"wf-form-Banner-8-Subscribe","data-name":"Banner 8 Subscribe","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"80c87840-8ea3-8d3f-7cb6-64550733bbdd","type":"FormTextInput","tag":"input","classes":["a942b5d1-914d-adcd-08c1-f696be8984c9"],"children":[],"data":{"form":{"name":"Banner 8 Email","type":"input","passwordPage":false},"attr":{"id":"Banner-8-Email","name":"Banner-8-Email","maxlength":256,"data-name":"Banner 8 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":"cfa2de58-d128-03c8-8e70-4f161aa6d229","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":"0e32d679-4de2-ca9f-27b4-9f1a605e9fc6","type":"FormSuccessMessage","tag":"div","classes":["a942b5d1-914d-adcd-08c1-f696be8984cb"],"children":["89454c2c-a961-f230-19ac-fad9ed9cdc1c"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"89454c2c-a961-f230-19ac-fad9ed9cdc1c","type":"Block","tag":"div","classes":[],"children":["b4aec328-144c-d188-a11e-d3611fc03b86"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b4aec328-144c-d188-a11e-d3611fc03b86","text":true,"v":"You have been subscribed! Please check your email for your coupon code."},{"_id":"8f8643e3-d9e6-d7f7-7c55-51238528dfaa","type":"FormErrorMessage","tag":"div","classes":["a942b5d1-914d-adcd-08c1-f696be8984c5"],"children":["4c3a9132-1f6d-efdc-6fe9-608461d037ae"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"4c3a9132-1f6d-efdc-6fe9-608461d037ae","type":"Block","tag":"div","classes":[],"children":["0529bb7d-b436-0203-117f-648b59e23a7c"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0529bb7d-b436-0203-117f-648b59e23a7c","text":true,"v":"Couldn't subscribe you, please try again."},{"_id":"af515de7-1ff4-1aad-85f1-d2ed5fe2d3d8","type":"Link","tag":"a","classes":["a942b5d1-914d-adcd-08c1-f696be8984c2"],"children":["0289e2f3-ed88-ca0f-050c-8367fff600ee"],"data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0289e2f3-ed88-ca0f-050c-8367fff600ee","type":"HtmlEmbed","tag":"div","classes":["a942b5d1-914d-adcd-08c1-f696be8984c8"],"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":"a942b5d1-914d-adcd-08c1-f696be8984c6","fake":false,"type":"class","name":"banner-8_text","namespace":"","comb":"","styleLess":"font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"a942b5d1-914d-adcd-08c1-f696be8984cb","fake":false,"type":"class","name":"banner-8_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":"a942b5d1-914d-adcd-08c1-f696be8984c9","fake":false,"type":"class","name":"banner-8_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":"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":"a942b5d1-914d-adcd-08c1-f696be8984c8","fake":false,"type":"class","name":"banner-8_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":"a942b5d1-914d-adcd-08c1-f696be8984c3","fake":false,"type":"class","name":"banner-8_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":"a942b5d1-914d-adcd-08c1-f696be8984c4","fake":false,"type":"class","name":"banner-8_form","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"a942b5d1-914d-adcd-08c1-f696be8984c5","fake":false,"type":"class","name":"banner-8_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":"a942b5d1-914d-adcd-08c1-f696be8984c2","fake":false,"type":"class","name":"banner-8_close","namespace":"","comb":"","styleLess":"position: absolute; right: 0.5rem;","variants":{"small":{"styleLess":"top: 0.5rem;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"a942b5d1-914d-adcd-08c1-f696be8984ca","fake":false,"type":"class","name":"banner-8","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: #e3eaf4;","variants":{"small":{"styleLess":"flex-direction: column; flex-wrap: nowrap; text-align: center;"}},"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