How to: Create Managed Forms

Managed Forms are used to quickly create web forms such as Contact Us for example. The forms can be entirely created using the administration interface without writing any HTML code. 

In this tutorial we will demonstrate how to create a Contact Us with three Single Line Inputs for the First Name, Last Name and the E-mail  and one Choice Field for the Receive updates drop down.

Screen_Shot_2013-01-10_at_1.13.36_PM.png

So let's get started. 

1. Click on the CMS tab.

Screen Shot 2013-01-10 at 11.45.16 AM.png

2. Type the word Managed in the search field and hit the “enter” key on your keyboard. This will search for the menu items containing the word Managed.

screen1.png

3. Click on the Managed Forms menu item.

4. After clicking on the Managed Forms a new page will open listing existing managed forms.

Screen_Shot_2013-01-10_at_1.55.42_PM.png

5. Click on the Add managed form button found on the upper right side of the page.

Screen_Shot_2013-01-10_at_1.52.55_PM.png

6. A new Change managed form page will open.

Screen_Shot_2013-01-10_at_1.54.41_PM.png

7. Provide a Title for your form.

Screen_Shot_2013-01-10_at_2.01.53_PM.png

8. Provide a slug for your form. Slugs are used to construct web addresses. In our tutorial we will use the slug contact-us. To open the page for the newly created form you will use an web address that looks like this: http://YourWebSiteAddress.com/forms/contact-us/

Screen_Shot_2013-01-10_at_2.02.02_PM.png

9.  Specify if the form is active by checking the Active check box.

Screen_Shot_2013-01-10_at_2.02.09_PM.png

10.  Drop Date specifies a particular date the form will become active on the web site.

Screen_Shot_2013-01-10_at_2.02.18_PM.png

11. End date specifies a particular date when the form will become inactive on the web site.

Screen_Shot_2013-01-10_at_2.02.24_PM.png

12. Success Page is the URL where users will be redirected upon from submission success. The Success page can be built using Web Cube Flat Pages.

Screen_Shot_2013-01-10_at_2.02.35_PM.png

13. Intro text is the text that will show on top of the from.

Screen_Shot_2013-01-10_at_2.02.42_PM.png

14. Template is where you can specify the path to a custom template for this from. By default the form is using a template located at formmanager/default.html.

Screen_Shot_2013-01-10_at_2.03.13_PM.png

15. Export template is where you can specify the path to CSV export template. By default the form entry exports are using a CSV template located at the formmanager/csv_template/csv.

Screen_Shot_2013-01-10_at_2.03.24_PM.png

16. To have a copy of every form submission mailed to an email address add an email address in the CC email field.

Screen_Shot_2013-01-10_at_2.03.34_PM.png

17. Web Cube allows the creation of multiple sites. For example there can be an US and an EU site. Certain items can show on the US site and others on the EU site. To select on what site the form will show on hold down the Control or Command on a Mac, and select one or more sites.

Screen_Shot_2013-01-10_at_2.03.47_PM.png

 

 

 

 

Now that we have all the general information for the form let's create a few form fiels.

How to: create a single line input managed form field

 

1. Specify a Title for your form field. This is the text what will show by the from field.

Screen_Shot_2013-01-10_at_2.04.35_PM.png

2. The Key is used to identify the field and also to build the HTML for the text field.  

<input id="id_first_name" type="text" class="fm_charfield" name="first_name" maxlength="200">

Screen_Shot_2013-01-10_at_2.04.43_PM.png

3. Type specifies what field type we would like to create like Choice Field, Checkbox, Multiline etc.. In our case we would like to create a text field so from the drop down we need to select Single Line Input.  

Screen_Shot_2013-01-10_at_2.04.54_PM.png

4. Check the Required checkbox if this field must contain a value before the from is submitted.

Screen_Shot_2013-01-10_at_2.05.01_PM.png

5. Value is where you can specify a default value for your field.

Screen_Shot_2013-01-10_at_2.05.08_PM.png

6. Order is used to set the order of the fields in the from. The lowest value will be first.

Screen_Shot_2013-01-10_at_2.05.36_PM.png

7. The Extra option can be used to set regular expressions and error messages. For text fields the first line may be a regex and the second line is the error message.

 

 

 

How to: create a choice managed form field

 

1. Specify a Title for your form field. This is the text what will show by the from field.

Screen_Shot_2013-01-10_at_2.06.43_PM.png

2. The Key is used to identify the field and also to build the HTML for the text field.  

Screen_Shot_2013-01-10_at_2.06.50_PM.png

<select id="id_receive_updates" class="fm_choicefield" name="receive_updates">

  <option value selected="selected"> - Select Receive updates -</option>

  <option value="Yes">Yes</option>

  <option value="No">No</option>

</select>

3. Type specifies what field type we would like to create like Choice FieldCheckboxMultiline etc.. In our case we would like to create a drop down choice field so from the drop down we need to select the Choice Field option.  

Screen_Shot_2013-01-10_at_2.07.15_PM.png

4. Check the Required checkbox if this field must contain a value before the from is submitted.

Screen_Shot_2013-01-10_at_2.05.01_PM.png

5. Value is where you can specify a default value for your field.

Screen_Shot_2013-01-10_at_2.05.08_PM.png

6. Order is used to set the order of the fields in the from. The lowest value will be first.

Screen_Shot_2013-01-10_at_3.01.34_PM.png

7. The Extra option for the Choice Field is one choice per line. For our example we would like to have two options, Yes and No.

Screen_Shot_2013-01-10_at_3.01.48_PM.png

 

 

Managed Form Web Hooks

Where can I see the managed form entries?

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk