Banner 23

Vertically aligned banner featuring a subscription form with both name and email address input fields. Banner also has a close option.

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"90f08d01-cb2d-42a3-446f-7272a9efdc7e","type":"Block","tag":"div","classes":["99480a34-757c-3c7a-9716-2f2211e3e6a9"],"children":["7d245c97-9512-af28-5498-43ea874aa011","1312bb94-ca11-da8d-2ccf-bd8890aae568"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7d245c97-9512-af28-5498-43ea874aa011","type":"Block","tag":"div","classes":["99480a34-757c-3c7a-9716-2f2211e3e6a8"],"children":["9040d0bc-799f-b06b-1a3b-7b7c57c51549"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9040d0bc-799f-b06b-1a3b-7b7c57c51549","text":true,"v":"Subscribe and save 10% off your next purchase:"},{"_id":"1312bb94-ca11-da8d-2ccf-bd8890aae568","type":"FormWrapper","tag":"div","classes":["99480a34-757c-3c7a-9716-2f2211e3e6ab"],"children":["273c55e7-fa41-0054-4edb-7a28713dc278","5ab72a9b-2b82-8f2b-97d4-5897960c4a27","7915b0ca-f35e-4f83-12d1-67bc3b019aca"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"273c55e7-fa41-0054-4edb-7a28713dc278","type":"FormForm","tag":"form","classes":["99480a34-757c-3c7a-9716-2f2211e3e6a6"],"children":["f60fcf6c-6a6f-3f37-9cfb-576bcf56d7ad","34f5f9a6-4c8e-84e6-eb88-0a9898f2bb18","7e8adf27-0a42-ba34-abeb-7c03b61972f7"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":"Banner 23 Subscribe"},"attr":{"id":"wf-form-Banner-23-Subscribe","name":"wf-form-Banner-23-Subscribe","data-name":"Banner 23 Subscribe","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"f60fcf6c-6a6f-3f37-9cfb-576bcf56d7ad","type":"FormTextInput","tag":"input","classes":["99480a34-757c-3c7a-9716-2f2211e3e6aa"],"children":[],"data":{"form":{"name":"Banner 22 Name","type":"input","passwordPage":false},"attr":{"id":"Banner-23-Name","name":"Banner-22-Name","maxlength":256,"data-name":"Banner 22 Name","placeholder":"Your Name","disabled":false,"type":"text","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"34f5f9a6-4c8e-84e6-eb88-0a9898f2bb18","type":"FormTextInput","tag":"input","classes":["99480a34-757c-3c7a-9716-2f2211e3e6aa"],"children":[],"data":{"form":{"name":"Banner 22 Email","type":"input","passwordPage":false},"attr":{"id":"Banner-23-Email","name":"Banner-22-Email","maxlength":256,"data-name":"Banner 22 Email","placeholder":"Your email address","disabled":false,"type":"email","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7e8adf27-0a42-ba34-abeb-7c03b61972f7","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":"5ab72a9b-2b82-8f2b-97d4-5897960c4a27","type":"FormSuccessMessage","tag":"div","classes":["99480a34-757c-3c7a-9716-2f2211e3e6a5"],"children":["d955bda6-18a1-dc88-afbb-9202e98f3e71"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"d955bda6-18a1-dc88-afbb-9202e98f3e71","type":"Block","tag":"div","classes":[],"children":["e6b3881a-75d7-ee4d-8f59-9d5fea6b0e1d"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"e6b3881a-75d7-ee4d-8f59-9d5fea6b0e1d","text":true,"v":"You have been subscribed! Please check your email for your coupon code."},{"_id":"7915b0ca-f35e-4f83-12d1-67bc3b019aca","type":"FormErrorMessage","tag":"div","classes":["99480a34-757c-3c7a-9716-2f2211e3e6a7"],"children":["9f52c1c3-e49d-eea7-460e-9be7c905e364"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"9f52c1c3-e49d-eea7-460e-9be7c905e364","type":"Block","tag":"div","classes":[],"children":["7e2705a7-453e-56ba-af0e-a6943e00d481"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7e2705a7-453e-56ba-af0e-a6943e00d481","text":true,"v":"Couldn't subscribe you, please try again."}],"styles":[{"_id":"99480a34-757c-3c7a-9716-2f2211e3e6ab","fake":false,"type":"class","name":"banner-23_form","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"99480a34-757c-3c7a-9716-2f2211e3e6a8","fake":false,"type":"class","name":"banner-23_text","namespace":"","comb":"","styleLess":"font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"99480a34-757c-3c7a-9716-2f2211e3e6a5","fake":false,"type":"class","name":"banner-23_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":"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":"99480a34-757c-3c7a-9716-2f2211e3e6a9","fake":false,"type":"class","name":"banner-23","namespace":"","comb":"","styleLess":"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":"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":"99480a34-757c-3c7a-9716-2f2211e3e6a6","fake":false,"type":"class","name":"banner-23_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":"99480a34-757c-3c7a-9716-2f2211e3e6aa","fake":false,"type":"class","name":"banner-23_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":"99480a34-757c-3c7a-9716-2f2211e3e6a7","fake":false,"type":"class","name":"banner-23_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
Piixel Media