Contact Web Forms

Warning: Editing your Web Form before all submissions have been processed in Eleo will cause them to get stuck in the Pending folder. It will simply keep refreshing when you attempt to process them. To prevent this, we recommend this order of operations:

-Keep up to date with processing your pending transactions

-Make the appropriate edits to your form

-Use the new Web Form link that is generated by Eleo

-Take that live link to replace your old one. It will not automatically update.

These are the steps to create a Contact Web Form:

1. To use our Credit Card and Web Form modules, you must be either a paying subscriber or on an Eleo Opportunity Grant. Free Trials will not have access to these modules until they become monthly subscribers. You may use the Support Icon in your database to contact us by phone or email with questions.

2. Go to ‘Settings’.

3. Under Account Settings, click on ‘System Settings’.

4. Click on ‘Edit’.

5. Click the checkbox for ‘Web Form Module’. If you will be creating Event Registration Forms too, you will also need to check off the ‘Event Module’ and the ‘Event Web Form Module’. Then, press ‘Save’.

You will now notice a ‘Web Forms’ tab.

6. Click on ‘Web Forms’.

7. Click on ‘Add’. You can simply hover over the Web Forms tab and select ‘Add Web Form’ instead because it will take you to the same place too.

8. This will bring up the Web Forms Wizard. Choose Contact for the Type of Web Form.

9. Select the Page Type that you would like to use. Please see the descriptions below.

Page Type:

Standalone Page – a separate webpage link.
Standalone Button – a separate button for a web page
Embedded – incorporated into the existing webpage – NOTE: Due to the fact that we do not control your website, we cannot guarantee that the Embedded version will work properly, which is why there is a red caution message.

10. Choose the fields that you would like to include on the Web Form from the list. Name and Email are standard fields that will automatically be included. You may choose to show the Title field and Suffix too. Next, select any other fields that you would like to add and/or make required. When you are done, select ‘Continue’.

*NOTE: These are solely basic fields to get your form started. You will be able to add additional fields once the form is created.

11. Enter your Header and Footer. You can choose a file (image) to upload on the Header and Footer of the form, as well as add any text needed in those areas. When you are done, select ‘Continue’.

12. Select the confirmation options. The top section is for the Confirmation Page, which will display upon the completion of the Web Form. If you would like to, you may add an image, and any text. Select fields from the right-hand side to include that information on your Confirmation Page.

13. If you would like your constituents to receive a Confirmation Email, please review our document that’s titled ‘Set Up of Web Form Confirmation Email’ for details. Click ‘Continue’ for now as additional editing options will be available later.

14. Save your Web Form. Give the Web Form a name and choose the Status. Start and End Dates are optional in case you only want this form to be active during a certain time period. Please see the descriptions of these statuses on the next page. Once you are done, select ‘Save Web Form’.

Status:

Pending (Still working on; not ready to go live yet)
Active (Form is active and can be completed)
Not Active (Form is not able to be accessed)
Closed (Timeframe of the Web Form has passed and the form cannot be accessed)

Once you save the form, it will be created, and you will see the Web Form Dashboard. Please see the key below the image.

1. Preview will show you what the form looks like.

2. Advanced will allow you to make changes to the entire form.

3. Edit - Review form information and (if needed) make changes to the current information listed on the left-hand side.

4. Copy - This is the link to your form! Copy the link to post it on your website, give it to your Webmaster, or use it in an email.

5. Health Check will show you any items on the form that may need your attention. Red items are critical, orange are optional, and green means that you are all set.

6. Pending - This is where all constituents will be listed when their submissions come in. You may view them and decide if you want to process them in order to bring them into Eleo as new contacts, update existing ones, or ignore the entry. Select the Pending button to view all pending transactions on one screen and view the options.

7. Processed - This is where all constituents that have been processed will be displayed.

INSTRUCTIONS FOR OPTIONS UNDER ‘ADVANCED’ (Option 2 Above)

