Loading Component...

Loading

More Components

View All
Part of

Upload File Drag and Drop

Oops! Something went wrong while submitting the form.
Upload File Drag and Drop
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"3f1e8c66-dc14-e31c-04fc-9dd7679fff78","type":"Block","tag":"div","classes":["07815991-952a-8d98-0e00-e4c25af27143"],"children":["51db2be9-9066-cfc3-3dc9-9c77d9fff4ed","0daad71f-3786-c98c-ba80-e4fc5080db64","3f1e8c66-dc14-e31c-04fc-9dd7679fff7a"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"51db2be9-9066-cfc3-3dc9-9c77d9fff4ed","type":"HtmlEmbed","tag":"div","classes":["e176e94c-6e92-60da-fe02-f1b246007d37"],"children":[],"v":"<style>\n\n/* Make text look crisper and more legible in all browsers */\nbody {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n}\n\n/* Focus state style for keyboard navigation for the focusable elements */\n*[tabindex]:focus-visible,\n input[type=\"file\"]:focus-visible {\n outline: 0.125rem solid #4d65ff;\n outline-offset: 0.125rem;\n}\n\n/* Set color style to inherit */\n.inherit-color * {\n color: inherit;\n}\n\n/* Get rid of top margin on first element in any rich text element */\n.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {\n margin-top: 0 !important;\n}\n\n/* Get rid of bottom margin on last element in any rich text element */\n.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {\n\tmargin-bottom: 0 !important;\n}\n\n\n/* Make sure containers never lose their center alignment */\n.container-medium,.container-small, .container-large {\n\tmargin-right: auto !important;\n margin-left: auto !important;\n}\n\n/* \nMake the following elements inherit typography styles from the parent and not have hardcoded values. \nImportant: You will not be able to style for example \"All Links\" in Designer with this CSS applied.\nUncomment this CSS to use it in the project. Leave this message for future hand-off.\n*/\n/*\na,\n.w-input,\n.w-select,\n.w-tab-link,\n.w-nav-link,\n.w-dropdown-btn,\n.w-dropdown-toggle,\n.w-dropdown-link {\n color: inherit;\n text-decoration: inherit;\n font-size: inherit;\n}\n*/\n\n/* Apply \"...\" after 3 lines of text */\n.text-style-3lines {\n\tdisplay: -webkit-box;\n\toverflow: hidden;\n\t-webkit-line-clamp: 3;\n\t-webkit-box-orient: vertical;\n}\n\n/* Apply \"...\" after 2 lines of text */\n.text-style-2lines {\n\tdisplay: -webkit-box;\n\toverflow: hidden;\n\t-webkit-line-clamp: 2;\n\t-webkit-box-orient: vertical;\n}\n\n/* Adds inline flex display */\n.display-inlineflex {\n display: inline-flex;\n}\n\n/* These classes are never overwritten */\n.hide {\n display: none !important;\n}\n\n@media screen and (max-width: 991px) {\n .hide, .hide-tablet {\n display: none !important;\n }\n}\n @media screen and (max-width: 767px) {\n .hide-mobile-landscape{\n display: none !important;\n }\n}\n @media screen and (max-width: 479px) {\n .hide-mobile{\n display: none !important;\n }\n}\n \n.margin-0 {\n margin: 0rem !important;\n}\n \n.padding-0 {\n padding: 0rem !important;\n}\n\n.spacing-clean {\npadding: 0rem !important;\nmargin: 0rem !important;\n}\n\n.margin-top {\n margin-right: 0rem !important;\n margin-bottom: 0rem !important;\n margin-left: 0rem !important;\n}\n\n.padding-top {\n padding-right: 0rem !important;\n padding-bottom: 0rem !important;\n padding-left: 0rem !important;\n}\n \n.margin-right {\n margin-top: 0rem !important;\n margin-bottom: 0rem !important;\n margin-left: 0rem !important;\n}\n\n.padding-right {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n padding-left: 0rem !important;\n}\n\n.margin-bottom {\n margin-top: 0rem !important;\n margin-right: 0rem !important;\n margin-left: 0rem !important;\n}\n\n.padding-bottom {\n padding-top: 0rem !important;\n padding-right: 0rem !important;\n padding-left: 0rem !important;\n}\n\n.margin-left {\n margin-top: 0rem !important;\n margin-right: 0rem !important;\n margin-bottom: 0rem !important;\n}\n \n.padding-left {\n padding-top: 0rem !important;\n padding-right: 0rem !important;\n padding-bottom: 0rem !important;\n}\n \n.margin-horizontal {\n margin-top: 0rem !important;\n margin-bottom: 0rem !important;\n}\n\n.padding-horizontal {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n}\n\n.margin-vertical {\n margin-right: 0rem !important;\n margin-left: 0rem !important;\n}\n \n.padding-vertical {\n padding-right: 0rem !important;\n padding-left: 0rem !important;\n}\n\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<style>\n\n/* Make text look crisper and more legible in all browsers */\nbody {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n}\n\n/* Focus state style for keyboard navigation for the focusable elements */\n*[tabindex]:focus-visible,\n input[type=\"file\"]:focus-visible {\n outline: 0.125rem solid #4d65ff;\n outline-offset: 0.125rem;\n}\n\n/* Set color style to inherit */\n.inherit-color * {\n color: inherit;\n}\n\n/* Get rid of top margin on first element in any rich text element */\n.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {\n margin-top: 0 !important;\n}\n\n/* Get rid of bottom margin on last element in any rich text element */\n.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {\n\tmargin-bottom: 0 !important;\n}\n\n\n/* Make sure containers never lose their center alignment */\n.container-medium,.container-small, .container-large {\n\tmargin-right: auto !important;\n margin-left: auto !important;\n}\n\n/* \nMake the following elements inherit typography styles from the parent and not have hardcoded values. \nImportant: You will not be able to style for example \"All Links\" in Designer with this CSS applied.\nUncomment this CSS to use it in the project. Leave this message for future hand-off.\n*/\n/*\na,\n.w-input,\n.w-select,\n.w-tab-link,\n.w-nav-link,\n.w-dropdown-btn,\n.w-dropdown-toggle,\n.w-dropdown-link {\n color: inherit;\n text-decoration: inherit;\n font-size: inherit;\n}\n*/\n\n/* Apply \"...\" after 3 lines of text */\n.text-style-3lines {\n\tdisplay: -webkit-box;\n\toverflow: hidden;\n\t-webkit-line-clamp: 3;\n\t-webkit-box-orient: vertical;\n}\n\n/* Apply \"...\" after 2 lines of text */\n.text-style-2lines {\n\tdisplay: -webkit-box;\n\toverflow: hidden;\n\t-webkit-line-clamp: 2;\n\t-webkit-box-orient: vertical;\n}\n\n/* Adds inline flex display */\n.display-inlineflex {\n display: inline-flex;\n}\n\n/* These classes are never overwritten */\n.hide {\n display: none !important;\n}\n\n@media screen and (max-width: 991px) {\n .hide, .hide-tablet {\n display: none !important;\n }\n}\n @media screen and (max-width: 767px) {\n .hide-mobile-landscape{\n display: none !important;\n }\n}\n @media screen and (max-width: 479px) {\n .hide-mobile{\n display: none !important;\n }\n}\n \n.margin-0 {\n margin: 0rem !important;\n}\n \n.padding-0 {\n padding: 0rem !important;\n}\n\n.spacing-clean {\npadding: 0rem !important;\nmargin: 0rem !important;\n}\n\n.margin-top {\n margin-right: 0rem !important;\n margin-bottom: 0rem !important;\n margin-left: 0rem !important;\n}\n\n.padding-top {\n padding-right: 0rem !important;\n padding-bottom: 0rem !important;\n padding-left: 0rem !important;\n}\n \n.margin-right {\n margin-top: 0rem !important;\n margin-bottom: 0rem !important;\n margin-left: 0rem !important;\n}\n\n.padding-right {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n padding-left: 0rem !important;\n}\n\n.margin-bottom {\n margin-top: 0rem !important;\n margin-right: 0rem !important;\n margin-left: 0rem !important;\n}\n\n.padding-bottom {\n padding-top: 0rem !important;\n padding-right: 0rem !important;\n padding-left: 0rem !important;\n}\n\n.margin-left {\n margin-top: 0rem !important;\n margin-right: 0rem !important;\n margin-bottom: 0rem !important;\n}\n \n.padding-left {\n padding-top: 0rem !important;\n padding-right: 0rem !important;\n padding-bottom: 0rem !important;\n}\n \n.margin-horizontal {\n margin-top: 0rem !important;\n margin-bottom: 0rem !important;\n}\n\n.padding-horizontal {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n}\n\n.margin-vertical {\n margin-right: 0rem !important;\n margin-left: 0rem !important;\n}\n \n.padding-vertical {\n padding-right: 0rem !important;\n padding-left: 0rem !important;\n}\n\n</style>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"0daad71f-3786-c98c-ba80-e4fc5080db64","type":"Block","tag":"div","classes":["6f91a67f-793d-3c49-b9fd-ccca32f22e4a"],"children":[],"data":{"tag":"div","text":false}},{"_id":"3f1e8c66-dc14-e31c-04fc-9dd7679fff7a","type":"Block","tag":"main","classes":["07815991-952a-8d98-0e00-e4c25af27150"],"children":["5f0c3656-aa3e-adcc-2a5b-db9e00837905"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"main"}},{"_id":"5f0c3656-aa3e-adcc-2a5b-db9e00837905","type":"Block","tag":"section","classes":["cf43d98c-48d8-bebc-6c99-10f0eb75fadd"],"children":["f63cbc6a-01b0-c56e-95d4-065080c06ed2"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"section"}},{"_id":"f63cbc6a-01b0-c56e-95d4-065080c06ed2","type":"Block","tag":"div","classes":["07815991-952a-8d98-0e00-e4c25af2710d","cf43d98c-48d8-bebc-6c99-10f0eb75fae1"],"children":["f63cbc6a-01b0-c56e-95d4-065080c06ed3"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"f63cbc6a-01b0-c56e-95d4-065080c06ed3","type":"Block","tag":"div","classes":["07815991-952a-8d98-0e00-e4c25af27147"],"children":["98f7267f-51af-c4c8-de86-c0b67108a0b2"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"98f7267f-51af-c4c8-de86-c0b67108a0b2","type":"Block","tag":"div","classes":["cf43d98c-48d8-bebc-6c99-10f0eb75fada"],"children":["67002b6b-9830-c795-e3b3-853eb2be48e2","8983b58f-b745-e6aa-3d28-e98b090025c6"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"67002b6b-9830-c795-e3b3-853eb2be48e2","type":"Block","tag":"div","classes":["07815991-952a-8d98-0e00-e4c25af2715c","9458c8d3-d59f-bac4-fd65-3cb5550ca23e","e04175d8-a0f2-85f9-8fd9-44e3819a4dd8","98c80a93-39f3-41fe-dda7-dbc2c108b8e5"],"children":["67002b6b-9830-c795-e3b3-853eb2be48e3"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"67002b6b-9830-c795-e3b3-853eb2be48e3","text":true,"v":"Upload file"},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025c6","type":"FormWrapper","tag":"div","classes":["0cdfae87-5f0c-cca1-df7d-28d9db65284f"],"children":["8983b58f-b745-e6aa-3d28-e98b090025c7","8983b58f-b745-e6aa-3d28-e98b090025cf","8983b58f-b745-e6aa-3d28-e98b090025d2"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025c7","type":"FormForm","tag":"form","classes":["b17b3c77-9387-9012-e919-6be2865b62e1"],"children":["3105e0e7-f5ea-62ed-cb90-2da61b6e19f0","11adfd4a-ff4d-52ef-8d8e-da0402fd6ed2","c986f93c-2fce-45cd-5f51-b521d0114f53"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[{"name":"ms-code-file-upload","value":"form"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"https://hook.us1.make.com/n7ofyi96dvikotmrk2prj0y3z37f2mow","method":"post"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"3105e0e7-f5ea-62ed-cb90-2da61b6e19f0","type":"Block","tag":"div","classes":["3b064fc4-b6f7-6230-11f4-ceccddf9b93a"],"children":["67a6b4f8-c2be-a9b2-9ffe-fc13812ef076"],"data":{"search":{"exclude":false},"xattr":[{"name":"ms-code-file-upload-input","value":"fileToUpload"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"67a6b4f8-c2be-a9b2-9ffe-fc13812ef076","type":"Image","tag":"img","classes":["07815991-952a-8d98-0e00-e4c25af2710b","c47cc2c4-a992-3afd-045b-e5b4c5db3825"],"children":[],"data":{"img":{"id":"65faa9182c784424ecf41a18"},"srcsetDisabled":false,"attr":{"width":"auto","height":"auto","alt":"__wf_reserved_inherit","src":"https://cdn.prod.website-files.com/65faa2691a34b9fe3f9dd039/65faa9182c784424ecf41a18_Cloud%20Upload.svg","loading":"lazy"},"sizes":[]}},{"_id":"11adfd4a-ff4d-52ef-8d8e-da0402fd6ed2","type":"Block","tag":"div","classes":["88362cf3-df8c-c8da-db64-145e0dcfe4eb","20c38c00-cdc6-f583-4bb3-1d7bab31b361","a42d5aa0-eb7b-eb92-91da-fd47adfbab8a","0c9edac8-b5f5-547d-d099-e9d81e7bd7bb"],"children":["96af0b15-58ec-811c-9f5c-10a621d9fdbe","fa9cf896-3767-7e0e-8bc0-6d23d05f6966"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"96af0b15-58ec-811c-9f5c-10a621d9fdbe","type":"Block","tag":"div","classes":["8545c1bf-5510-2c6d-a3a9-c0bdd8800bcf"],"children":["96af0b15-58ec-811c-9f5c-10a621d9fdbf"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"96af0b15-58ec-811c-9f5c-10a621d9fdbf","text":true,"v":"Supported formats: XLS, XLSX"},{"_id":"fa9cf896-3767-7e0e-8bc0-6d23d05f6966","type":"Block","tag":"div","classes":["8545c1bf-5510-2c6d-a3a9-c0bdd8800bcf"],"children":["fa9cf896-3767-7e0e-8bc0-6d23d05f6967"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"fa9cf896-3767-7e0e-8bc0-6d23d05f6967","text":true,"v":"Maximum size: 25MB"},{"_id":"c986f93c-2fce-45cd-5f51-b521d0114f53","type":"Block","tag":"div","classes":["6bff4be2-ff30-7f82-20ca-4f76f2f7068d"],"children":["8983b58f-b745-e6aa-3d28-e98b090025ce"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025ce","type":"FormButton","tag":"input","classes":["07815991-952a-8d98-0e00-e4c25af27158","6a96e058-9cc8-4e0d-a5e9-b926685a752b"],"children":[],"data":{"form":{"type":"button"},"attr":{"type":"submit","value":"Upload","data-wait":"Please wait..."}}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025cf","type":"FormSuccessMessage","tag":"div","classes":[],"children":["8983b58f-b745-e6aa-3d28-e98b090025d0"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025d0","type":"Block","tag":"div","classes":[],"children":["8983b58f-b745-e6aa-3d28-e98b090025d1"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025d1","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025d2","type":"FormErrorMessage","tag":"div","classes":[],"children":["8983b58f-b745-e6aa-3d28-e98b090025d3"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025d3","type":"Block","tag":"div","classes":[],"children":["8983b58f-b745-e6aa-3d28-e98b090025d4"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025d4","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"88362cf3-df8c-c8da-db64-145e0dcfe4eb","fake":false,"type":"class","name":"display-flex","namespace":"","comb":"","styleLess":"display: flex; flex-direction: row; flex-wrap: nowrap;","variants":{},"children":["20c38c00-cdc6-f583-4bb3-1d7bab31b361"],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af2710b","fake":false,"type":"class","name":"icon-1x1-medium","namespace":"","comb":"","styleLess":"width: 2rem; height: 2rem;","variants":{},"children":["c47cc2c4-a992-3afd-045b-e5b4c5db3825"],"origin":null,"selector":null},{"_id":"6bff4be2-ff30-7f82-20ca-4f76f2f7068d","fake":false,"type":"class","name":"form_button-group","namespace":"","comb":"","styleLess":"display: flex; margin-top: 1rem; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1rem; padding-left: 2rem;","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af27158","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"padding-top: 0.75rem; padding-right: 1.5rem; padding-bottom: 0.75rem; padding-left: 1.5rem; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; background-color: hsla(0, 0.00%, 0.00%, 1.00); color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 600; text-align: center;","variants":{},"children":["07815991-952a-8d98-0e00-e4c25af27165","07815991-952a-8d98-0e00-e4c25af27167","07815991-952a-8d98-0e00-e4c25af27168","07815991-952a-8d98-0e00-e4c25af2716c","07815991-952a-8d98-0e00-e4c25af27170","07815991-952a-8d98-0e00-e4c25af27171","aba2d998-55ac-8693-635b-8779bd67e7c2","6a96e058-9cc8-4e0d-a5e9-b926685a752b"],"origin":null,"selector":null},{"_id":"6a96e058-9cc8-4e0d-a5e9-b926685a752b","fake":false,"type":"class","name":"is-upload","namespace":"","comb":"&","styleLess":"margin-left: auto; padding-top: 0.5rem; padding-right: 2rem; padding-bottom: 0.5rem; padding-left: 2rem; background-color: #005ee1; transition-property: all; transition-duration: 400ms; transition-timing-function: ease;","variants":{"main_hover":{"styleLess":"transform: scale(1.09);"}},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af2715c","fake":false,"type":"class","name":"text-size-medium","namespace":"","comb":"","styleLess":"font-size: 1.25rem;","variants":{},"children":["9458c8d3-d59f-bac4-fd65-3cb5550ca23e"],"origin":null,"selector":null},{"_id":"b17b3c77-9387-9012-e919-6be2865b62e1","fake":false,"type":"class","name":"form_content","namespace":"","comb":"","styleLess":"display: flex; padding-top: 0rem; padding-bottom: 0rem; flex-direction: column; justify-content: space-between; flex-wrap: nowrap; align-items: stretch;","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"0c9edac8-b5f5-547d-d099-e9d81e7bd7bb","fake":false,"type":"class","name":"padding-medium","namespace":"","comb":"&","styleLess":"","variants":{},"children":["bc15e964-6205-05bb-0445-9741ef5112de"],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"e04175d8-a0f2-85f9-8fd9-44e3819a4dd8","fake":false,"type":"class","name":"padding-horizontal","namespace":"","comb":"&","styleLess":"","variants":{},"children":["98c80a93-39f3-41fe-dda7-dbc2c108b8e5"],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"8545c1bf-5510-2c6d-a3a9-c0bdd8800bcf","fake":false,"type":"class","name":"text-color-gray","namespace":"","comb":"","styleLess":"color: #666;","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"a42d5aa0-eb7b-eb92-91da-fd47adfbab8a","fake":false,"type":"class","name":"padding-horizontal","namespace":"","comb":"&","styleLess":"","variants":{},"children":["0c9edac8-b5f5-547d-d099-e9d81e7bd7bb"],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"cf43d98c-48d8-bebc-6c99-10f0eb75fae1","fake":false,"type":"class","name":"padding-section-large","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"54441c96b0981db6504faf03","origin":null,"selector":null},{"_id":"cf43d98c-48d8-bebc-6c99-10f0eb75fadd","fake":false,"type":"class","name":"section_hero","namespace":"","comb":"","styleLess":"display: flex; min-height: 100svh; flex-direction: column; justify-content: center; background-color: #f3f9ff;","variants":{"medium":{"styleLess":"padding-top: 3rem;"}},"children":[],"createdBy":"54441c96b0981db6504faf03","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af27150","fake":false,"type":"class","name":"main-wrapper","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"origin":null,"selector":null},{"_id":"9458c8d3-d59f-bac4-fd65-3cb5550ca23e","fake":false,"type":"class","name":"text-weight-semibold","namespace":"","comb":"&","styleLess":"","variants":{},"children":["797e085a-37c0-cf5c-cacc-8020b07a1bf0","e04175d8-a0f2-85f9-8fd9-44e3819a4dd8"],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"98c80a93-39f3-41fe-dda7-dbc2c108b8e5","fake":false,"type":"class","name":"padding-medium","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"3b064fc4-b6f7-6230-11f4-ceccddf9b93a","fake":false,"type":"class","name":"form_upload-div","namespace":"","comb":"","styleLess":"display: flex; min-height: 15rem; margin-top: 1.25rem; margin-right: 2rem; margin-bottom: 0.625rem; margin-left: 2rem; padding-top: 1.25rem; padding-right: 0.625rem; padding-bottom: 1.25rem; padding-left: 0.625rem; flex-direction: column; justify-content: center; flex-wrap: nowrap; align-items: stretch; border-top-style: dashed; border-top-width: 0.125rem; border-top-color: hsla(214.93333333333334, 100.00%, 62.67%, 1.00); border-right-style: dashed; border-right-width: 0.125rem; border-right-color: hsla(214.93333333333334, 100.00%, 62.67%, 1.00); border-bottom-style: dashed; border-bottom-width: 0.125rem; border-bottom-color: hsla(214.93333333333334, 100.00%, 62.67%, 1.00); border-left-style: dashed; border-left-width: 0.125rem; border-left-color: hsla(214.93333333333334, 100.00%, 62.67%, 1.00); border-top-left-radius: 0.3125rem; border-top-right-radius: 0.3125rem; border-bottom-left-radius: 0.3125rem; border-bottom-right-radius: 0.3125rem; background-color: #f3f9ff;","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"c47cc2c4-a992-3afd-045b-e5b4c5db3825","fake":false,"type":"class","name":"align-center","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"e176e94c-6e92-60da-fe02-f1b246007d37","fake":false,"type":"class","name":"global-styles","namespace":"","comb":"","styleLess":"position: fixed; left: 0%; top: 0%; right: auto; bottom: auto; display: block;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af27147","fake":false,"type":"class","name":"container-large","namespace":"","comb":"","styleLess":"width: 100%; max-width: 80rem; margin-right: auto; margin-left: auto;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"20c38c00-cdc6-f583-4bb3-1d7bab31b361","fake":false,"type":"class","name":"is-space-between","namespace":"","comb":"&","styleLess":"justify-content: space-between;","variants":{"tiny":{"styleLess":"flex-direction: column; flex-wrap: nowrap;"}},"children":["4b5995cc-5032-be11-0737-3fe2a660e8c7","16303b5e-0d08-63cd-874a-75be763be68d","a42d5aa0-eb7b-eb92-91da-fd47adfbab8a"],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"cf43d98c-48d8-bebc-6c99-10f0eb75fada","fake":false,"type":"class","name":"form_container","namespace":"","comb":"","styleLess":"display: block; overflow: hidden; max-width: 40rem; margin-right: auto; margin-left: auto; padding-top: 1rem; justify-content: start; justify-items: start; align-items: start; align-content: start; grid-auto-columns: 1fr; grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; grid-template-columns: 1fr; grid-template-rows: auto; border-top-left-radius: 0.625rem; border-top-right-radius: 0.625rem; border-bottom-left-radius: 0.625rem; border-bottom-right-radius: 0.625rem; background-color: hsla(0, 0.00%, 100.00%, 1.00); box-shadow: 0 3px 0.625rem 0.1875rem rgba(0,0,0,0.2);","variants":{},"children":[],"createdBy":"54441c96b0981db6504faf03","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af27143","fake":false,"type":"class","name":"page-wrapper","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"origin":null,"selector":null},{"_id":"0cdfae87-5f0c-cca1-df7d-28d9db65284f","fake":false,"type":"class","name":"form_block","namespace":"","comb":"","styleLess":"margin-bottom: 0rem;","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af2710d","fake":false,"type":"class","name":"padding-global","namespace":"","comb":"","styleLess":"padding-right: 2.5rem; padding-left: 2.5rem;","variants":{"small":{"styleLess":"padding-right: 1.25rem; padding-left: 1.25rem;"}},"children":["cf43d98c-48d8-bebc-6c99-10f0eb75fae1"],"origin":null,"selector":null},{"_id":"6f91a67f-793d-3c49-b9fd-ccca32f22e4a","fake":false,"type":"class","name":"nav_fixed","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: auto;","variants":{},"children":[],"createdBy":"54441c96b0981db6504faf03","origin":null,"selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/65faa2691a34b9fe3f9dd039/65faa9182c784424ecf41a18_Cloud%20Upload.svg","siteId":"65faa2691a34b9fe3f9dd039","width":90,"isHD":false,"height":59,"fileName":"65faa9182c784424ecf41a18_Cloud Upload.svg","createdOn":"2024-03-20T09:15:04.144Z","origFileName":"Cloud Upload.svg","fileHash":"e33929dace779e33b7f247cd7d49bc11","translationLoading":false,"variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/65faa2691a34b9fe3f9dd039/65faa9182c784424ecf41a18_Cloud%20Upload.svg","thumbUrl":"https://cdn.prod.website-files.com/65faa2691a34b9fe3f9dd039/65faa9182c784424ecf41a18_Cloud%20Upload.svg","_id":"65faa9182c784424ecf41a18","updatedOn":"2024-03-20T09:15:04.144Z","fileSize":1117,"localizedSettings":{}}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":1,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"3f1e8c66-dc14-e31c-04fc-9dd7679fff78","type":"Block","tag":"div","classes":["07815991-952a-8d98-0e00-e4c25af27143"],"children":["51db2be9-9066-cfc3-3dc9-9c77d9fff4ed","0daad71f-3786-c98c-ba80-e4fc5080db64","3f1e8c66-dc14-e31c-04fc-9dd7679fff7a"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"51db2be9-9066-cfc3-3dc9-9c77d9fff4ed","type":"HtmlEmbed","tag":"div","classes":["e176e94c-6e92-60da-fe02-f1b246007d37"],"children":[],"v":"<style>\n\n/* Make text look crisper and more legible in all browsers */\nbody {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n}\n\n/* Focus state style for keyboard navigation for the focusable elements */\n*[tabindex]:focus-visible,\n input[type=\"file\"]:focus-visible {\n outline: 0.125rem solid #4d65ff;\n outline-offset: 0.125rem;\n}\n\n/* Set color style to inherit */\n.inherit-color * {\n color: inherit;\n}\n\n/* Get rid of top margin on first element in any rich text element */\n.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {\n margin-top: 0 !important;\n}\n\n/* Get rid of bottom margin on last element in any rich text element */\n.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {\n\tmargin-bottom: 0 !important;\n}\n\n\n/* Make sure containers never lose their center alignment */\n.container-medium,.container-small, .container-large {\n\tmargin-right: auto !important;\n margin-left: auto !important;\n}\n\n/* \nMake the following elements inherit typography styles from the parent and not have hardcoded values. \nImportant: You will not be able to style for example \"All Links\" in Designer with this CSS applied.\nUncomment this CSS to use it in the project. Leave this message for future hand-off.\n*/\n/*\na,\n.w-input,\n.w-select,\n.w-tab-link,\n.w-nav-link,\n.w-dropdown-btn,\n.w-dropdown-toggle,\n.w-dropdown-link {\n color: inherit;\n text-decoration: inherit;\n font-size: inherit;\n}\n*/\n\n/* Apply \"...\" after 3 lines of text */\n.text-style-3lines {\n\tdisplay: -webkit-box;\n\toverflow: hidden;\n\t-webkit-line-clamp: 3;\n\t-webkit-box-orient: vertical;\n}\n\n/* Apply \"...\" after 2 lines of text */\n.text-style-2lines {\n\tdisplay: -webkit-box;\n\toverflow: hidden;\n\t-webkit-line-clamp: 2;\n\t-webkit-box-orient: vertical;\n}\n\n/* Adds inline flex display */\n.display-inlineflex {\n display: inline-flex;\n}\n\n/* These classes are never overwritten */\n.hide {\n display: none !important;\n}\n\n@media screen and (max-width: 991px) {\n .hide, .hide-tablet {\n display: none !important;\n }\n}\n @media screen and (max-width: 767px) {\n .hide-mobile-landscape{\n display: none !important;\n }\n}\n @media screen and (max-width: 479px) {\n .hide-mobile{\n display: none !important;\n }\n}\n \n.margin-0 {\n margin: 0rem !important;\n}\n \n.padding-0 {\n padding: 0rem !important;\n}\n\n.spacing-clean {\npadding: 0rem !important;\nmargin: 0rem !important;\n}\n\n.margin-top {\n margin-right: 0rem !important;\n margin-bottom: 0rem !important;\n margin-left: 0rem !important;\n}\n\n.padding-top {\n padding-right: 0rem !important;\n padding-bottom: 0rem !important;\n padding-left: 0rem !important;\n}\n \n.margin-right {\n margin-top: 0rem !important;\n margin-bottom: 0rem !important;\n margin-left: 0rem !important;\n}\n\n.padding-right {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n padding-left: 0rem !important;\n}\n\n.margin-bottom {\n margin-top: 0rem !important;\n margin-right: 0rem !important;\n margin-left: 0rem !important;\n}\n\n.padding-bottom {\n padding-top: 0rem !important;\n padding-right: 0rem !important;\n padding-left: 0rem !important;\n}\n\n.margin-left {\n margin-top: 0rem !important;\n margin-right: 0rem !important;\n margin-bottom: 0rem !important;\n}\n \n.padding-left {\n padding-top: 0rem !important;\n padding-right: 0rem !important;\n padding-bottom: 0rem !important;\n}\n \n.margin-horizontal {\n margin-top: 0rem !important;\n margin-bottom: 0rem !important;\n}\n\n.padding-horizontal {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n}\n\n.margin-vertical {\n margin-right: 0rem !important;\n margin-left: 0rem !important;\n}\n \n.padding-vertical {\n padding-right: 0rem !important;\n padding-left: 0rem !important;\n}\n\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<style>\n\n/* Make text look crisper and more legible in all browsers */\nbody {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n}\n\n/* Focus state style for keyboard navigation for the focusable elements */\n*[tabindex]:focus-visible,\n input[type=\"file\"]:focus-visible {\n outline: 0.125rem solid #4d65ff;\n outline-offset: 0.125rem;\n}\n\n/* Set color style to inherit */\n.inherit-color * {\n color: inherit;\n}\n\n/* Get rid of top margin on first element in any rich text element */\n.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {\n margin-top: 0 !important;\n}\n\n/* Get rid of bottom margin on last element in any rich text element */\n.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {\n\tmargin-bottom: 0 !important;\n}\n\n\n/* Make sure containers never lose their center alignment */\n.container-medium,.container-small, .container-large {\n\tmargin-right: auto !important;\n margin-left: auto !important;\n}\n\n/* \nMake the following elements inherit typography styles from the parent and not have hardcoded values. \nImportant: You will not be able to style for example \"All Links\" in Designer with this CSS applied.\nUncomment this CSS to use it in the project. Leave this message for future hand-off.\n*/\n/*\na,\n.w-input,\n.w-select,\n.w-tab-link,\n.w-nav-link,\n.w-dropdown-btn,\n.w-dropdown-toggle,\n.w-dropdown-link {\n color: inherit;\n text-decoration: inherit;\n font-size: inherit;\n}\n*/\n\n/* Apply \"...\" after 3 lines of text */\n.text-style-3lines {\n\tdisplay: -webkit-box;\n\toverflow: hidden;\n\t-webkit-line-clamp: 3;\n\t-webkit-box-orient: vertical;\n}\n\n/* Apply \"...\" after 2 lines of text */\n.text-style-2lines {\n\tdisplay: -webkit-box;\n\toverflow: hidden;\n\t-webkit-line-clamp: 2;\n\t-webkit-box-orient: vertical;\n}\n\n/* Adds inline flex display */\n.display-inlineflex {\n display: inline-flex;\n}\n\n/* These classes are never overwritten */\n.hide {\n display: none !important;\n}\n\n@media screen and (max-width: 991px) {\n .hide, .hide-tablet {\n display: none !important;\n }\n}\n @media screen and (max-width: 767px) {\n .hide-mobile-landscape{\n display: none !important;\n }\n}\n @media screen and (max-width: 479px) {\n .hide-mobile{\n display: none !important;\n }\n}\n \n.margin-0 {\n margin: 0rem !important;\n}\n \n.padding-0 {\n padding: 0rem !important;\n}\n\n.spacing-clean {\npadding: 0rem !important;\nmargin: 0rem !important;\n}\n\n.margin-top {\n margin-right: 0rem !important;\n margin-bottom: 0rem !important;\n margin-left: 0rem !important;\n}\n\n.padding-top {\n padding-right: 0rem !important;\n padding-bottom: 0rem !important;\n padding-left: 0rem !important;\n}\n \n.margin-right {\n margin-top: 0rem !important;\n margin-bottom: 0rem !important;\n margin-left: 0rem !important;\n}\n\n.padding-right {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n padding-left: 0rem !important;\n}\n\n.margin-bottom {\n margin-top: 0rem !important;\n margin-right: 0rem !important;\n margin-left: 0rem !important;\n}\n\n.padding-bottom {\n padding-top: 0rem !important;\n padding-right: 0rem !important;\n padding-left: 0rem !important;\n}\n\n.margin-left {\n margin-top: 0rem !important;\n margin-right: 0rem !important;\n margin-bottom: 0rem !important;\n}\n \n.padding-left {\n padding-top: 0rem !important;\n padding-right: 0rem !important;\n padding-bottom: 0rem !important;\n}\n \n.margin-horizontal {\n margin-top: 0rem !important;\n margin-bottom: 0rem !important;\n}\n\n.padding-horizontal {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n}\n\n.margin-vertical {\n margin-right: 0rem !important;\n margin-left: 0rem !important;\n}\n \n.padding-vertical {\n padding-right: 0rem !important;\n padding-left: 0rem !important;\n}\n\n</style>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"0daad71f-3786-c98c-ba80-e4fc5080db64","type":"Block","tag":"div","classes":["6f91a67f-793d-3c49-b9fd-ccca32f22e4a"],"children":[],"data":{"tag":"div","text":false}},{"_id":"3f1e8c66-dc14-e31c-04fc-9dd7679fff7a","type":"Block","tag":"main","classes":["07815991-952a-8d98-0e00-e4c25af27150"],"children":["5f0c3656-aa3e-adcc-2a5b-db9e00837905"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"main"}},{"_id":"5f0c3656-aa3e-adcc-2a5b-db9e00837905","type":"Block","tag":"section","classes":["cf43d98c-48d8-bebc-6c99-10f0eb75fadd"],"children":["f63cbc6a-01b0-c56e-95d4-065080c06ed2"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"section"}},{"_id":"f63cbc6a-01b0-c56e-95d4-065080c06ed2","type":"Block","tag":"div","classes":["07815991-952a-8d98-0e00-e4c25af2710d","cf43d98c-48d8-bebc-6c99-10f0eb75fae1"],"children":["f63cbc6a-01b0-c56e-95d4-065080c06ed3"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"f63cbc6a-01b0-c56e-95d4-065080c06ed3","type":"Block","tag":"div","classes":["07815991-952a-8d98-0e00-e4c25af27147"],"children":["98f7267f-51af-c4c8-de86-c0b67108a0b2"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"98f7267f-51af-c4c8-de86-c0b67108a0b2","type":"Block","tag":"div","classes":["cf43d98c-48d8-bebc-6c99-10f0eb75fada"],"children":["67002b6b-9830-c795-e3b3-853eb2be48e2","8983b58f-b745-e6aa-3d28-e98b090025c6"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"67002b6b-9830-c795-e3b3-853eb2be48e2","type":"Block","tag":"div","classes":["07815991-952a-8d98-0e00-e4c25af2715c","9458c8d3-d59f-bac4-fd65-3cb5550ca23e","e04175d8-a0f2-85f9-8fd9-44e3819a4dd8","98c80a93-39f3-41fe-dda7-dbc2c108b8e5"],"children":["67002b6b-9830-c795-e3b3-853eb2be48e3"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"67002b6b-9830-c795-e3b3-853eb2be48e3","text":true,"v":"Upload file"},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025c6","type":"FormWrapper","tag":"div","classes":["0cdfae87-5f0c-cca1-df7d-28d9db65284f"],"children":["8983b58f-b745-e6aa-3d28-e98b090025c7","8983b58f-b745-e6aa-3d28-e98b090025cf","8983b58f-b745-e6aa-3d28-e98b090025d2"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025c7","type":"FormForm","tag":"form","classes":["b17b3c77-9387-9012-e919-6be2865b62e1"],"children":["3105e0e7-f5ea-62ed-cb90-2da61b6e19f0","11adfd4a-ff4d-52ef-8d8e-da0402fd6ed2","c986f93c-2fce-45cd-5f51-b521d0114f53"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[{"name":"ms-code-file-upload","value":"form"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"https://hook.us1.make.com/n7ofyi96dvikotmrk2prj0y3z37f2mow","method":"post"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"3105e0e7-f5ea-62ed-cb90-2da61b6e19f0","type":"Block","tag":"div","classes":["3b064fc4-b6f7-6230-11f4-ceccddf9b93a"],"children":["67a6b4f8-c2be-a9b2-9ffe-fc13812ef076"],"data":{"search":{"exclude":false},"xattr":[{"name":"ms-code-file-upload-input","value":"fileToUpload"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"67a6b4f8-c2be-a9b2-9ffe-fc13812ef076","type":"Image","tag":"img","classes":["07815991-952a-8d98-0e00-e4c25af2710b","c47cc2c4-a992-3afd-045b-e5b4c5db3825"],"children":[],"data":{"img":{"id":"65faa9182c784424ecf41a18"},"srcsetDisabled":false,"attr":{"width":"auto","height":"auto","alt":"__wf_reserved_inherit","src":"https://cdn.prod.website-files.com/65faa2691a34b9fe3f9dd039/65faa9182c784424ecf41a18_Cloud%20Upload.svg","loading":"lazy"},"sizes":[]}},{"_id":"11adfd4a-ff4d-52ef-8d8e-da0402fd6ed2","type":"Block","tag":"div","classes":["88362cf3-df8c-c8da-db64-145e0dcfe4eb","20c38c00-cdc6-f583-4bb3-1d7bab31b361","a42d5aa0-eb7b-eb92-91da-fd47adfbab8a","0c9edac8-b5f5-547d-d099-e9d81e7bd7bb"],"children":["96af0b15-58ec-811c-9f5c-10a621d9fdbe","fa9cf896-3767-7e0e-8bc0-6d23d05f6966"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"96af0b15-58ec-811c-9f5c-10a621d9fdbe","type":"Block","tag":"div","classes":["8545c1bf-5510-2c6d-a3a9-c0bdd8800bcf"],"children":["96af0b15-58ec-811c-9f5c-10a621d9fdbf"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"96af0b15-58ec-811c-9f5c-10a621d9fdbf","text":true,"v":"Supported formats: XLS, XLSX"},{"_id":"fa9cf896-3767-7e0e-8bc0-6d23d05f6966","type":"Block","tag":"div","classes":["8545c1bf-5510-2c6d-a3a9-c0bdd8800bcf"],"children":["fa9cf896-3767-7e0e-8bc0-6d23d05f6967"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"fa9cf896-3767-7e0e-8bc0-6d23d05f6967","text":true,"v":"Maximum size: 25MB"},{"_id":"c986f93c-2fce-45cd-5f51-b521d0114f53","type":"Block","tag":"div","classes":["6bff4be2-ff30-7f82-20ca-4f76f2f7068d"],"children":["8983b58f-b745-e6aa-3d28-e98b090025ce"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025ce","type":"FormButton","tag":"input","classes":["07815991-952a-8d98-0e00-e4c25af27158","6a96e058-9cc8-4e0d-a5e9-b926685a752b"],"children":[],"data":{"form":{"type":"button"},"attr":{"type":"submit","value":"Upload","data-wait":"Please wait..."}}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025cf","type":"FormSuccessMessage","tag":"div","classes":[],"children":["8983b58f-b745-e6aa-3d28-e98b090025d0"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025d0","type":"Block","tag":"div","classes":[],"children":["8983b58f-b745-e6aa-3d28-e98b090025d1"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025d1","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025d2","type":"FormErrorMessage","tag":"div","classes":[],"children":["8983b58f-b745-e6aa-3d28-e98b090025d3"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025d3","type":"Block","tag":"div","classes":[],"children":["8983b58f-b745-e6aa-3d28-e98b090025d4"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"8983b58f-b745-e6aa-3d28-e98b090025d4","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"88362cf3-df8c-c8da-db64-145e0dcfe4eb","fake":false,"type":"class","name":"display-flex","namespace":"","comb":"","styleLess":"display: flex; flex-direction: row; flex-wrap: nowrap;","variants":{},"children":["20c38c00-cdc6-f583-4bb3-1d7bab31b361"],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af2710b","fake":false,"type":"class","name":"icon-1x1-medium","namespace":"","comb":"","styleLess":"width: 2rem; height: 2rem;","variants":{},"children":["c47cc2c4-a992-3afd-045b-e5b4c5db3825"],"origin":null,"selector":null},{"_id":"6bff4be2-ff30-7f82-20ca-4f76f2f7068d","fake":false,"type":"class","name":"form_button-group","namespace":"","comb":"","styleLess":"display: flex; margin-top: 1rem; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1rem; padding-left: 2rem;","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af27158","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"padding-top: 0.75rem; padding-right: 1.5rem; padding-bottom: 0.75rem; padding-left: 1.5rem; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; background-color: hsla(0, 0.00%, 0.00%, 1.00); color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 600; text-align: center;","variants":{},"children":["07815991-952a-8d98-0e00-e4c25af27165","07815991-952a-8d98-0e00-e4c25af27167","07815991-952a-8d98-0e00-e4c25af27168","07815991-952a-8d98-0e00-e4c25af2716c","07815991-952a-8d98-0e00-e4c25af27170","07815991-952a-8d98-0e00-e4c25af27171","aba2d998-55ac-8693-635b-8779bd67e7c2","6a96e058-9cc8-4e0d-a5e9-b926685a752b"],"origin":null,"selector":null},{"_id":"6a96e058-9cc8-4e0d-a5e9-b926685a752b","fake":false,"type":"class","name":"is-upload","namespace":"","comb":"&","styleLess":"margin-left: auto; padding-top: 0.5rem; padding-right: 2rem; padding-bottom: 0.5rem; padding-left: 2rem; background-color: #005ee1; transition-property: all; transition-duration: 400ms; transition-timing-function: ease;","variants":{"main_hover":{"styleLess":"transform: scale(1.09);"}},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af2715c","fake":false,"type":"class","name":"text-size-medium","namespace":"","comb":"","styleLess":"font-size: 1.25rem;","variants":{},"children":["9458c8d3-d59f-bac4-fd65-3cb5550ca23e"],"origin":null,"selector":null},{"_id":"b17b3c77-9387-9012-e919-6be2865b62e1","fake":false,"type":"class","name":"form_content","namespace":"","comb":"","styleLess":"display: flex; padding-top: 0rem; padding-bottom: 0rem; flex-direction: column; justify-content: space-between; flex-wrap: nowrap; align-items: stretch;","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"0c9edac8-b5f5-547d-d099-e9d81e7bd7bb","fake":false,"type":"class","name":"padding-medium","namespace":"","comb":"&","styleLess":"","variants":{},"children":["bc15e964-6205-05bb-0445-9741ef5112de"],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"e04175d8-a0f2-85f9-8fd9-44e3819a4dd8","fake":false,"type":"class","name":"padding-horizontal","namespace":"","comb":"&","styleLess":"","variants":{},"children":["98c80a93-39f3-41fe-dda7-dbc2c108b8e5"],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"8545c1bf-5510-2c6d-a3a9-c0bdd8800bcf","fake":false,"type":"class","name":"text-color-gray","namespace":"","comb":"","styleLess":"color: #666;","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"a42d5aa0-eb7b-eb92-91da-fd47adfbab8a","fake":false,"type":"class","name":"padding-horizontal","namespace":"","comb":"&","styleLess":"","variants":{},"children":["0c9edac8-b5f5-547d-d099-e9d81e7bd7bb"],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"cf43d98c-48d8-bebc-6c99-10f0eb75fae1","fake":false,"type":"class","name":"padding-section-large","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"54441c96b0981db6504faf03","origin":null,"selector":null},{"_id":"cf43d98c-48d8-bebc-6c99-10f0eb75fadd","fake":false,"type":"class","name":"section_hero","namespace":"","comb":"","styleLess":"display: flex; min-height: 100svh; flex-direction: column; justify-content: center; background-color: #f3f9ff;","variants":{"medium":{"styleLess":"padding-top: 3rem;"}},"children":[],"createdBy":"54441c96b0981db6504faf03","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af27150","fake":false,"type":"class","name":"main-wrapper","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"origin":null,"selector":null},{"_id":"9458c8d3-d59f-bac4-fd65-3cb5550ca23e","fake":false,"type":"class","name":"text-weight-semibold","namespace":"","comb":"&","styleLess":"","variants":{},"children":["797e085a-37c0-cf5c-cacc-8020b07a1bf0","e04175d8-a0f2-85f9-8fd9-44e3819a4dd8"],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"98c80a93-39f3-41fe-dda7-dbc2c108b8e5","fake":false,"type":"class","name":"padding-medium","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"3b064fc4-b6f7-6230-11f4-ceccddf9b93a","fake":false,"type":"class","name":"form_upload-div","namespace":"","comb":"","styleLess":"display: flex; min-height: 15rem; margin-top: 1.25rem; margin-right: 2rem; margin-bottom: 0.625rem; margin-left: 2rem; padding-top: 1.25rem; padding-right: 0.625rem; padding-bottom: 1.25rem; padding-left: 0.625rem; flex-direction: column; justify-content: center; flex-wrap: nowrap; align-items: stretch; border-top-style: dashed; border-top-width: 0.125rem; border-top-color: hsla(214.93333333333334, 100.00%, 62.67%, 1.00); border-right-style: dashed; border-right-width: 0.125rem; border-right-color: hsla(214.93333333333334, 100.00%, 62.67%, 1.00); border-bottom-style: dashed; border-bottom-width: 0.125rem; border-bottom-color: hsla(214.93333333333334, 100.00%, 62.67%, 1.00); border-left-style: dashed; border-left-width: 0.125rem; border-left-color: hsla(214.93333333333334, 100.00%, 62.67%, 1.00); border-top-left-radius: 0.3125rem; border-top-right-radius: 0.3125rem; border-bottom-left-radius: 0.3125rem; border-bottom-right-radius: 0.3125rem; background-color: #f3f9ff;","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"c47cc2c4-a992-3afd-045b-e5b4c5db3825","fake":false,"type":"class","name":"align-center","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"e176e94c-6e92-60da-fe02-f1b246007d37","fake":false,"type":"class","name":"global-styles","namespace":"","comb":"","styleLess":"position: fixed; left: 0%; top: 0%; right: auto; bottom: auto; display: block;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af27147","fake":false,"type":"class","name":"container-large","namespace":"","comb":"","styleLess":"width: 100%; max-width: 80rem; margin-right: auto; margin-left: auto;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"20c38c00-cdc6-f583-4bb3-1d7bab31b361","fake":false,"type":"class","name":"is-space-between","namespace":"","comb":"&","styleLess":"justify-content: space-between;","variants":{"tiny":{"styleLess":"flex-direction: column; flex-wrap: nowrap;"}},"children":["4b5995cc-5032-be11-0737-3fe2a660e8c7","16303b5e-0d08-63cd-874a-75be763be68d","a42d5aa0-eb7b-eb92-91da-fd47adfbab8a"],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"cf43d98c-48d8-bebc-6c99-10f0eb75fada","fake":false,"type":"class","name":"form_container","namespace":"","comb":"","styleLess":"display: block; overflow: hidden; max-width: 40rem; margin-right: auto; margin-left: auto; padding-top: 1rem; justify-content: start; justify-items: start; align-items: start; align-content: start; grid-auto-columns: 1fr; grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; grid-template-columns: 1fr; grid-template-rows: auto; border-top-left-radius: 0.625rem; border-top-right-radius: 0.625rem; border-bottom-left-radius: 0.625rem; border-bottom-right-radius: 0.625rem; background-color: hsla(0, 0.00%, 100.00%, 1.00); box-shadow: 0 3px 0.625rem 0.1875rem rgba(0,0,0,0.2);","variants":{},"children":[],"createdBy":"54441c96b0981db6504faf03","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af27143","fake":false,"type":"class","name":"page-wrapper","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"origin":null,"selector":null},{"_id":"0cdfae87-5f0c-cca1-df7d-28d9db65284f","fake":false,"type":"class","name":"form_block","namespace":"","comb":"","styleLess":"margin-bottom: 0rem;","variants":{},"children":[],"createdBy":"649d49f23f440aade32b82f4","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af2710d","fake":false,"type":"class","name":"padding-global","namespace":"","comb":"","styleLess":"padding-right: 2.5rem; padding-left: 2.5rem;","variants":{"small":{"styleLess":"padding-right: 1.25rem; padding-left: 1.25rem;"}},"children":["cf43d98c-48d8-bebc-6c99-10f0eb75fae1"],"origin":null,"selector":null},{"_id":"6f91a67f-793d-3c49-b9fd-ccca32f22e4a","fake":false,"type":"class","name":"nav_fixed","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: auto;","variants":{},"children":[],"createdBy":"54441c96b0981db6504faf03","origin":null,"selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/65faa2691a34b9fe3f9dd039/65faa9182c784424ecf41a18_Cloud%20Upload.svg","siteId":"65faa2691a34b9fe3f9dd039","width":90,"isHD":false,"height":59,"fileName":"65faa9182c784424ecf41a18_Cloud Upload.svg","createdOn":"2024-03-20T09:15:04.144Z","origFileName":"Cloud Upload.svg","fileHash":"e33929dace779e33b7f247cd7d49bc11","translationLoading":false,"variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/65faa2691a34b9fe3f9dd039/65faa9182c784424ecf41a18_Cloud%20Upload.svg","thumbUrl":"https://cdn.prod.website-files.com/65faa2691a34b9fe3f9dd039/65faa9182c784424ecf41a18_Cloud%20Upload.svg","_id":"65faa9182c784424ecf41a18","updatedOn":"2024-03-20T09:15:04.144Z","fileSize":1117,"localizedSettings":{}}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":1,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0}}
Browser not supported. Use
CC Chrome or SS Safari.

About this component

AI Generated

Component Description (Generated by AI)

This component provides an elegant and functional interface for users to upload files seamlessly, enhancing both usability and aesthetics.

Key Features:

  • Drag and drop functionality for easy file uploads
  • Maximum file size limit of 25MB
  • Includes success and error messages for user feedback
  • Customizable design elements

Design Elements:

  • Modern and clean interface
  • Dashed border to indicate upload area
  • Responsive design suitable for various devices
  • Color scheme featuring soft backgrounds and contrasting button colors

Potential Use Cases:

  • Web applications requiring user file submissions
  • Educational platforms for assignment uploads
  • Corporate intranets for document sharing
  • E-commerce sites for product file uploads
  • Event registration forms requiring document attachments

Conclusion: The Upload File Drag and Drop component is a versatile tool that enhances user experience while maintaining a professional appearance, making it suitable for a wide range of applications.

Start building

Start building your dreams

Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.