The Form feature allows you to create forms for your site! This is a great way to have users sign up for events, submit prayer requests, or contact you with any information that you request. If you have already created your form, this article will help walk you through how to add a form page or section to your site.

Creating a Form on Your Site

Step 1- From your Clover Dashboard, first make sure you have selected “Your Products” from the menu. If your product isn’t already closed, this will close it for you. Once your product is closed, click on the Forms icon. You will need to contact your Account Owner so they can give you Forms permissions, if you don’t see Forms available to you. 

Step 2a- IF you’ve never created a form before, than you will be given a starting point to choose from one of our basic forms we provide. If it is greyed out, than that template is not yet available. Select which form you would like to begin with, than name it in the provided area.

Once a name is provided the “Start Building Form” button will turn blue, allowing you to select it to continue.

Step 2b- IF a form has been created for the site before, than you will be taken to the Form Manager. Here, you will find a list of the forms that have been previously created for your site. To start a new form, select the blue Create New Form button located in the top right. This will take you to the options you see in Step 2a. 

Step 3- IF starting from scratch, you will start off by seeing the title of your form and “New Form Description”. The description can be altered by selecting the settings wheel to the right of your form title. This will take you to the Form Properties, which can also be located at the bottom left of the form.

From Form Properties, you can adjust the Form Description. This area is often used for laying out the importance of the form, providing any disclaimers, or leaving important instructions. It can also be left blank. Once you’ve added/ removed what you need from the Description, select ok.

For step-by-step explanations of each item within the Form Properties, this article will walk you through it.

Step 4- To add the fields you need for collecting information from your visitor, you can begin by clicking on the items from the right column to add them to your form. In this example, we will create a Contact Us form. You will click on the items located under Contact Info Fields located in the bottom right. *Note: Each Field automatically gets added to the bottom of the form. Fields can be moved around, however cannot be added wherever you initially want it. 

Step 5- FIELD PROPERTIES: As you click on each item, the Field’s Properties will automatically open. This will break down into 3 tabs. 1. General Info  2. Validation 3. Conditions. 

Under General Info, you will enter the name of the field (mandatory for setting up email notifications later). The name is also the title of the data you are trying to collect. You will also notice an area for “Help Text”. Use this for further instruction of the information you are needing, only if you need to.  

If you have to collect this information, go to Validation and select required. The visitor won’t be allowed to submit the form until all required fields have been filled out. NOTE: if this field is left as optional, with it not selected as required, it will display “optional” next to the field name for the visitor.

Conditions are helpful if you want this field to appear based on a previously answered question. You can learn more about Conditions here. Once you are done setting up the Field Properties, select ok to return to your form as a whole.

NOTE: You may see some Field Properties that have a Placeholder section. Whatever you type in this box, will appear within the box on the form as an example to your user.

VS. Leaving Placeholder Empty

Step 6- Continue adding all the fields you need in order to collect the information you need to gather from your visitor. Below is an idea of how your form should begin to look after adding more fields. 

Step 7a- To preview your form, you can click Preview Form at the bottom of your form. This will allow you to see what your users will see on your form. If you like what you see, click Save in the bottom right corner. If not, you can click Go Back in the bottom left corner, to continue editing your form.

Step 7b- If you don’t need to preview, you can simply select the Save Changes button in blue, in the bottom right corner. From there, you will be given the option to Save Only or Publish. 

NOTE: Save Only means that it’s not yet ready to be used on your site and that you wish to continue to edit later. This is a great option if you don’t have time to complete working on the form and want to come back to it another day. It will appear as a draft in your form manager. Go ahead and Publish if you are ready to move onto getting your form on to your page.

Step 8- Set-up your email notifications!

Keep in mind:

Field Options-

1. You can rearrange your fields on your form. Simply click
   and hold as you drag your field to where you want it on the form. 
2. You can duplicate a field. Simply select
   
