Click on the Forms section, and the select the Forms option.
Press the Create New button on the top right.
Select the Template you would like to use for this form.
Then input a name in the Form Name field. Press the Create Form button.
This will launch our Form Creator Interface. On the left you will see the Sections header. Here is where you can create a new section for your form. It is a simple drag and drop functionality.
The next section is called Form Controls. In this form builder we have renamed Fields to Controls. This is where you would add various types of controls to build your form (ie. drop downs, text boxes, etc).
The next section is called Prebuilt Sections. In this section you can quickly create a whole section based on our prebuilt templates. Those sections include Donation Amount/Recurring Amount, Contact Information, Payment Information, and Other Donation Amount.
Under the Attributes tab at the top, you can find a number of different options. Here you can configure your form’s backend settings.
It’s a best practice at this point to set the allocation information for the form. You would access this through the Attributes tab.
From this interface, you can select your allocation and split the gift into multiple allocations.
You can then use the Form Controls section and, with a drag and drop functionality, add various controls to your form. When you initiate the drag aspect, a highlighted area will appear on the form to show where to drop the control.
After you drop the control, click on it and the Properties List will appear on the right side of the screen. The Properties List allows you to customize your newly added control.
If you add a Drop Down control, you will see the Data List option at the top of the properties section, which allows you to select a pre-built list for your drop down options. When you assign the Data List, it will automatically assign those values to that control.
After selecting the Data List selection, you can edit the list, or change to another Data List.
When editing the Data List, there are three main sections: Value, Label, and Relationship Key.
Value = the value we would input on the backend. Ie. A Label could be called Operating Fund, and the value would be the Fund ID, F0001.
Label = The name of the value showing to your constituents on the form
Relationship Key – Allows you to create a Parent-Child relationship between controls. Ie. If you select ‘Canada’ from the Country list, it will automatically show a new list with its provinces.
Once you save the Data List, it will add the Labels to the control.
The next step is to assign the mapping for this control. We would use the mapping field for this functionality. To search for the object to connect to this control use the look up button.
You would then select the Object where that field is located.
Once you select the Object, you can then select the field you want the value of that control sent to.
Once you save the mapping information, the field’s API name will show in the look up field.
Using Label Text, you can change the name of that control.
The next option is to change the order of the controls in a section on the form. To change the order of the controls you would press the Reorder button at the top of each section. In this case, it will allow you to reorder the controls on the Amount section.
After pressing Reorder, you can use the drag and drop functionality to change the order of the controls for that section. Once you are done customizing, you can press the Apply Order button.
You then have the option to change the order of the sections. You can reorder the sections by using the arrow buttons on the top left corner of each section.
Once you press the down arrow, it will move that section down on the form.
You can then preview your form using the Form Preview button.
The Form Preview option will then allow you to view your form in its published state, and add values to fields to simulate an actual transaction. You can use the Toggle View button to switch between desktop and Mobile views.
This is the Mobile view. You can press Continue Editing to return to editing your form.
By pressing the Settings tab, you can find the Embed Code.
This is the code you would use to embed this form onto your website. You can copy this snippet of code and embed it onto the html section of your site.
In the settings tab, you can also use the Publish Form option. You would use the Publish Form option if you have previously embedded this form and have now made some changes to it.
You can press Publish Form to send updates to your live form.