You are on page 1of 5

How to create your first form in Chronoforms V4 using the form Wizard

1. Start by going to the Form Wizard option. 2. Drag any form element you need to add to your from from the Elements tab in the left side to the Preview tab on the right side.

Chronoforms Tutorial

3. You can change your field's settings by clicking the config/tools icon inside the dragged field container. (shown below)

4. When you make any changes to any field's settings you should click the Apply button, the button text will change to Saved when you do so. 5. Don't forget to add a Submit button to your form if you need one, the form will not add one automatically.

Chronoforms Tutorial

6. After finishing adding fields, you may move to the Form Settings tab in the right side to enter the Form name and configure the Published setting according to your needs.

7. You may now click the Apply icons at the top right side to save your form.

8. Till now, all you have done is creating your form HTML code and saving it, this is not enough to see your form working on the frontend.

Chronoforms Tutorial

9. It's very necessary to switch to the Actions tab at the left side and drag the Show HTML action to the right side under the Events tab's OnLoad event, this will ensure that when the form is Loaded the HTML code which has been created earlier will be shown.

10. Your form is Event driven, its basically constructed of 2 events, Load and Submit, Actions are listed on the left side, and you can choose from them which should run on which event on the right side. 11. Some actions may add their own Events, like Check Captcha action which has 2 events, Success and Fail, more actions can be added to those.

Chronoforms Tutorial

12. You may now click the Save icon at the top right corner to save your form, you are now in the Forms manager, you may click the Frontend view in front of your form to see how your form

looks like.

13. If you have added a submit button as noted above, then by clicking it, you will call the Submit event of your form, you should see here a blank body page, since we didn't drag any actions to the OnSubmit event in the wizard. 14. Go back to the Forms manager and click the Wizard Edit link beside your form name to edit your form again and add any necessary actions to the OnSubmit event. I wish that was helpful :)

Chronoforms Tutorial