Select ‘Edit’ to make any changes to the current page. Otherwise select ‘Next’ to move onto the next page, or simply click on the tab that you wish to modify.

Form Name: Name your Web Form. This will appear on the top of the form, so that constituents will see it.

Form Type: Contact (based on your original selection and cannot be changed)

Form Layout:

Mobile Responsive (works well on mobile devices such as cellphones and tablets -*recommended)
Standard (does not work as well on mobile devices, but gives you more flexibility in designing the form – *for advanced users)

Page Type:

Standalone – separate webpage via a link or a button
Embedded – incorporated into the existing webpage

Link Options:

Link to Page (link will be the Web Form’s page address)
Link to Button (link will be in the form of a button such as ‘Donate Now’)

Status:

Pending (still working on; not ready to go live yet)
Active (form is active and can be completed)
Not Active (form is not able to be accessed)
Closed (timeframe of Web Form has passed and the form cannot be accessed)

Format Options: You can also set options such as the font, size, color, alignment, etc. The preview on the bottom right will adjust as you change colors, fonts, etc., so that you can see what it will look like. If you need to get back to the original settings, simply select the ‘Reset to Default Formatting’ option.

Button Text: Wording that you want on the button when the form is completed.

When you are done making your selections, you may click on ‘Save’ on the top right-hand side. If you need to stop working on the form at this point, you may by saving, or click on ‘Next’ at the top in the middle to continue to the next step.

Upload/change your logo or the image that you would like to have on the form. Then, select ‘Next’. You can choose ‘Previous’ to go back to the last step.

NOTE: If you chose a Standard Form Layout you will see this next to Upload Image.

Clicking ‘Advanced Editor’ will give you the following box, which gives you more options.

Next, choose the fields that you want on your form. This is the information participants will need to fill out. Name and Email are there by default, as well as any other fields that you added using the wizard. However, if needed, you may add additional fields, or move fields up and down using the green arrows. You can also edit and delete fields by clicking on the corresponding green icons. When you are done, select ‘Next’.

When clicking the ‘Add Field’ button, you will need to choose the ‘Type of Field’ that you would like to add, and then click on ‘Continue’.

You have the option of mapping information from categories within Eleo,

OR you can create your own values. Then, click on ‘Continue’ at the bottom.

A preview of the dropdown box will display. When you’re finished viewing this, press ‘Save’.

You will be brought back to the ‘Fields’ page. Your new field will be at the bottom. You may move it up and down accordingly. If necessary, you may edit or delete it.

You can also add Section Headers to identify areas of information on your form. It also can break the form up a bit if you have a lot of fields. To do this, click on ‘Add Field’. Then, choose ‘Section Header’ for the Field Type, and press ‘Continue’.

Name the Section Header accordingly. You may also choose if you would like a Line Separator under it. Select the font, size, color, and alignment. When you are done, press ‘Continue’.

You will see a preview of the Section Header. If you need to make changes, you may go ‘Back’. Otherwise, if you are satisfied, choose ‘Save’.

You may continue adding fields as needed. When you are done, select ‘Next’.

For the Defaults tab, please review our document in the Guides tab of the Library on ‘How to Set-up Defaults in a Web Form’.

If you would like to, upload/change the image for the Footer or the bottom of the form. Then, press ‘Next’.

Select your options for the Header and Footer on the Confirmation Page. If you would like to, add an image, and write your message by clicking on ‘Edit’. You can add any fields (including custom ones) in the message from the list on the right. When you are done, select ‘Save’ and then ‘Next’.

Once you have completed the setup of the Web Form, you may click on the green ‘Preview’ button to see if any editing is necessary.

A preview page will look something like this:

To get the link to your form, click back on the ‘Information’ tab, and click on the green ‘Copy’ button. This will highlight and copy the text of the link for you. You may email this to your Webmaster or paste it wherever you need to within your website.

*NOTE: The form must be ACTIVE in order for people to complete it.