Documentation

Formidable is from the creators of Extended Form. Formidable has the best of Extended form an added some more great features!

What can it do?

That's easy! You can create forms and the mails that are submitted. So no more hardcoded templates, only easy WYSIWYG mail creation.
All submissions will be logged and saved in C5 Dashboard.

Features

• Available default elements:
  • Single text
  • Textarea
  • Radiobutton
  • Checkbox
  • Selectbox (single, multi)
  • Hidden


• Available advanced elements:
  
• Email Address
• Website (URL)
• Integer
• Range (HTML5)
• Slider (jQuery UI)
• Password (with strength indicator)
• Phonenumber
• Date (datepicker, input, select)
• Time (timepicker, input, select)
• WYSIWYG (TinyMCE)
• Rating (stars)
• Recipient Selector (single, multi)
• File Upload (multiple, ajax)


• Available Static text and HTML:
  • Heading (h1 - h6)
  • Paragraph (p, div, etc...)
  • HTML (TinyMCE)


• Available Layout elements:
  • Horizontal rule
  • Fieldset (with legend)
  • Break (spacing)
  • Code (HTML)


• More features for the elements
  • "Other" option
    Selectionboxes, checkboxes and radiobuttons can be expanded with "other" option, which opens a textfield or textarea.
  • Minimum and maximum values
    Fields can handle minimum and maximum values, characters or selections.Count words, characters or selections.
  • Confirmation
    Email Addresses, Passwords, URL can ask for comfirmation. So another field is added just to confirm the first input.
  • Placeholder
  • Default value(s)
  • Mask your element
    You can add masks to some fields, so the input is forced to be the same on every submission. Some fields like phonenumber have pre-defined masks.
  • Format elements
    Determine the format of the values (datepicker, timepicker)
    
  • Change appearance of field
    In some cases you can deside the appearance of the field
  • Tooltip
  • Captures sender details (Page, IP, user, time)
  • Custom classes to form and elements
  • Easy sorting form elements (drag/drop)
  • Duplicate elements
    


• Create custom e-mails
  • Page selector and filemanager for creating mails
    When creating a mail you can use the best of C5 features!
    
  • Easy intergration of elements and submitted values into mails
  • Set sender (custom or submitted value)
  • Set reply to when custom sender is selected
  • Set recipient (custom or submitted value)
  • Add attachments
  • Duplicate mails
    


• Buttons and Captcha
  Buttons can be managed in the form properties. You can lable the submit-button and add and label the clear-button
  There is also a new captcha module. This captcha module asks the submitter to solve a simple equation. You can enable the use of captcha in the form properties.


• HTML5 form elements
  Formidable can use HTML5 form elements. This for better use on mobile devices or new browsers. You can enable the use of HTML5 in the form properties.


• Review
  You can prompt the submitter to do a review of his or her submission. So before any data will be send or submitted the submitter needs to check the soon to be submitted values.


• Submission
  • Ajax validation of the form and ajax submit
  • After submission you can redirect the submitter to a page or show a message to the submitter. Both options are available!


• Templates
  Formidable allows you to use different templates for the form. Besides the default template there is a clean version. And also a Twitter Bootstrap template (form-horizontal).


• Capture browser / screen information
  Capture some more details from the submitter. Browser, Platform and Screenresolution.


• Duplicating forms
  Duplicate already created forms with one click!


• Limitations
  You can block the form after a number of submissions on global, IP or user level.


• Events
  On validation and submitting Formidable fires an event!

Help

Formidable in your Dashboard
Go to Concrete 5 Full Dashboard. Check the Formidable section in the Dashboard. Click on "Forms" within the Formidable section of the Dashboard to see the created forms. Click on "Results" to show the results from any of the forms created with Formidable. Note that we also created a page in the "Reports" section of the Dashboard. This also will lead to the "Results"-page of Formidable.

Create a form
Click on the green "Create a new FormidableForm"-button.
The new FormidableForm shows you the properties of this form. When adding a new FormidableForm, some fields are filled by default. Just walk through the form and select or fill where needed.
If you'r done, check your input and click on "Save" on the bottom of the page. Your form is created! If all values are correct you are redirected to the "Elements" of your new FormidableForm. Note that the gray buttons on the top left of the page are now enabled. You can easily jump from form properties to the form elements.

Duplicating forms
Duplicates forms with all the elements and mailings.

Add or edit elements
On the left of this page you see the list of available elements within Formidable. You can select any of the elements, but for this example we'll use the default "Text Field". So click on "Text Field" in the left colums. A new popup appears! In the popup you can change the settings of the element you want to insert or edit. First field shows the type of the element you are editing. "Label / Name" is the elements label, this label is shown in the forntend of your form. "Placeholder" and "Default value" allows you to add a placeholder or a default value to the element. The option "Minimum / Maximum" allows you to set a minimal and maximum value to the field. For instance if you need the field to have al least 4 characters an maximum 6 characters. You can also set the type of validation. In this case you can choose characters or words. For integer you can choose value, and so on... In case of a selectbox you have to check if multiple values are allowed. You can also add a mask to the textfield element. A mask is a kind of overlay which force the submitter to add data in a certain format (phone, date, number, etc...). Some fields have the option to select the "Appearance" of the element. The selected valuecan change the format, type or view of the element. In case of the textfield you can't select an appearance. Every form element has the option to show a "Tooltip". You can add the content of the tooltip in the textarea next to the checkbox. In the frontend the tooltip will be shown while hovering the form element. Also not available for the textfield is the "Confirmation" option. When this is enabled, Formidable adds another form element of the same type. Both inserted values are matched to each other. If they are the same the input is valid. This is usefull for checking Email Addresses or Passwords. "Required" forces the element to be valid and not empty. A value is needed! Note that input from submitter is check even if the value isn't required! For example: Email Address field is not required and the submitter adds a non-valid EmailAddress. Formidable will throw a error, "Invalid Email Address". If the submitter leaves the field empty, no error will be thrown. Last but not least you can add a "CSS Class" to the element. This adds a class to the field and makes styling very easy! So...every thing filled out? Click on "Save" to add the element to your form.

