{
  "Status": true,
  "Message": "",
  "Response": {
    "post": {
      "postuid": "rbx116z8ik",
      "tenantuid": "d8b744fc-2e70-4089-bb80-dd1d08f6c7b2",
      "projectuid": "239698c5-f7eb-4574-8cc8-c6568f08b3a0",
      "title": "Design a Web Form",
      "slug": "article/rbx116z8ik-design-a-web-form",
      "html": "\u003Cp\u003EBuilding Web Forms with the DailyStory Web Form designer is simple. In the designer, a completed form may look something like this - with multiple text boxes, a \u003Ca href=\u0022/article/ffiv28gn4b-re-captcha-and-daily-story-integration\u0022\u003EreCAPTCHA\u003C/a\u003E and a submit button:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/76b1a784cdb35171fd24c7130a3962da.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EAdding items to the designer is as simple as dragging from the left options pane and dropping onto the design surface.\u003C/p\u003E\u003Ch3\u003EDrag-and-drop Form Items\u003C/h3\u003E\u003Cp\u003EDrag-and-drop form items onto the design surface:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/bb12b2d1e9b51ad925e1a0bb8bf1f145.gif\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EOnce added to the design surface, form elements can be selected and re-arranged by dragging them up or down.\u003C/p\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003E\u003Ci class=\u0022fa-duotone fa-circle-exclamation\u0022 aria-hidden=\u0022true\u0022\u003E\u003C/i\u003ERecommended\u003C/span\u003E\u003Cp\u003ETo create a web form, you must have either an email address or mobile number field as part of the form. We must have one or the other to be used as the unique identifier for the contact record.\u003C/p\u003E\u003C/cite\u003E\u003Ch3\u003ERe-arrange Form Item Order\u003C/h3\u003E\u003Cp\u003EForm elements can be selected and dragged to re-order then:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/f37fd3d6f1616111e30d9d5ac0d55b91.gif\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch3\u003EForm Items\u003C/h3\u003E\u003Cp\u003EThere are 3 types of form items that can be added to the Web Form designer (with more planned):\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EInputs\u003C/b\u003E - text boxes, drop downs, checkboxes, and text areas.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EContent\u003C/b\u003E - HTML text and labels.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EMisc\u003C/b\u003E - reCAPTCHA\u003C/li\u003E\u003C/ul\u003E\u003Ch4\u003EInput Form Items\u003C/h4\u003E\u003Cp\u003EInput form items are used to collect data, such as first name and email address.\u003C/p\u003E\u003Cp\u003EEmail address field\u003C/p\u003E\u003Cp\u003EThe email address field is a special field that automatically validates and maps to the contact\u0026#39;s email address.\u003C/p\u003E\u003Ch5\u003EText field\u003C/h5\u003E\u003Cp\u003EThe text field gives the user the ability to enter information that is mapped to a contact record, such as their name. When an input form item is added to the designer, a menu on the right-side opens up with options. The screenshot below shows the options for Text Input:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/344745032084f4dd7b14403e1628172f.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EUse \u003Cb\u003EPlaceholder text\u003C/b\u003E to set text in the text input. This enables people completing the form with additional detail on what information they need to enter.\u003C/p\u003E\u003Cp\u003EUse \u003Cb\u003ELabel\u003C/b\u003E to optionally set a label for the form.\u003C/p\u003E\u003Cp\u003E\u003Cb\u003EMap to lead field\u003C/b\u003E (required) tells DailyStory how to handle this data when it is submitted. In the screenshot above the input text will populate a lead\u0026#39;s Full name field.\u003C/p\u003E\u003Cp\u003E\u003Cb\u003ERequired\u003C/b\u003E checkbox indicates if the person completing this form is required to enter data for this field.\u003C/p\u003E\u003Cp\u003EAs you set options on the form items, those options are reflected in the designer:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/cbd80a5ad5d497fc895461929dafbc72.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003E\u003Ci class=\u0022fa-duotone fa-circle-exclamation\u0022 aria-hidden=\u0022true\u0022\u003E\u003C/i\u003ERecommended\u003C/span\u003E\u003Cp\u003EWhen asking for contact information, it\u0026#39;s always better to ask for a first name and last name separately versus the \u0026#34;full name\u0026#34;.\u003C/p\u003E\u003C/cite\u003E\u003Ch4\u003EPhone number field\u003C/h4\u003E\u003Cp\u003EThe phone number field is a special field used exclusively for entering phone numbers. The standard text field can also be used to collect phone numbers, but the difference is that the phone number field has a unique user experience which allows for selecting the country code:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/76a3b8b52887e824ac695bf4fe026dac.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch4\u003EHidden Text field\u003C/h4\u003E\u003Cp\u003EThe hidden text field gives the user the ability to enter information that is mapped to a contact record, but is hidden and not editable by the user.\u003C/p\u003E\u003Ch4\u003EMulti-line text field\u003C/h4\u003E\u003Cp\u003EThe multi-line text (HTML textarea) field is similar to a text field, but allows for longer entries. For example, on a contact us form asking for more details.\u003C/p\u003E\u003Ch4\u003ECheckbox\u003C/h4\u003E\u003Cp\u003EAdd an HTML checkbox field to your form.\u003C/p\u003E\u003Cp\u003EUnlike other fields, the label of a checkbox is displayed inline and to the right of the checkbox:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/12c743088c5bbb0f61c3a7830f99b92b.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EThe checkbox field should be mapped to a \u003Ca href=\u0022/article/h1vsml1ve0-create-or-edit-custom-contact-field\u0022\u003Ecustom field\u003C/a\u003E that is of type True/False or Yes/No.\u003C/p\u003E\u003Ch5\u003EDropdown\u003C/h5\u003E\u003Cp\u003EThe Dropdown contains a pre-populated list of values that is selected from.\u003C/p\u003E\u003Cp\u003EThe Dropdown form item has some additional options. Specifically, the ability to populate a list of options for the dropdown:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/1a1faef8983a1c375f0be73539651da4.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003ETo add a name (displayed) and value (what is saved) click \u003Cb\u003EAdd Name/Value\u003C/b\u003E. This will open a new window where you can add a name and a value.\u003C/p\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003E\u003Ci class=\u0022fa-duotone fa-circle-exclamation\u0022 aria-hidden=\u0022true\u0022\u003E\u003C/i\u003ERecommended\u003C/span\u003E\u003Cp\u003EIf you\u0026#39;ve added several name/values you can rearrange the order by clicking and dragging.\u003C/p\u003E\u003C/cite\u003E\u003Ch5\u003ESubmit button\u003C/h5\u003E\u003Cp\u003EEvery form must contain a submit button. The submit button text can be set, along with a number of other options as shown below:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/d5437340ba892b5bed1cc6c4ff1f70b6.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch4\u003EContent Form Items\u003C/h4\u003E\u003Cp\u003EContent form items enable you to easily add labels or HTML text onto your form.\u003C/p\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003E\u003Ci class=\u0022fa-duotone fa-circle-exclamation\u0022 aria-hidden=\u0022true\u0022\u003E\u003C/i\u003ERecommended\u003C/span\u003E\u003Cp\u003EWhile labels are supported as content form items, it is better to use the label option on the form item itself.\u003C/p\u003E\u003C/cite\u003E\u003Ch5\u003ELabel\u003C/h5\u003E\u003Cp\u003EThe Label is used to add an additional label to an area of your form. This is useful if you want to create a section for certain form elements.\u003C/p\u003E\u003Ch5\u003ERich Content / HTML\u003C/h5\u003E\u003Cp\u003EThe Rich Content / HTML is used to add any additional content (images, video, text) to your form.\u003C/p\u003E\u003Cp\u003EAlso remember that a form can additionally be embedded in a \u003Ca href=\u0022/article/z2l32rh39p-landing-pages\u0022\u003EDailyStory landing page\u003C/a\u003E.\u003C/p\u003E\u003Ch4\u003EMisc Form Items\u003C/h4\u003E\u003Cp\u003EThe Misc Form Items provides a list of additional items that may be added to your form.\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EShare Buttons\u003C/b\u003E which allow this form to be shared with others.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ESMS Consent\u003C/b\u003E optains consent to send SMS marketing\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EEmail Consent\u003C/b\u003E optains consent to send email marketing\u003C/li\u003E\u003C/ul\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/5aeaa1ceda03fb1b269b020eb339e621.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EreCAPTCHA\u003C/b\u003E which allows you to determine if a user is a bot or human.\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003EIf \u003Ca href=\u0022/article/ffiv28gn4b-re-captcha-and-daily-story-integration\u0022\u003EreCAPTCHA integration is configured\u003C/a\u003E you can add the reCAPTCHA widget to your form.\u003C/p\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003E\u003Ci class=\u0022fa-duotone fa-circle-exclamation\u0022 aria-hidden=\u0022true\u0022\u003E\u003C/i\u003ERecommended\u003C/span\u003E\u003Cp\u003EProvided by Google, reCAPTCHA is a free service that protects your website from spam and abuse by adding a simple test to your web or mobile experience.\u003C/p\u003E\u003C/cite\u003E",
      "publish_status": 0,
      "post_type": "Article",
      "featured_image_updating": false,
      "meta_description": "Building Web Forms with the DailyStory Web Form designer is simple. In the designer, a completed form may look something like this - with multiple text boxes, a reCAPTCHA and a submit button: Adding items to the designer is as simple as dragging from the left options pane and dropping onto the design surface. Drag-and-drop Form Items Drag-and-drop form items onto the design surface: Once added to the design surface, form elements can be selected and re-arranged by dragging them up or down. T ...",
      "display_toc": true,
      "has_workingcopy": false,
      "allow_indexing": true,
      "sort_order": 6,
      "total_views": 843,
      "date_published": "2025-01-10T17:34:32",
      "date_updated": "2025-05-16T19:15:10.53",
      "date_created": "2025-04-24T15:02:21.083"
    }
  }
}