Chronoforms starter guide

A starting tutorial is also available in Italian here: chronoforms v5 guida in italiano 01

Chronoforms v5 has 2 setup modes, the normal (advanced) with full capabilities and options, and the simple setup for starters, you can create a new form in either mode, by clicking the "New" or "New simple" buttons, if you are a new Chronoforms user then we suggest that you start using the "New Simple" mode. You can switch your form setup mode later after you get used to the Chronoforms interface.

The "Create table" button helps you create a database table for your form, this step is needed if you are planning to use the "DB Save" action to save the form data.

Note that if you click this more than once you will install more than one copy of the demo forms, you can delete or unpublish any unwanted copies.

1. Click the form name to open and edit.
2. Click the "View form" link to view/run your form.
3. Click the green mark to toggle the published status of your form, if the form is unpublished then it will not be accessible on the front-end.

1. This is the basic list of elements, you will find here the most used form fields, you can drag any of them to right blue area.
2. This is the advanced list of elements, you can click the word "Advanced" to expand this section.
3. This is the designer body where you can manage the form fields.

1. The field name is written in the dark blue box at the top of the field, make sure its unique and has no spaces, and if possible, change it to something meaningful, instead of using "text1" for the "first name" field, just change it to "first_name", this will be very helpful later.
2. For multiple selections fields, like check-box groups, the field name should end with 2 square brackets [], this is a common mistake, if you remove the 2 brackets then the field will not post multiple values when the form is sent.
3. You can click the Edit icon to open the field details and do any desired changes.
4. You can drag the fields to sort them by using the drag icon.

1. The field name should not be left empty and must contain a unique string with NO SPACES.
2. The field id can be left unchanged, it can be used in some advanced customization like CSS styling or JavaScript references.
3. The label is where you should write the field title, this is what the users are going to see beside your field.
4. The sub label is another label which is displayed in a small text under the field, this is useful for providing some hints about the field.

1. The value which when selected would trigger the event.
2. The action taken when the event is triggered, this may be to show or hide another field..etc, there are multiple actions available.
3. The target field id affected by this event entry.

1. This is the on load event, this event is triggered when the form is displayed, you can also call an event a "page", since the load event is the form page displayed when the form is loaded, please note that each event/page has a different url matching the form url but ends with &event=EVENT_NAME, however the "load" event is loaded by default if the "event" parameter is not provided.
2. This is the submit event, which is triggered/processed when the form is submitted, this is the default behavior, but you can change the target submit event by playing with the HTML action settings, but this is not advised unless you have a multi page form or know what you are doing.
3. The add new event button should help you add new events (pages) to your form, the new events can be accessed by using the same form url + "&event=THE_EVENT_NAME"
4. The actions are the functional blocks in your form, without actions your form would be doing nothing, they are categorized based on their main functions, at the time of writing this tutorial, v5 has about 50 actions, and v4 has around 75

1. The HTML action is the most used action, its function is to output the form code on the page, whether this code has been created using the designer or using a custom code, it will just render it, and so its usually placed under the "on load" event in order to display the form when its loaded.
2. The Email action is 2nd most used action, most users want to receive emails from their forms, and this is what it does exactly, however, in order to receive any emails, you must configure the action first.

1. The "Enabled" option, the action must be enabled in order for it to run.
2. The "To" field should contain at least 1 email address, you can add more than 1 and separate them by a comma.
3. The "Subject" field should simply contain the message's subject.
4. The "From name" is the from name string used in the email, you must provide a valid string here.
5. The "From email" can't be left empty, and in most cases you should set this as some address @ your domain, otherwise the email may get blocked or marked as spam.

The dynamic fields allow you to use the form data as your email settings, for example, the "Dynamic to" field would accept a form field name which may hold an email address, and this address would then be used as the target address.

1. Some actions are more advanced and have their own sub events, for example, take the "Files upload" action, the "success" event is triggered when the file is uploaded successfully, but the "fail" event is triggered when the any problem occurs with the upload.
   
   please note that sub events will not affect the main execution workflow, this means that, whether the file is uploaded successfully or not, the "submit" event workflow will continue to run to the end, unless we tell it to do something else.
    
2. So, since we want to tell the user that there is some problem with the uploaded file, we should add an "Event loop" in the "on fail" sub event, what this action does (the Event Loop) is that it halts the execution and then triggers the "Load" event, this means that no actions after the "Files upload" are processed AND the form will be re-displayed.
3. The "Debugger" action is very vital for finding problems with your form, most actions log some debugging messages which can then be displayed using the debugger action (and hence its the last action to display all the previous actions' log).

1. The "Anti spam" actions section is frequently used by Chronoforms users, Chronoforms has many anti spam tools, including the default Captcha, ReCaptcha, Security question and the Honeypot check.
   
   The easiest one to setup is the Honeypot, all you need to do is to add the action which "loads" the honeypot, and another action to "check" the honeypot.
2. The load action is logically placed when the form loads, and it must be BEFORE the form is displayed (above the html action) in order to do its magic before the form output is done.
3. The check action should be placed after the form is submitted (at the submit event) and it should be the first thing to run in the "submit" event, in order to block any spam attempts before any further actions are taken.

1. Click the "Add new locale" button to create a new language dictionary for your form.
2. Enter the language tag, which should be in the same format provided, e.g: for English en_gb and for German de_de...etc, the language code should match the one in your languages manager.
3. Under the Language Strings box, just enter the form string to translate along with the translation string, so if one for your fields labels was set to MY_LABEL then you can use this: MY_LABEL=My label