Back
Form 3
Copy component
Copy component
A basic contact form with name, email address and message.
Home
Components
Components
Contact Forms
Form 3
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"df61bb34-f117-1df0-d15b-fceedda8b0ef","type":"FormWrapper","tag":"div","classes":["bf965049-3112-e3e4-e7b9-04cce7157db4"],"children":["ae718ca1-8775-65fc-ea35-7b31daeb0b78","5f241237-5808-e6f6-6b49-e2b030db5441","c9fa66db-117c-f102-9216-1ad8c44a7028","8c1deb6f-5f2e-9a6f-943c-32679287b6a8"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"ae718ca1-8775-65fc-ea35-7b31daeb0b78","type":"Block","tag":"div","classes":["67df1952-ed58-59b1-4efc-0bbbd99b6822"],"children":["6d8f687e-e7e0-d2f7-23bc-b6fff0afe9e4","499c9734-6d61-5c9b-7b68-966a93d2b882","9dd50716-070c-be9a-4e6e-e8662c648034"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6d8f687e-e7e0-d2f7-23bc-b6fff0afe9e4","type":"Block","tag":"div","classes":["67df1952-ed58-59b1-4efc-0bbbd99b6823"],"children":["514c018f-01fc-d3c3-e5fb-ea2ed3809bce"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"514c018f-01fc-d3c3-e5fb-ea2ed3809bce","text":true,"v":"Get in touch"},{"_id":"499c9734-6d61-5c9b-7b68-966a93d2b882","type":"Heading","tag":"h2","classes":["67df1952-ed58-59b1-4efc-0bbbd99b6824"],"children":["bbdec9f6-f94a-c2c0-0f3b-ff3f60eceeac"],"data":{"tag":"h2","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"bbdec9f6-f94a-c2c0-0f3b-ff3f60eceeac","text":true,"v":"Contact us"},{"_id":"9dd50716-070c-be9a-4e6e-e8662c648034","type":"Paragraph","tag":"p","classes":["67df1952-ed58-59b1-4efc-0bbbd99b6825"],"children":["64d6c5be-2c7b-5665-482a-b1537080d8ef"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"64d6c5be-2c7b-5665-482a-b1537080d8ef","text":true,"v":"I guess it comes down to a simple choice, really. Get busy living or get busy dying."},{"_id":"5f241237-5808-e6f6-6b49-e2b030db5441","type":"FormForm","tag":"form","classes":["bf965049-3112-e3e4-e7b9-04cce7157dae"],"children":["e4ae58d7-0ab2-9054-8696-d8bc14d92714","75fff714-18f1-5a8e-051c-198a1d318b1b","3e4d06f4-30f7-a01c-4da0-9463bb4fb68a"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":"Form 3"},"attr":{"id":"wf-form-Form-3","name":"wf-form-Form-3","data-name":"Form 3","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"e4ae58d7-0ab2-9054-8696-d8bc14d92714","type":"Block","tag":"div","classes":["bf965049-3112-e3e4-e7b9-04cce7157db1"],"children":["99cf4031-e4a9-baa2-a8ea-e59c30f1eda4","b3008660-1dfc-51d1-d5f8-e0a2f126eb28"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"99cf4031-e4a9-baa2-a8ea-e59c30f1eda4","type":"Block","tag":"div","classes":["bf965049-3112-e3e4-e7b9-04cce7157dad"],"children":["ed1c47ea-c0fc-cdcc-698c-6c73646f304f","493b80ec-6da5-011e-71cf-36e3eb4db10d"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ed1c47ea-c0fc-cdcc-698c-6c73646f304f","type":"FormBlockLabel","tag":"label","classes":["bf965049-3112-e3e4-e7b9-04cce7157db0"],"children":["7ca4f883-c8b4-4701-d7f9-f4a60122cd11"],"data":{"attr":{"for":"Form-3-First-Name","id":""},"form":{"type":"label","passwordPage":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7ca4f883-c8b4-4701-d7f9-f4a60122cd11","text":true,"v":"Name"},{"_id":"493b80ec-6da5-011e-71cf-36e3eb4db10d","type":"FormTextInput","tag":"input","classes":["bf965049-3112-e3e4-e7b9-04cce7157db3"],"children":[],"data":{"form":{"name":"Form 3 First Name","type":"input","passwordPage":false},"attr":{"id":"Form-3-First-Name","name":"Form-3-First-Name","maxlength":256,"data-name":"Form 3 First Name","placeholder":"Full name","disabled":false,"type":"text","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b3008660-1dfc-51d1-d5f8-e0a2f126eb28","type":"Block","tag":"div","classes":["bf965049-3112-e3e4-e7b9-04cce7157dad"],"children":["cc916d6c-21f5-b40f-bb7a-97a3b0257aad","e5963bc5-d972-a399-fc39-873846ce6f16"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"cc916d6c-21f5-b40f-bb7a-97a3b0257aad","type":"FormBlockLabel","tag":"label","classes":["bf965049-3112-e3e4-e7b9-04cce7157db0"],"children":["9878bf4b-6ef7-021e-f8b4-e04864599fd6"],"data":{"attr":{"for":"Form-3-Email-Address","id":""},"form":{"type":"label","passwordPage":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9878bf4b-6ef7-021e-f8b4-e04864599fd6","text":true,"v":"Email address"},{"_id":"e5963bc5-d972-a399-fc39-873846ce6f16","type":"FormTextInput","tag":"input","classes":["bf965049-3112-e3e4-e7b9-04cce7157db3"],"children":[],"data":{"form":{"name":"Form 3 Email Address","type":"input","passwordPage":false},"attr":{"id":"Form-3-Email-Address","name":"Form-3-Email-Address","maxlength":256,"data-name":"Form 3 Email Address","placeholder":"Email address","disabled":false,"type":"email","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"75fff714-18f1-5a8e-051c-198a1d318b1b","type":"Block","tag":"div","classes":["bf965049-3112-e3e4-e7b9-04cce7157dad"],"children":["0ddf4486-042c-93e1-995c-331502ffeba5","5cbc6556-a087-9972-47b8-1afb912ef47e"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0ddf4486-042c-93e1-995c-331502ffeba5","type":"FormBlockLabel","tag":"label","classes":["bf965049-3112-e3e4-e7b9-04cce7157db0"],"children":["2725a366-fb0b-ca84-26e9-fbfb5da85c85"],"data":{"attr":{"for":"Form-3-Message","id":""},"form":{"type":"label","passwordPage":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"2725a366-fb0b-ca84-26e9-fbfb5da85c85","text":true,"v":"Message"},{"_id":"5cbc6556-a087-9972-47b8-1afb912ef47e","type":"FormTextarea","tag":"textarea","classes":["bf965049-3112-e3e4-e7b9-04cce7157db3","bf965049-3112-e3e4-e7b9-04cce7157db5"],"children":[],"data":{"form":{"name":"Form 3 Message","type":"textarea"},"attr":{"id":"Form-3-Message","name":"Form-3-Message","maxlength":5000,"data-name":"Form 3 Message","placeholder":"Please type your message here...","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"3e4d06f4-30f7-a01c-4da0-9463bb4fb68a","type":"FormButton","tag":"input","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8d9","27e2c28d-84e7-9136-e293-5ae1ccc4f8de"],"children":[],"data":{"form":{"type":"button"},"attr":{"type":"submit","value":"Send message","data-wait":"Please wait...","id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"c9fa66db-117c-f102-9216-1ad8c44a7028","type":"FormSuccessMessage","tag":"div","classes":["bf965049-3112-e3e4-e7b9-04cce7157db2"],"children":["837ce76d-bc78-71f9-0ab8-d55eb3ade016"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"837ce76d-bc78-71f9-0ab8-d55eb3ade016","type":"Block","tag":"div","classes":[],"children":["9d9c56af-9db8-e4d8-84df-1addf4ba4e5a"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9d9c56af-9db8-e4d8-84df-1addf4ba4e5a","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"8c1deb6f-5f2e-9a6f-943c-32679287b6a8","type":"FormErrorMessage","tag":"div","classes":["bf965049-3112-e3e4-e7b9-04cce7157daf"],"children":["5443878e-d904-36a4-1c9e-887f165557cc"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"5443878e-d904-36a4-1c9e-887f165557cc","type":"Block","tag":"div","classes":[],"children":["5308115b-1add-ac67-4f91-44461e7d40fa"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5308115b-1add-ac67-4f91-44461e7d40fa","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"bf965049-3112-e3e4-e7b9-04cce7157daf","fake":false,"type":"class","name":"form-3_error","namespace":"","comb":"","styleLess":"margin-top: 0.5rem; padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem; background-color: #d91b5f; color: white; font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"bf965049-3112-e3e4-e7b9-04cce7157db2","fake":false,"type":"class","name":"form-3_success","namespace":"","comb":"","styleLess":"margin-top: 0px; padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem; background-color: #00c394; color: black; font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"bf965049-3112-e3e4-e7b9-04cce7157db1","fake":false,"type":"class","name":"form-3_grid","namespace":"","comb":"","styleLess":"display: grid; width: 100%; grid-auto-columns: 1fr; grid-column-gap: 3rem; grid-row-gap: 3rem; grid-template-columns: 1fr 1fr; grid-template-rows: auto;","variants":{"tiny":{"styleLess":"grid-template-columns: 1fr;"},"small":{"styleLess":"grid-row-gap: 0rem; grid-template-columns: 1fr;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"bf965049-3112-e3e4-e7b9-04cce7157dae","fake":false,"type":"class","name":"form-3_form","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-start; grid-column-gap: 1.5rem; grid-row-gap: 1.5rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8de","fake":false,"type":"class","name":"is-form-submit","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"bf965049-3112-e3e4-e7b9-04cce7157db5","fake":false,"type":"class","name":"is-text-area","namespace":"","comb":"&","styleLess":"height: 12rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"bf965049-3112-e3e4-e7b9-04cce7157db4","fake":false,"type":"class","name":"form-3","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"67df1952-ed58-59b1-4efc-0bbbd99b6823","fake":false,"type":"class","name":"form-3_header_eyebrow","namespace":"","comb":"","styleLess":"color: #0c60f5; 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":"bf965049-3112-e3e4-e7b9-04cce7157db3","fake":false,"type":"class","name":"form-3_input","namespace":"","comb":"","styleLess":"height: 3.325rem; 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;"},"main_focus":{"styleLess":"border-top-color: #0c60f5; border-right-color: #0c60f5; border-bottom-color: #0c60f5; border-left-color: #0c60f5;"}},"children":["bf965049-3112-e3e4-e7b9-04cce7157db5"],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"67df1952-ed58-59b1-4efc-0bbbd99b6822","fake":false,"type":"class","name":"form-3_header","namespace":"","comb":"","styleLess":"display: flex; margin-bottom: 2rem; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-start; grid-column-gap: 0.5rem; grid-row-gap: 0.5rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"67df1952-ed58-59b1-4efc-0bbbd99b6825","fake":false,"type":"class","name":"form-3_header_paragraph","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"bf965049-3112-e3e4-e7b9-04cce7157db0","fake":false,"type":"class","name":"form-3_label","namespace":"","comb":"","styleLess":"margin-bottom: 0.25rem; align-self: flex-start; color: #0f1929; font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"67df1952-ed58-59b1-4efc-0bbbd99b6824","fake":false,"type":"class","name":"form-3_header_heading","namespace":"","comb":"","styleLess":"margin-top: 0px; margin-bottom: 0px;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"bf965049-3112-e3e4-e7b9-04cce7157dad","fake":false,"type":"class","name":"form-3_field-wrapper","namespace":"","comb":"","styleLess":"width: 100%;","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