Banner 24

Banner featuring a subscription form with name and email address input fields and a custom countdown timer.

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"e4ac0092-7549-77c5-0fc4-5f1b2ac107df","type":"Block","tag":"div","classes":["34c32996-4368-9744-1a43-9c4cef4323c1"],"children":["e51f8b84-3b2f-193d-9b14-d188c141de8d","a1148df2-7b93-0128-4cb5-d24acae88b28","d50c64ac-7c21-a8f3-731b-7430989a718f"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"e51f8b84-3b2f-193d-9b14-d188c141de8d","type":"Block","tag":"div","classes":["34c32996-4368-9744-1a43-9c4cef4323c5"],"children":["4f701f11-ba20-45b0-31ba-d8e416f94427"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4f701f11-ba20-45b0-31ba-d8e416f94427","text":true,"v":"Subscribe and save 10% off your next purchase:"},{"_id":"a1148df2-7b93-0128-4cb5-d24acae88b28","type":"FormWrapper","tag":"div","classes":["34c32996-4368-9744-1a43-9c4cef4323c3"],"children":["ed1102b4-433b-9a78-6325-b45174119e22","09002e7c-370c-d225-f260-e05496f3394d","5ad37c26-cdb6-8598-8d72-beb40763e5a7"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"ed1102b4-433b-9a78-6325-b45174119e22","type":"FormForm","tag":"form","classes":["34c32996-4368-9744-1a43-9c4cef4323c4"],"children":["2fdcd52b-b260-a8ed-c434-e37166466b99","5ac1e6e4-1cf9-dfad-57fd-11485f6ccb2a","fca54985-0248-3390-5542-557d1ed3a69f"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":"Banner 24 Subscribe"},"attr":{"id":"wf-form-Banner-24-Subscribe","name":"wf-form-Banner-24-Subscribe","data-name":"Banner 24 Subscribe","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"2fdcd52b-b260-a8ed-c434-e37166466b99","type":"FormTextInput","tag":"input","classes":["34c32996-4368-9744-1a43-9c4cef4323c0"],"children":[],"data":{"form":{"name":"Banner 23 Name","type":"input","passwordPage":false},"attr":{"id":"Banner-24-Name","name":"Banner-23-Name","maxlength":256,"data-name":"Banner 23 Name","placeholder":"Your Name","disabled":false,"type":"text","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5ac1e6e4-1cf9-dfad-57fd-11485f6ccb2a","type":"FormTextInput","tag":"input","classes":["34c32996-4368-9744-1a43-9c4cef4323c0"],"children":[],"data":{"form":{"name":"Banner 23 Email","type":"input","passwordPage":false},"attr":{"id":"Banner-24-Email","name":"Banner-23-Email","maxlength":256,"data-name":"Banner 23 Email","placeholder":"Your email address","disabled":false,"type":"email","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"fca54985-0248-3390-5542-557d1ed3a69f","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":"09002e7c-370c-d225-f260-e05496f3394d","type":"FormSuccessMessage","tag":"div","classes":["34c32996-4368-9744-1a43-9c4cef4323c2"],"children":["cd077b57-2294-f0e9-5948-1d284ec47e88"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"cd077b57-2294-f0e9-5948-1d284ec47e88","type":"Block","tag":"div","classes":[],"children":["b90b3a1e-b2fd-54da-263e-fe9bac6a3c01"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b90b3a1e-b2fd-54da-263e-fe9bac6a3c01","text":true,"v":"You have been subscribed! Please check your email for your coupon code."},{"_id":"5ad37c26-cdb6-8598-8d72-beb40763e5a7","type":"FormErrorMessage","tag":"div","classes":["34c32996-4368-9744-1a43-9c4cef4323bd"],"children":["9c40005a-0542-27bc-4cd5-a356f2dcb2ab"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"9c40005a-0542-27bc-4cd5-a356f2dcb2ab","type":"Block","tag":"div","classes":[],"children":["ebd5d04d-701f-cecb-19e6-0b5c7bf6e5a8"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ebd5d04d-701f-cecb-19e6-0b5c7bf6e5a8","text":true,"v":"Couldn't subscribe you, please try again."},{"_id":"d50c64ac-7c21-a8f3-731b-7430989a718f","type":"Link","tag":"a","classes":["34c32996-4368-9744-1a43-9c4cef4323bf"],"children":["b35c3155-9d2e-b981-dd5a-981dd5d79c30"],"data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b35c3155-9d2e-b981-dd5a-981dd5d79c30","type":"HtmlEmbed","tag":"div","classes":["34c32996-4368-9744-1a43-9c4cef4323be"],"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":[{"name":"aria-label","value":"close"}],"visibility":{"conditions":[]}}}],"styles":[{"_id":"34c32996-4368-9744-1a43-9c4cef4323bd","fake":false,"type":"class","name":"banner-24_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":"34c32996-4368-9744-1a43-9c4cef4323be","fake":false,"type":"class","name":"banner-24_icon","namespace":"","comb":"","styleLess":"width: 1.25rem; height: 1.25rem; color: #3b4961;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"34c32996-4368-9744-1a43-9c4cef4323c0","fake":false,"type":"class","name":"banner-24_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":"34c32996-4368-9744-1a43-9c4cef4323c3","fake":false,"type":"class","name":"banner-24_form","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","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":"34c32996-4368-9744-1a43-9c4cef4323c2","fake":false,"type":"class","name":"banner-24_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":"34c32996-4368-9744-1a43-9c4cef4323bf","fake":false,"type":"class","name":"banner-24_close","namespace":"","comb":"","styleLess":"position: absolute; right: 0.5rem;","variants":{"small":{"styleLess":"top: 0.5rem;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"34c32996-4368-9744-1a43-9c4cef4323c4","fake":false,"type":"class","name":"banner-24_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":"34c32996-4368-9744-1a43-9c4cef4323c1","fake":false,"type":"class","name":"banner-24","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: #eef3fa;","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":"34c32996-4368-9744-1a43-9c4cef4323c5","fake":false,"type":"class","name":"banner-24_text","namespace":"","comb":"","styleLess":"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
Piixel Media