A DailyStory Web Form enables you to quickly and easily create forms that can be shown on your website, in your mobile application, a DailyStory landing page, or elsewhere using the DailyStory API.
Creating new web forms and editing existing webforms can be found by:
This opens the All Web Forms list which shows a list:
Clicking on a web form will open the Edit Web Form designer. To create a new web form, click the '+ New Web Form' button.
Below are some common questions regarding DailyStory's Web Forms.
Once you've created a web form in DailyStory you have several options for publishing it. The recommended method is to either use the native integration with popular CMS applications, such as WordPress, or one of the SDKs (PHP and .NET). These are designed to display the DailyStory web form within your site directly.
When a visitor successfully completes a form the contents of the form are sent to DailyStory. The visitor is redirected to another page, typically a thank you page, that is identified as the 'Destination URL' in when designing your web form.
A best practice is to ensure your web form has a thank you page - this is the Destination URL when designing your web form - and that the web form sends an email to confirm receipt. Sending a thank you should also be used to validate the deliverability of the email address that the visitor provided. If the email address is invalid, you can remove them from the campaign. All of this can be configured in the Campaign Workflow.
When the + New Web Form
button is clicked the Create New Web Form designer is opened.
The first step is to select a campaign that the web form is associated with:
This ensures that all leads or customers that complete this web form are associated with the right campaign.
By associating the web form with a campaign, the campaign will be given the attribution for the lead or customer conversion.
Once the campaign is selected the Web Form Designer is available:
The Web Form Designer enables you to create or edit an existing web form. Each web form requires:
The web form itself can have multiple form items, but the email address field is required and cannot be removed.
If you attempt to remove the Email address form item an message will be shown that this form item is required and cannot be removed.
The Web Form Designer provides a simple preview of what your final web form will look like.
This does not take into consideration any CSS applies to your web form.
Form items can be added, edited, removed and reordered using the designer.
To add a web form item, click the drop down to select the type of form item to add. For example, to add a new textbox field click the Form item drop down and select textbox:
Next, a new form is shown
When Textbox or Textarea is selected the following options are availabe:
Let's look an example: adding a new required form field for phone number:
Next, we'll click 'Add form item' and this new field will be shown in the live preview:
DailyStory forms also support drop down lists so you can pre-define the values to be selected:
Unlike the textbox and textarea form items, there is not an option to set a form placeholder.
Drop down choices are set by entering a single option on each line. For example, if you want to ask the user to select their job title from a pre-defined list you can enter a single choice on each line. If you want to use a specific value different from the text use a comma (with no spaces):
Editing a web form item is simple. Just click on the fom item to edit. It will turn yellow and the form item are displayed to the right.
Click Update form item to save any changes and you will see this immediately reflected in the Live Preview.
Deleting a web form item is similar to editing. The only difference is that you click the Remove form item button.
The Form Options section enable you to change some optional settings for the web form.
The Call to Action enables you to change the text shown on the call to action button for the web form. By default this is set to Submit
.
If you would like the call to action to be something else, such as Yes, please follow-up
, simply enter that text here.
The Form Layout option provides you with the ability to control some layout control of the web form. While the main styling of the web form is done with CSS, you can select:
While displaying or not displaying form labels can also be controlled through CSS, this setting determines if DailyStory renders the HTML itself.
If reCAPTCHA integration is an enabled integration you can add reCAPTCHA support to your web 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.
The screen shot below shows an example form that includes reCAPTCHA:
Once a web form is saved, or when it is edited, some additional properties about the webform are availabe. The Unique Id provides access to an id that uniquely identifies the form. This is used in the DailyStory APIs and for integrations such as WordPress.
A web form created in DailyStory can be published four ways:
The table below will help you select the right option for your DailyStory Web Form.
Application Integration | DailyStory Page | DailyStory SDK | Custom Form | |
---|---|---|---|---|
Complexity | Low | Medium | High | High |
Skill Set | Content Developer | Content Developer | Web Developer | Web Developer |
Customization | Limited (CSS) | Limited (CSS) | CSS & JavaScript | Full |
If you have an exist web form that uses custom HTML or a Marketing Automation Platform, consider using DailyStory Magic Forms.
You can also create your own custom HTML form and POST directly to the DailyStory Web Form URL. This gives you the greatest flexibility with regards to design and layout of your form.
If you have existing forms on your website, you can easily convert your existing forms to publish to DailyStory.
To create a custom form:
The <form> needs to be configured to POST the values to your DailyStory Web Form URL. The format of this URL is:
https://cms-1.dailystory.com/PostForm/[Site Id]/[Web Form Id]
For example, if your DailyStory Site Id is 1234567890
and your Web Form Id is a2vmy
your <form> would look as follows:
<form method="POST" action="https://cms-1.dailystory.com/PostForm/1234567890/a2vmy" >
DailyStory expects to find two form fields:
dsid
Email
The DailyStory Id is a unique identifier used to identify customers and visitors. This hidden field is required and set to the value of the _ds
cookie which is created as part of the DailyStory JavaScript tag.
<input type="hidden" name="dsid" value="dsid" >
A valid email address must be included with the <form>
submit and must use the name
value of Email
:
<input type="text" name="Email" >
The <input type="hidden" name="dsid" value="dsid" >
needs to be set to the DailyStory Id of the current visitor.
The dsid needs to be set after the page completes loading. If the form is the first page a visitor lands on the DailyStory Id will not be written until after the page completes loading.
You can write your own JavaScript to set the value of the hidden <input>
to the value in the _ds
cookie, but the recommended way is to include jQuery and our helper library:
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script type="text/javascript" src="https//cms-1.dailystory.com/Scripts/ds-landingpages.js"></script>
The final required step is set the form field names to match the field values supported by DailyStory.
For example, to capture the company name on a form, a form field's name must be set to Company
.
<input type="text" name="Company">
A full list of the DailyStory form fields is published below.
You can include additional custom form fields as well. The values of these fields will be available as part of the DailyStory contact.
The table below provides a list of the field name values used in a custom form that populate corresponding values in the lead and contact.
Field Name | Maps To | Description |
---|---|---|
Salutation | Contact | Saluation for the contact, e.g. Mr., Mrs., Dr., Ms. |
FirstName | Contact | First name of the contact. |
LastName | Contact | Last name of the contact. |
FullName | Contact | Full name of the contact. When set, full name will then populate first and last name. |
Contact | Email address of the contact. | |
Title | Contact | Job title of the contact, e.g. Marketing Manager |
Company | Contact | Job title of the contact, e.g. Marketing Manager |
NumberOfEmployees | Contact | Number of employees in the organization, e.g. 100 |
WebSite | Contact | Url to the company's website |
Phone | Contact | Primary phone number |
MobilePhone | Contact | Mobile phone number |
Country | Contact | Country, e.g. United States |
City | Contact | City, e.g. New York |
PostalCode | Contact | Postal or zip code |
Address | Contact | Address, e.g. 123 My Street |
Region | Contact | Region or state, e.g. California |
LeadSource | Lead | Source where the lead originated, e.g. Contact Us Form |
Description | Lead | Free form text, such as reason for contacting us |