Design a Web Form

Rob Howard Updated by Rob Howard

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.

Re-arrange Form Item Order

Form elements can be selected and dragged to re-order then:

Form Items

There are 3 types of form items that can be added to the Web Form designer (with more planned):

  • Inputs - text boxes, drop downs and text areas.
  • Content - HTML text and labels.
  • Misc - reCAPTCHA

Input Form Items

Inputs represent text boxes, drop downs and other form elements where the person completing the form is entering information.

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:

Use Placeholder text to set text in the text input. This enables people completing the form with additional detail on what information they need to enter.

Use Label to optionally set a label for the form.

Map to lead field (required) tells DailyStory how to handle this data when it is submitted. In the screenshot above the input text will populate a lead's Full name field.

Required checkbox indicates if the person completing this form is required to enter data for this field.

As you set options on the form items, those options are reflected in the designer:

The Dropdown form item has some additional options. Specifically, the ability to populate a list of options for the dropdown:

To add a name (displayed) and value (what is saved) click Add Name/Value. This will open a new window where you can add a name and a value.

If you've added several name/values you can rearrange the order by clicking and dragging.
Submit button

Every form must contain a submit button. The submit button text can be set, along with a number of other options as shown below:

Content Form Items

Content form items enable you to easily add labels or HTML text onto your form.

While labels are supported as content form items, it is better to use the label option on the form item itself.

The Html Content Form Item is useful for adding any custom HTML to your form.

Misc Form Items

The Misc Form Items provides a list of additional items that may be added to your form.

reCAPTHA

If reCAPTCHA integration is configured you can add the reCAPTCHA widget to your form.

Provided 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.

How did we do?

Create or Edit a Web Form

Styling your Web Form

Contact