Banner 21

Horizontal 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":"f67ce8d2-f2d7-6414-5c9a-9972088271cc","type":"Block","tag":"div","classes":["59c415ff-98f4-099a-3b91-ac6499b38aaa"],"children":["58c01aa3-a6b0-2e25-124c-ee33c39bb03e","36f7ab20-90b0-ab88-049f-104d2973d354"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"58c01aa3-a6b0-2e25-124c-ee33c39bb03e","type":"Block","tag":"div","classes":["59c415ff-98f4-099a-3b91-ac6499b38aa8"],"children":["9aa80fab-4618-0fac-3175-8e35697a53c8"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9aa80fab-4618-0fac-3175-8e35697a53c8","text":true,"v":"Subscribe and save 10% off your next purchase:"},{"_id":"36f7ab20-90b0-ab88-049f-104d2973d354","type":"FormWrapper","tag":"div","classes":["59c415ff-98f4-099a-3b91-ac6499b38aa6"],"children":["65b3f415-8a92-2ae0-21ee-ce977327be73","a509881f-4cc4-740d-e7c9-9194c3bb2de4","0a30ef8a-fbbc-b924-74e0-f1f72586ef45"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"65b3f415-8a92-2ae0-21ee-ce977327be73","type":"FormForm","tag":"form","classes":["59c415ff-98f4-099a-3b91-ac6499b38aa9"],"children":["f5b7ba59-75eb-0283-67db-b1b9f76f81fb","cc9463e4-f6c5-3507-6d96-9ff799f1311c","adff2e42-b43f-c481-e3c6-5fc6c0210076"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":"Banner 21 Subscribe"},"attr":{"id":"wf-form-Banner-21-Subscribe","name":"wf-form-Banner-21-Subscribe","data-name":"Banner 21 Subscribe","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"f5b7ba59-75eb-0283-67db-b1b9f76f81fb","type":"FormTextInput","tag":"input","classes":["59c415ff-98f4-099a-3b91-ac6499b38aac"],"children":[],"data":{"form":{"name":"Banner 20 Name","type":"input","passwordPage":false},"attr":{"id":"Banner-21-Name","name":"Banner-20-Name","maxlength":256,"data-name":"Banner 20 Name","placeholder":"Your name","disabled":false,"type":"text","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"cc9463e4-f6c5-3507-6d96-9ff799f1311c","type":"FormTextInput","tag":"input","classes":["59c415ff-98f4-099a-3b91-ac6499b38aac"],"children":[],"data":{"form":{"name":"Banner 20 Email","type":"input","passwordPage":false},"attr":{"id":"Banner-21-Email","name":"Banner-20-Email","maxlength":256,"data-name":"Banner 20 Email","placeholder":"Your email address","disabled":false,"type":"email","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"adff2e42-b43f-c481-e3c6-5fc6c0210076","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":"a509881f-4cc4-740d-e7c9-9194c3bb2de4","type":"FormSuccessMessage","tag":"div","classes":["59c415ff-98f4-099a-3b91-ac6499b38aa7"],"children":["1fac3204-65ae-0858-be48-84d0f195df8c"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"1fac3204-65ae-0858-be48-84d0f195df8c","type":"Block","tag":"div","classes":[],"children":["f384d299-f552-aac4-ebae-87556cf1dc2d"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"f384d299-f552-aac4-ebae-87556cf1dc2d","text":true,"v":"You have been subscribed! Please check your email for your coupon code."},{"_id":"0a30ef8a-fbbc-b924-74e0-f1f72586ef45","type":"FormErrorMessage","tag":"div","classes":["59c415ff-98f4-099a-3b91-ac6499b38aa5"],"children":["2e01ba24-f642-fd80-d5f6-c86e32ad48d1"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"2e01ba24-f642-fd80-d5f6-c86e32ad48d1","type":"Block","tag":"div","classes":[],"children":["acecfe5e-773a-8be5-5900-768044e6e1a0"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"acecfe5e-773a-8be5-5900-768044e6e1a0","text":true,"v":"Couldn't subscribe you, please try again."}],"styles":[{"_id":"59c415ff-98f4-099a-3b91-ac6499b38aac","fake":false,"type":"class","name":"banner-21_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":"59c415ff-98f4-099a-3b91-ac6499b38aa6","fake":false,"type":"class","name":"banner-21_form","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"59c415ff-98f4-099a-3b91-ac6499b38aa8","fake":false,"type":"class","name":"banner-21_text","namespace":"","comb":"","styleLess":"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":"59c415ff-98f4-099a-3b91-ac6499b38aa5","fake":false,"type":"class","name":"banner-21_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":"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":"59c415ff-98f4-099a-3b91-ac6499b38aa9","fake":false,"type":"class","name":"banner-21_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":"59c415ff-98f4-099a-3b91-ac6499b38aa7","fake":false,"type":"class","name":"banner-21_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":"59c415ff-98f4-099a-3b91-ac6499b38aaa","fake":false,"type":"class","name":"banner-21","namespace":"","comb":"","styleLess":"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}],"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