3. You can get back to the Field Properties by selecting
   
4. You can delete a field by selecting
   

The form builder provides a variety of options and is very straight forward.  As you build forms in the Form Manager, the finished product will initially look different on your website and be set to the default look. This is because your form will fit the style of your website, while the Form Manager shows the fields and structure of the form as you build it. 

With that in mind, we recommend previewing the form on your site before publishing it so you know what it will look like to your website visitors before you apply your changes. There is an option to change the view of the form on your page under the form section settings.

 

Payment Fields 

Base Amount: This will allow the admin to set up a payment field that ties 1 fund to 1 amount that is set on the backend by the admin. This is best used for Events. For example, a Women’s Brunch costs $10 to attend. You would use the Base Amount as $10, and under the Field Properties, and assign the fund to your Women’s Brunch fund. 

User Amount: Similar to the Base Amount, only this will allow the donor to give a desired amount to 1 fund that the admin chooses on the backend. Best used for donation pages that only tie to a specific fund/campaign. 

Item Checkboxes: This will allow the admin to set up a number of boxes for the donor to choose from. You can set how many boxes are displayed, and the name for each item under the Field Properties Line Items tab. *The fund tied to this field will be under the Form Properties Payment Total Amount Fund. 

Item Radio Buttons: This field operates just like the Item Checkbox field listed above, only the boxes are now radio buttons. *The fund tied to this field will be under the Form Properties Payment Total Amount Fund. 

Item Dropdown: This too will operate similar to the previous field, only the options are hidden under a Dropdown menu until the person filling out the form chooses the item they wish to submit payment for. For example, this could be used to sell a certain t-shirt for a youth trip. You could use the dropdown to designate the sizes of the shirt for each person purchasing one. *The fund tied to this field will be under the Form Properties Payment Total Amount Fund. 

Fund Dropdown: This will allow the donor to choose from a list of active Funds within your system chosen to be displayed to give a desired amount to. The donor will select the fund, then give their amount. If you are using Sub Funds, the donor must first choose the Parent Fund, then a second dropdown will appear beside the initial dropdown where they can then choose the Sub Fund they wish to give to. This is best used for a general donation page where donors can to more than one fund. For example you could list Missions, Building, and General funds all on the same dropdown to be given to.  

*When selecting funds to display, they must be Active (you can refer to Fund Management on you giving dashboard under the “gear icon” in the top right) Once they are active, you must go to the Field Properties for your Fund Dropdown Fund Items Display. This will allow your funds to appear. 

Amount Buttons: This is a versatile field that will allow the admin to set in desired amounts for suggested donations as well as the option to have an “Other” box so that the donor may put in their own amount, or if you need to use this for an event or ordering system, you can name each item box and keep it as you set the amounts the person paying can choose. For example, if you have an event with different package options, each button could be a different package that requires a different amount. You will name each button from the “Line Items” tab under the Field Properties. *The fund tied to this field will be under the Form Properties Payment Total Amount Fund. 

Calculate Amount: This allows the admin to set up an amount per item that the donor may be selecting multiples of. This is best used for registering for an event or fundraiser where you would need possibly several of one thing. For example, if you were registering 3 kids for a VBS day that costs $10, the Calculated Amount field would automatically put the total to $30 for them, instead of them having to fill out the form 3 separate times. You must designate a fund for this field under the Field Properties. 

*NOTE: All forms MUST have a fund tied to it under Form Properties Payment Total Amount Fund. Otherwise the form will not list as published and will not appear. (If you are using the Fund Dropdown or another field that requires you to designate a fund, the fund chosen within the Field will overwrite the Total Amount Fund chosen, allowing the donor to give to a fund that they choose) 

**To find Field Properties click the “gear icon” to the right of the field you are trying to edit. The very top right “gear icon” will take you to the Form Properties, not the Field Properties. 

Congratulations! You have successfully created your form! Now you can add your form to a page!