How- To: Create a Web Form

1. Navigate to Client Pages

2. Create a New Form Builder Client Page

3. Configure your Form Builder Client Page

Give your form a Name
Set Target Option To None
Ensure Disable Liquid Templating is not checked
Make your Page Active
If this form is going to be give out make it public

4. Configure your Form Builder Client Page - Continued

Form Schema can be ignored
Template this is the Html template that your form will be rendered into. Here you can setup style's or add a head / footer to your forms page.

If you would like to change this template for all newly created form's this can be done under the developer tab in Settings.

5. Save and View your Form

6. Show the Form Designer

This is the link you can use to access your form
This is the html required to embded your form in your website

Make note of the link marked as (1) as we will use this later to test our form.

To continue click the Show Form Designer button (3)

7. Form Builder Designer

The form designer is broken down into 3 main sections

Designer surface - here you can see your designed form
Toolbox - You can drag elements out of the toolbox into the Designer Surface
Actions
1. Clear - Clear your form
2. View Form Schema
3. Save - Save your Form
4. Workflow Def - This is used in templates for building workflow to go with your form

8. Drag in a Header

9. Edit your header

10. Give your header a Label

In this example we are going to make our label "Ask a Question"

11. Drag in a Text Field

12. Edit your Text Field

13. Configure your Text Field

Give your text field a label. Here we have set it to First Name
Give your text field a name: This is what will be passed into our workflow. Names must be lowercase and not start with a number

14. Repeat for Last Name

15. Repeat For Comments

For the comments field we have used a Text Area to allow multi line input

16. Review your Form

Here we can see our form but it is still missing a submit button to allow us to send to values a user enters into CreataCRM.

17. Add A Run Workflow Button

18. Edit Your Run Workflow Button

19. Configure Your Run Workflow Button

Set the Label for your button. This is what will show as the text on your button
Enter the Name of the workflow you would like this forms values sent to. - We will walk through creating this next so just enter a unique name for the workflow and keep note of it for later.
Here you can enter what you would like the form to be replaced with on a sucessful submit
Alternatively you can enter a URL you would like the user to be navigated to on a successful submit. Please note if there is a value in this field the Success Message field is ignored.

20. Save Your Form

21. Open the Workflow Def

22. Copy the Workflow definiton value

23. Navigate to Client Page Workflow

24. Create a New Client page Workflow

25. Configure Your Client Page Workflow

Set the Name of your client Page Workflow to the same value entered in the Run Workflow Button on your form
Make your workflow active
Allow logged in Users - Set this if your users should have access to the form.
Allow Anonymous users - Set this if the form is going to be accessible to users not logged into CreataCRM.

26. Save and View

27. Click Show Workflow Designer

28. Insert Template

Click Inset Template

29. Insert Template Window

30. Insert Template Continued

In the template name drop down select FormBuilder - Create Contact

31. Insert Template Continued

Paste the config we got in the Form Builder

32. Template Inserted

Here we can see the template has been inserted into the designer surface.

Below is a brief explanation of what each line fo the workflow is doing.

Creating a New Contact
Setting an unspecified field of the created contact to the value in the "firstname" field form the submitted form
Setting an unspecified field of the created contact to the value in the "lastname" field form the submitted form
Setting an unspecified field of the created contact to the value in the "comments" field form the submitted form

33. Map Form Values to Fields on the Created Contact

Change the Set Dropdown on each line to the field you would like to populate with the value submitted the form.

34. Repeat For other Templates (Optional)

You can insert multiple templates into a single workflow just folow the steps above and link the inserted blocks in series.

Below we have added both the Create Activity and Send Email Templates.

35. Save Workflow

36. Confirm Save Sucessful

37. Test Our Form

Using the Link on our Form Buidler Client Page we can now navigate to our live form.