Deleting elements
If you have no need for a certain element you can delete the element. Note that all corresponding submitted data will also be deleted.

Duplicating elements
Just do it! See what happens...

Sorting elements
In the "Elements" page of the form you see a list of elements assigned to the selected form. The double arrow in front of the elements allows you to drag-and-drop the elements within the elements list. The order you just changes is saved immediately to the form and is visable in the frontend!

Mail after submission
With Formidable you can create different mailings for each Formidable Form. On every submission all the mailings that are created for thsi form will be submitted. It's not required to have a mailing.

Add or edit mailings
Go to the mailing page of the form you wish to edit. Click on the green "Create a new mail"-button.
The new FormidableForm shows you the properties of the mail you are about to create. First we need to provide a sender. The sender of the mail can be a custom sender (use the selectbox and select "Send from custom sender"). Insert "Name" and "Email Address" in the inputfields. If you have an "Email Address"- or a "Recipient Selector"-field in your form you are able to select it here. So the sender of the mail could easily be a form submitter. Note that in case of multiple submitters (only with multiple Recipient Selector) the sender of the form is always the first selected. Now we need to set the recipients. There are multiple options here. If you have an "Email Address"- or a "Recipient Selector"-field in your form you are able to select them here (use CTRL-key to select multiple). In case you don't want to select any you can also send to a custom email address. After that the hard part is over. Add a "Subject" to your mailing and add a "Message". Formidable is able to send HTML-mailings, so use the WYSIWYG-block to add HTML. You can also use images from the Filemanager or add links to pages within you Concrete5 website. Also available in the WYSIWYG-block is the use of form-elements in you mailing. In the Editbar above the WYSIWYG-block you see four links ("Add Image", "Add File", "Insert Link to Page" and "Insert Formidable Element"). Click on "Insert Formidable Element" and a popup appears with the the form elements from you form. There are serveral options here. When adding the "All form elements" tag in the message, Formidable will generate a list of labels and values in the mail. You also can add individually labels and values of form elements. The button "Both" will insert a string with label and value split by a colon (:). After setting up your message you can add multiple attachments to the mail. There will be send to the recipients along with the mail. Note that the attachments are loaded from the filemanager.

Deleting mailings
Just click on the "Delete"-button to delete the mail. You'll be asked to confirm.

Duplicating mailings
Just do it! See what happens...

Results
Formidable adds a page in the "Reports"-section of the Concrete5 Dashboard. It also has it's own result page in the "Formidable"-section. Both pages are the same. You can customize the results and offcourse export the results to an Excel-file (xls)

Calculation Captcha
Along with Formidable there is a new captcha solution. It's very easy, the submitter has to solve a simple equation. The calculation captcha can be set in the Dashboard. Go to "System & Settings", click on "Captcha Setup" in the "Permissions & Access" section. Here you can change the Captcha to the "Calculation Captcha". Note that this changes the captcha for the whole website.

Adding a form to a page
When you are done building your form, you can add this to a page or stack. Just go to the page you want to have your form in. Click on "Add to YourAreaName" in the page and select "Formidable Form" in the blocks list. Select the form you want to show on the page.

Translations

If some cases you want to translate the values for some fields. For example the address-field. In USA it's called Province/State, but in the UK it's called Counties. The best solution for this is to use the default language handler of Concrete5. To do this you have to create a languagefile for the specific language you are using. If the languagefile is created you can upload this in the folder /languages/. Then go to the System and Settings page in the Dashboard and change the default language of your C5 website to the language you just added. This way the form field will be translated. To help you on your way we created a number of different versions for Formidable. You can download it at: http://www.concrete5-addons.nl/addons/formidable/languages/

For the date element you could use a language-file but you don't need to. When you are using the datepicker you can check the "advanced"-checkbox. This way you can easily add your own values to the datepicker.
For example:

[code] dayNamesMin:[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ], dayNamesShort:[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ], dayNames:[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], monthNames:[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ] monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] [/code]

ToDo

Here is a list of things we want to do or just some ideas, but haven't been done yet... (in random order)

• Dependencies
  A nice feature to create is dependencies. If a certain answer is given some other question should be asked. For example: "Do you have a pet": "yes" or "no". If the submitter chooses "yes", a new question should popup: "What kind of pet": "dog", "cat", "horse"....

• Assign formfields to user attributes
  Create a form that also can be a profile editor.

• Advanced filters in results
  More features for filtering results

• Paging / Steps
  Create a form divided in steps (pages)

• Schedule
  Schedule submissions on the form. When is the form available for submissions. Could be usefull for advertising or signing up for some event...

• Predefined Forms
  Create a predefinded form (contact, signup, etc...)

• Charts & Reports
  Building somesort of charts or reports. I have no vision about this, but I think it could be usefull. So the addon can also be used as a survey tool.

• Code enhancement
  There is some code that should be enhanced. It shouldn't conflict with the addons behaviour.