{"id":4810,"date":"2024-04-14T10:58:16","date_gmt":"2024-04-14T02:58:16","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4810"},"modified":"2024-04-14T10:58:16","modified_gmt":"2024-04-14T02:58:16","slug":"basics-of-forms-in-webflow","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/basics-of-forms-in-webflow\/","title":{"rendered":"Basics of Forms in Webflow"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p id=\"\">Forms represent one of the most potent tools on the internet, enabling you to efficiently gather information, whether it involves collecting email newsletter subscriptions or business inquiries from potential customers. Through Webflow, you have the capability to extensively personalize and enhance your forms to suit your specific requirements.<\/p>\n<p id=\"\">This tutorial covers the following:<\/p>\n<ol id=\"\">\n<li id=\"\">Adding a form<\/li>\n<li id=\"\">Form structure<\/li>\n<li id=\"\">Configuration of form components<\/li>\n<li id=\"\">Feedback for success and errors<\/li>\n<li id=\"\">Handling form submissions<\/li>\n<li id=\"\">Form data and compliance with GDPR<\/li>\n<li id=\"\">Addressing issues<\/li>\n<\/ol>\n<h2 id=\"\">How to integrate a form<\/h2>\n<p id=\"\">You can include a form from the <strong id=\"\">Insert section <\/strong>(A)&gt;<strong id=\"\"> Components <\/strong>&gt;<strong id=\"\"> Forms<\/strong> category.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b948fcbdd37d12dce612bd_6282c92f8bda0c2e944b9697_t1wspfs5ab6wu61xem5gjpxifsppeev5wvp3jbqg1qvez9dkgzzg1vpflmjp45pdcwbpbleksyhk51lanc5bcsry-mllsp-hxkmxbutv4ecuccx-8wi4lysfftxfsx91ntmljpn2uklqohuqrw.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Form block element is highlighted within the Forms section of the Add panel.\" id=\"\" title=\"64b948fcbdd37d12dce612bd_6282c92f8bda0c2e944b9697_t1wspfs5ab6wu61xem5gjpxifsppeev5wvp3jbqg1qvez9dkgzzg1vpflmjp45pdcwbpbleksyhk51lanc5bcsry-mllsp-hxkmxbutv4ecuccx-8wi4lysfftxfsx91ntmljpn2uklqohuqrw\"><\/div>\n<\/figure>\n<p id=\"\">Drag a <strong id=\"\">Form block<\/strong> onto the canvas.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948fcbdd37d12dce612ab_63e401a149b4a3070b5f04e3_xgzri0n3urmqrzntruhy_sfnwy75z1c98adrlej8sdnwje_-qg8wmysoevk554zs_gnomeouujvo-aypobepnlv8yqirflm_xy3wopxjyceiku9hwpuoaxblr7jsqgf1mdohctz_f6eniu0jb0xerf.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The default Form block element on the Webflow canvas, with the Form block settings modal window open.\" title=\"64b948fcbdd37d12dce612ab_63e401a149b4a3070b5f04e3_xgzri0n3urmqrzntruhy_sfnwy75z1c98adrlej8sdnwje_-qg8wmysoevk554zs_gnomeouujvo-aypobepnlv8yqirflm_xy3wopxjyceiku9hwpuoaxblr7jsqgf1mdohctz_f6eniu0jb0xerf\"><\/div>\n<\/figure>\n<h2 id=\"\">Form structure<\/h2>\n<p id=\"\">The <strong id=\"\">Form block<\/strong> adopts the full width of its containing element and incorporates 3 sub-elements:\u00a0<\/p>\n<ul id=\"\">\n<li id=\"\"><strong id=\"\">Form<\/strong> \u2014 includes all your form inputs and components<\/li>\n<li id=\"\"><strong id=\"\">Success message<\/strong> \u2014 the message displayed upon successful form submission<\/li>\n<li id=\"\"><strong id=\"\">Error message<\/strong> \u2014 the message shown in case of submission issues<\/li>\n<\/ul>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" alt=\"The Form block element expanded in the Navigator panel to reveal its child elements: Form, Success message, and Error message.\u00a0\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948fcbdd37d12dce612ae_6282c92f7c2bbcc0dbe2bbbd_y81xy5m7cr84-zfoaiieywcylkm3u2owzqasxd-k46ztxyefgj9wn4tbsndrbm8odvmucezecm4ulaqzz_uq5mds3ihk7qno5xwbhnszimpqpvndnvgmtgakmersaab6xu2r_ofbvrhhk7krlq\" width=\"auto\" height=\"auto\" loading=\"auto\" id=\"\" title=\"64b948fcbdd37d12dce612ae_6282c92f7c2bbcc0dbe2bbbd_y81xy5m7cr84-zfoaiieywcylkm3u2owzqasxd-k46ztxyefgj9wn4tbsndrbm8odvmucezecm4ulaqzz_uq5mds3ihk7qno5xwbhnszimpqpvndnvgmtgakmersaab6xu2r_ofbvrhhk7krlq\"><\/div>\n<\/figure>\n<p id=\"\">Additionally, the <strong id=\"\">Form block<\/strong> element features a <strong id=\"\">Source <\/strong>option, enabling you to link your form to Logic. This permits you to transmit data from form submissions to other platforms via Logic, or direct form submissions to distinct content editors or contributors within your Workspace based on the submitted form or its content. Discover more about Logic.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948fcbdd37d12dce612b1_63e401b551231d1379619453_5souxhefhdc6sfb7ylnskg27xja2q0ojhwosjit2dcagd70a6mzim1ddvlyryyk1effxzbbebfhqhbgttsqv7iohxxbtcsermirkxupsroxek5jx5diffpekwvoncvjj2ytnon0hkktt0kv-p_iyf6\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Form block Source is set to \u201cDefault form.\u201d\u00a0\" title=\"64b948fcbdd37d12dce612b1_63e401b551231d1379619453_5souxhefhdc6sfb7ylnskg27xja2q0ojhwosjit2dcagd70a6mzim1ddvlyryyk1effxzbbebfhqhbgttsqv7iohxxbtcsermirkxupsroxek5jx5diffpekwvoncvjj2ytnon0hkktt0kv-p_iyf6\"><\/div>\n<\/figure>\n<h3 id=\"\">Arrangement of your form<\/h3>\n<p id=\"\">Within the <strong id=\"\">Form<\/strong>, you have the flexibility to append or remove any form component, such as an <strong id=\"\">Entry <\/strong>or a <strong id=\"\">Tick box<\/strong>, to adapt your form as required.\u00a0<\/p>\n<h4 id=\"\">Form components<\/h4>\n<ul id=\"\">\n<li id=\"\"><strong id=\"\">Field description<\/strong> \u2014 A description is utilized to define the functionality or significance of a form field. Descriptions are indispensable for easy navigation through your form, hence it\u2019s vital that you <strong id=\"\">do not eliminate<\/strong> them.\u00a0<\/li>\n<li id=\"\"><strong id=\"\">Entry<\/strong> \u2014 The <strong id=\"\">Entry<\/strong> field gathers single-line data, such as a single-word answer to a query (e.g., name or email address).<\/li>\n<li id=\"\"><strong id=\"\">File attachment<\/strong> \u2014 The <strong id=\"\">File attachment<\/strong> button enables visitors to attach files to their form submissions. Explore more about the File attachment button and how you can modify it.<\/li>\n<li id=\"\"><strong id=\"\">Text region<\/strong> \u2014 The <strong id=\"\">Text region<\/strong> field allows users to input multi-line data, like a lengthy message.<\/li>\n<li id=\"\"><strong id=\"\">Tick box<\/strong> \u2014 <strong id=\"\">Tick boxes<\/strong> are optimal for input data where users can select <em id=\"\">one or more<\/em> options. Learn more about tick boxes.<\/li>\n<li id=\"\"><strong id=\"\">Selection button<\/strong> \u2014 The <strong id=\"\">Selection button<\/strong> field is perfect for input data where users can pick <em id=\"\">only one<\/em> from many options. Learn more about selection buttons.<\/li>\n<li id=\"\"><strong id=\"\">Option<\/strong> \u2014 The <strong id=\"\">Option<\/strong> input behaves similarly to a dropdown component, offering a list of various choices for users to select from. It also allows for multiple selections. Learn more about option inputs.<\/li>\n<li id=\"\"><strong id=\"\">reCAPTCHA<\/strong> \u2014 reCAPTCHA is a Google service that aids in preventing form spam. Find out how to integrate reCAPTCHA into your forms.<\/li>\n<li id=\"\"><strong id=\"\">Submit button <\/strong>\u2014 No form is functional without the <strong id=\"\">Submit button<\/strong>! Upon clicking, this button submits all the accumulated data in the form.\u00a0<\/li>\n<\/ul>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948fcbdd37d12dce612b4_6282c92f22861d7062f9ab65_ophaseblgdvmsq8l35zgtlandavsfik3d3rn4xcjyyelaivahqylvndeccbtx3ebbnmwj9eb2ntqvfq8g_px_z36dwo96qvfbl9l-2f1wggud8fohitjgsfth_d66g82njo8gswbyeghtd9h7q\" width=\"auto\" height=\"auto\"\" loading=\"auto\" alt=\"Form component section within the Insert panel, containing all available form components.\" id=\"\" title=\"64b948fcbdd37d12dce612b4_6282c92f22861d7062f9ab65_ophaseblgdvmsq8l35zgtlandavsfik3d3rn4xcjyyelaivahqylvndeccbtx3ebbnmwj9eb2ntqvfq8g_px_z36dwo96qvfbl9l-2f1wggud8fohitjgsfth_d66g82njo8gswbyeghtd9h7q\"><\/div>\n<\/figure>\n<blockquote id=\"\"><p><strong id=\"\">Need to know:<\/strong> FormOnly Form block allows the inclusion of elements.<\/p><\/blockquote>\n<h2 id=\"\">Configuring Form components<\/h2>\n<p id=\"\">To adjust Form components (e.g., Input, Submit button), you can open their settings by double-clicking on them. Alternatively, selecting an element and pressing <strong id=\"\">Enter\/Return<\/strong> will also bring up the settings.<\/p>\n<h3 id=\"\">Customizing Inputs<\/h3>\n<p id=\"\">Different input settings are available for each form element based on its type.<\/p>\n<ul id=\"\">\n<li id=\"\"><strong id=\"\">Title<\/strong> \u2014 Every form element includes a <strong id=\"\">Title<\/strong> field, used to identify the field in form submissions. The default title for all forms is set to \u201cEmail Form.\u201d<\/li>\n<li id=\"\"><strong id=\"\">Mandatory<\/strong> \u2014 Each form element offers the <strong id=\"\">Mandatory<\/strong> choice. When selected, site visitors cannot submit the form without completing this field.<\/li>\n<li id=\"\"><strong id=\"\">Temporary Text<\/strong>\u2014 For<strong id=\"\"> Input<\/strong> and <strong id=\"\">Text area<\/strong> fields, the <strong id=\"\">Temporary Text<\/strong> is the initial text displayed in an empty input field, getting replaced once the user starts typing. It can be a sample text or a brief description of the required data. You can style temporary text from the states menu.\u00a0<\/li>\n<\/ul>\n<blockquote id=\"\"><p><strong id=\"\">Crucial:<\/strong> To avoid issues, it is recommended not to use <strong id=\"\">Temporary Text<\/strong> as a substitute for a <strong id=\"\">Title<\/strong> or for providing important details or instructions for its corresponding input field (e.g., \u201cPassword must be between 8-20 characters\u201d), because temporary text may not be translated for site visitors utilizing translation tools and isn&#8217;t accessible to assistive technology like screen readers. Furthermore, as temporary text disappears when users start typing in the field, its usage instead of a <strong id=\"\">Title<\/strong> can confuse users on the expected information for that field.<\/p><\/blockquote>\n<ul id=\"\">\n<li id=\"\"><strong id=\"\">Text style<\/strong> \u2014 The <strong id=\"\">Text style<\/strong> allows you to specify the type of input being collected. For instance, an <strong id=\"\">Input<\/strong> field with <strong id=\"\">Text style:<\/strong><strong id=\"\">email<\/strong> will exclusively accept email addresses. A <strong id=\"\">Phone<\/strong> text style accepts phone numbers and text characters (while the phone text style displays a keypad on mobile devices). A <strong id=\"\">Password<\/strong> text style will conceal the entered characters in the input field.<\/li>\n<li id=\"\"><strong id=\"\">Initial focus<\/strong> \u2014 If you wish for an <strong id=\"\">Input<\/strong> to be focused (i.e., the user&#8217;s cursor to automatically land in the <strong id=\"\">Input<\/strong> field) when the page loads, enabling the <strong id=\"\">Initial focus<\/strong> option in the <strong id=\"\">Form settings<\/strong> is necessary. When an element in the form has <strong id=\"\">Initial focus<\/strong> enabled, the page will load and scroll to that element if the form lies within the part of the page requiring scrolling to view.\u00a0<\/li>\n<\/ul>\n<h6 id=\"\"><strong id=\"\">Reminder:<\/strong> If your webpage automatically scrolls down upon loading, it might be due to the <strong id=\"\">Initial focus<\/strong> being activated on an <strong id=\"\">Input<\/strong> field within a form located in the segment of the page necessitating scrolling to view. To prevent this behavior, ensure to deactivate the <strong id=\"\">Initial focus<\/strong> for all <strong id=\"\">Input<\/strong> fields in your form. It is also crucial to ensure the <strong id=\"\">Initial focus<\/strong> is disabled for any hidden form fields, as this can lead to submission complications.<\/h6>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" alt=\"Settings for an Input field, including Title, Temporary Text, Text Style, and options to set the Input as Mandatory and initially focused.\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b948fcbdd37d12dce612b7_6282c92f9fb51cb3577d81f1_rqoftst0f24tltw4f_st7_k9nsq0olodssjcpadlb5ilxxk3hnxjm2dioyqobv16rs4e-dvcgeqap0yosiv7bio14b0kj-ga-dqqfpqchd70nruuiovtrqqap5hzbcbcdsrex0_vixj5ysqsfg.png\" width=\"auto\" height=\"auto\" loading=\"auto\" id=\"\" title=\"64b948fcbdd37d12dce612b7_6282c92f9fb51cb3577d81f1_rqoftst0f24tltw4f_st7_k9nsq0olodssjcpadlb5ilxxk3hnxjm2dioyqobv16rs4e-dvcgeqap0yosiv7bio14b0kj-ga-dqqfpqchd70nruuiovtrqqap5hzbcbcdsrex0_vixj5ysqsfg\"><\/div>\n<\/figure>\n<p id=\"\">For further insights on input configurations, refer to our detailed guide on checkboxes, radio buttons, and select inputs.<\/p>\n<h3 id=\"\">Submission Button<\/h3>\n<p id=\"\">The settings of the <strong id=\"\">Submission<\/strong><strong id=\"\">button<\/strong> allow you to specify the <strong id=\"\">Button text<\/strong> and <strong id=\"\">Waiting text<\/strong>.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" alt=\"Settings for the Submit button. The default button text is 'Submit' and during processing, it changes to 'Please wait...'\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948fcbdd37d12dce612ba_6282c92f2d00a2a7e3666faf_kqawemidohqqmhwpcvpnufagiu_7c6x2w4ascuqwqb2z_xzqsun1tf5xdvqmxzat658cykrbqdbk4zl-w621b1go2hm6j1kbym12jjfpfks4j7l692klonyfqj5cg1wreacv32vffsfxcob6oa\" width=\"auto\" height=\"auto\" loading=\"auto\" id=\"\" title=\"64b948fcbdd37d12dce612ba_6282c92f2d00a2a7e3666faf_kqawemidohqqmhwpcvpnufagiu_7c6x2w4ascuqwqb2z_xzqsun1tf5xdvqmxzat658cykrbqdbk4zl-w621b1go2hm6j1kbym12jjfpfks4j7l692klonyfqj5cg1wreacv32vffsfxcob6oa\"><\/div>\n<\/figure>\n<p id=\"\">By double-clicking the <strong id=\"\">Submission button<\/strong>, its settings modal will appear. Here, you can modify 2 key elements:<\/p>\n<ul id=\"\">\n<li id=\"\"><strong id=\"\">Button text<\/strong> \u2014 the text displayed on the submission button. The default <strong id=\"\">Button text<\/strong> is \u201cSubmit\u201d<\/li>\n<li id=\"\"><strong id=\"\">Waiting text<\/strong> \u2014 the text that takes the button&#8217;s place after clicking the submit button and prior to form submission. The default <strong id=\"\">Waiting text<\/strong> is \u201cPlease wait\u2026\u201d<\/li>\n<\/ul>\n<h2 id=\"\">Acknowledgment and error indications<\/h2>\n<p id=\"\">To access the acknowledgment and error indicators, select the <strong id=\"\">Form <\/strong>inside the <strong id=\"\">Form block <\/strong>and open the <strong id=\"\">Settings <\/strong>(D) &gt; <strong id=\"\">Form settings<\/strong>. Within this section, you will find the available <strong id=\"\">State<\/strong> choices. Click on the <strong id=\"\">State<\/strong> you wish to modify.<\/p>\n<ul id=\"\">\n<li id=\"\"><strong id=\"\">Standard <\/strong>\u2014\u00a0 the default state before users interact with the form<\/li>\n<li id=\"\"><strong id=\"\">Confirmation <\/strong>\u2014 the message shown upon successful form submission. You can personalize and customize this text as needed.<\/li>\n<li id=\"\"><strong id=\"\">Issue <\/strong>\u2014\u00a0 the message displayed when an error occurs during form submission. Once again, customization of the error state is possible.<\/li>\n<\/ul>\n<h6 id=\"\"><strong id=\"\">Handy tip:<\/strong> It is advisable to include an email address in the error state for cases where users encounter issues with the form.<\/h6>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\">\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\">\n        <img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948fcbdd37d12dce612a5_63e40240abdfcbbce540c8cb_nmd8lpxavzd2whqxz7vmivwu6vfq5n6yrryp1xgg681ffohhdtc51igx5loare3grkmhjv_y_plthvy21fvmzowvjmszo1xd01m0rpc8rngmlde2tyjcestknlk4m9vhw-wsps3zdjlds-zhyq8vyi.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The standard Form block success state displayed on the Webflow canvas. The default success message is shown instead of the Form block and reads, \u201cThanks! Your submission has been successfully received!\u201d\" title=\"64b948fcbdd37d12dce612a5_63e40240abdfcbbce540c8cb_nmd8lpxavzd2whqxz7vmivwu6vfq5n6yrryp1xgg681ffohhdtc51igx5loare3grkmhjv_y_plthvy21fvmzowvjmszo1xd01m0rpc8rngmlde2tyjcestknlk4m9vhw-wsps3zdjlds-zhyq8vyi\">\n    <\/div>\n<\/figure>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\">\n        <img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948fcbdd37d12dce612a8_63e402405f7d5546e1ded140_4n7rn1noa37yyaumbxunfzjjjioc5qdq2mnszn975-vtwovegtqjvxubvgxba2kyqfkec3ldhy1vt5fxefbadn5fzbqgaazv4sa0hwtjtwze1jqyvz5nkga3xni-7shcdd5fsc1hl7zz8hnzyrbvv9.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The standard Form block error state displayed on the Webflow canvas. The default error message shown under the Form block reads, \u201cUh-oh! An error occurred while submitting the form.\u201d\" title=\"64b948fcbdd37d12dce612a8_63e402405f7d5546e1ded140_4n7rn1noa37yyaumbxunfzjjjioc5qdq2mnszn975-vtwovegtqjvxubvgxba2kyqfkec3ldhy1vt5fxefbadn5fzbqgaazv4sa0hwtjtwze1jqyvz5nkga3xni-7shcdd5fsc1hl7zz8hnzyrbvv9\">\n    <\/div>\n<\/figure>\n<h2 id=\"\">Submission of Forms<\/h2>\n<p id=\"\">Upon submission of a form through one of your websites, the details provided will be dispatched to the specified email(s) in your <strong id=\"\">Form notification settings<\/strong> \u2014 and\/or rerouted to an external destination if your form is configured to receive data elsewhere. If you have full ownership of a website (meaning it is not managed by a client), you can also retrieve this data and oversee it in your <strong id=\"\">Site settings<\/strong> or within the Editor.<\/p>\n<h6 id=\"\"><strong id=\"\">Expert tip:<\/strong> Should you wish to direct submissions to different content contributors or members of your Workspace based on the form submitted or its content, you can achieve this using Logic\u2019s Send email notification feature. Further details on Logic available <a href=\"https:\/\/example.com\/logic\" id=\"\">here<\/a>.<\/h6>\n<h3 id=\"\">Alerts for Form Submissions<\/h3>\n<p id=\"\">The <strong id=\"\">Form notification<\/strong> settings can be accessed via <strong id=\"\">Site settings<\/strong> &gt; <strong id=\"\">Forms<\/strong> tab. This section enables you to customize how and where you prefer to receive your data. Additional insights on configuring form alerts can be found in the setup guidelines.<\/p>\n<h3 id=\"\">Processing Form Submissions<\/h3>\n<p id=\"\">In the event that you oversee the website, you possess the ability to access and administer the submitted data within the <strong id=\"\">Site settings <\/strong>&gt;<strong id=\"\"> Forms<\/strong> tab. Within this area, you can review the submissions and even retrieve them as a CSV file. Accessibility to form submissions is also possible via the Editor. Comprehensive details on form submissions and data management can be explored.<\/p>\n<blockquote id=\"\"><p><strong id=\"\">Vital note:<\/strong> Initially, all forms are labeled as \u201cEmail Form.\u201d In cases where multiple forms exist on your site without individual names assigned, submission data from <em id=\"\">all<\/em> forms will be consolidated under \u201cEmail Form\u201d within <strong id=\"\">Site settings<\/strong> &gt; <strong id=\"\">Forms<\/strong> tab &gt; <strong id=\"\">Form submission data<\/strong>. It is advisable to assign descriptive names to each form for improved data distinction.<\/p><\/blockquote>\n<h2 id=\"\">Form Information and GDPR<\/h2>\n<blockquote id=\"\"><p><strong id=\"\">Disclaimer<\/strong>: The provided content serves informational purposes only and does not serve as legal advice. Consult professional legal advisors to determine the applicability of the General Data Protection Regulation (GDPR). Explore more details in our<a href=\"https:\/\/example.com\/privacy-faqs\" id=\"\"> Privacy FAQs<\/a>.<\/p><\/blockquote>\n<p id=\"\">For website operators who collect personal data from EU individuals (e.g., through form submissions or third-party scripts), adherence to responsibilities as a data controller is imperative. Familiarize yourself with the obligations as a data controller and ensure GDPR compliance. Guidance from the UK Information Commissioner\u2019s Office can aid this process through their<a href=\"https:\/\/example.com\/data-protection-self-assessment\/\" id=\"\"> data-protection self-assessment checklist<\/a>.<\/p>\n<p id=\"\"><strong id=\"\">When designing forms that request personal information via Webflow<\/strong>, ensure transparent solicitation and reception of consent, unless another lawful basis for processing applies.<\/p>\n<p id=\"\"><strong id=\"\">For creators of websites handling clients\u2019 personal data through their platforms<\/strong>, ensure clients comprehend their duties as data controllers of that personal information.<\/p>\n<p id=\"\"><strong id=\"\">If utilizing third-party utilities (e.g., Zapier) to link Webflow forms to external data repositories for transferring personal data<\/strong>, review your roles and responsibilities as a data controller.<\/p>\n<p id=\"\"><strong id=\"\">Delve deeper:<\/strong><a href=\"https:\/\/example.com\/gdpr\" id=\"\">Enhancing readiness for the General Data Protection Regulation \u2013 insights on Webflow\u2019s commitments<\/a><\/p>\n<h2 id=\"\">Addressing Issues<\/h2>\n<p id=\"\">Should challenges arise in the successful form submission process, consider the following troubleshooting steps:<\/p>\n<ul id=\"\">\n<li id=\"\">For websites implementing reCAPTCHA, confirm the inclusion of a reCAPTCHA element in <em id=\"\">every<\/em> form. Failure to adhere to this requirement may impede submissions if reCAPTCHA is activated under <strong id=\"\">Site settings<\/strong> &gt; <strong id=\"\">Forms<\/strong> tab.<\/li>\n<li id=\"\">In cases where certain form fields are concealed, verify that the <strong id=\"\">Autofocus<\/strong> attribute is unchecked for those fields.<\/li>\n<li id=\"\">On unhosted sites where the total number of form submissions is capped at 10 for free accounts, exceeding this limit necessitates an upgrade in site plan to continue receiving submissions.<\/li>\n<\/ul>\n<blockquote id=\"\"><p><strong id=\"\">Noteworthy:<\/strong> External hosting of sites exported from Webflow disables form submission processing on the site. Alternate methods such as third-party tools or embedded form integrations are required for collecting form submissions on the exported site.<\/p><\/blockquote>\n<p id=\"\">Automatic page scrolling may occur due to the <strong id=\"\">Autofocus<\/strong> setting being engaged on an <strong id=\"\">Input<\/strong> field beyond the immediate view. Unselecting the <strong id=\"\">Autofocus<\/strong> option for all <strong id=\"\">Input<\/strong> fields eliminates this behavior.<\/p>\n<p id=\"\">For persistent issues, kindly reach out to customer support for further assistance.<\/p>\n","protected":false},"excerpt":{"rendered":"Add and configure Webflow Forms.","protected":false},"author":2,"featured_media":4811,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-4810","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4810"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4810\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/4811"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}