Contact Web Forms

Contact Web Forms are ideal for collecting data without payments, such as for Newsletter Sign-ups, Volunteer Sign-ups, or any other purpose where you simply need to collect information.


Accessing Web Forms

Creating a Form

Viewing an Existing Form

Accessing Web Forms

  1. Click on the Web Forms tab in your main navigation on the left hand side.


  1. It will prompt you to log into Eleo Web Forms. Use the same username and password as you do for Eleo.


Creating a Form

  1. Once you are in the Web Forms page, select Create.


Select Form Type

  1. Choose the type of form you would like to create. In this case, you will select Contact.


Select Format Type

  1. Then choose the Format Type you would like.
  • Standalone Page - link to open the form in a new tab/window.

  • Embedded - The form will be embedded directly on your website, allowing visitors to complete it without leaving your site. We include a warning as we cannot guarantee compatibility with all websites, but most clients integrate our forms without any issues.


Select Template

  1. Select the template you would like to use for your form.


USER TIP - Click on the eye icon in the bottom right corner of any template to see a larger preview of it.


Example:


Basic Form Information

7. Fill out the following:

  • Enter a form name

  • Status :

    Active – Live and ready to be used.

    Not Active – Form is unavailable and cannot be completed (e.g., disabled or unpublished).

    Pending – Form is in progress and not yet ready to go live.

    Closed – Form was previously active but is now unavailable because the timeframe has ended.

  • Start Date – The date when the form begins accepting submissions.

  • End Date (optional) – The date when the form will stop accepting submissions, if applicable. Then press Next.

Logo and Header Images

  1. You will navigate through the sections on the left-hand side while viewing a preview on the right-hand side.

    You can add or remove a logo and header image, as well as adjust the logo's height and position.

    When you're done, click Next to proceed to the next step.




Form Header Title and Text

  1. Next, add a Header Title and optional header text. When you're finished, click Next to continue.


Form Fields

  1. You will now see the standard fields for the form type you selected. If needed, you can add additional fields by clicking the Add button on the right-hand side.


Clicking Add will display the following options:

Select the type of field you’d like to add. For existing Eleo fields, the type must match the standard field's type. For custom fields, choose the option that best fits your needs. Then press Next.

This page may look slightly different depending on the type of field you choose, but the general process remains the same. For this example, I’ve selected a Text box.

You’ll always need to provide a Field Label, which is the name of the field on the form. If you want this field to be linked to an Eleo field, make sure to choose the Field Mapping and map it to the corresponding field.

You can also decide whether the field is Required or not, and choose whether the field name displays above or inside the field box. If needed, you can add a description to clarify any details about the field. You can choose to display this description directly on the form or as a hover help item.

When you're finished, click Save.


Repeat the process for any other fields you need.


You can also use the green action icons on the right:

  • Edit – Modify any field on the form.
  • Remove – Delete a field you no longer need.
  • Up/Down Arrows – Reorder fields by moving them up or down.

Note: You can skip this step for now and add or modify fields later if needed.

Form Footer Fields and Text

11. When you're finished with the fields, click Form Footer Fields and Text on the left to continue.

12. Enter a Footer Title and Footer Text (optional) to display at the bottom of the form. When you are done, press Next.

Form Font and Color Settings

  1. Customize the form's font and colors, with a preview displayed on the right-hand side. When you are done, press Next.

Confirmation Page

  1. Select your Confirmation Page options. This page will appear once the form is submitted.
    • You can choose to display the form's header and footer on the confirmation page.
    • Add your own custom message.
    • Include form fields that will populate with the submitted information.

When you're finished, click Next to continue.

Confirmation Email

15. Lastly, set up your confirmation email (optional).

    • Choose to have the email sent upon form submission by checking the box (recommended).
    • Customize the "From" email address to make it easier to identify.
    • Add a subject line for the email.
    • Optionally, copy the email to up to three recipients (yourself and two other staff members).
    • Write the body of your email and include form fields (selected from the right-hand side).

When you're finished, click Create Form to complete the setup.

Viewing an Existing Form

Once the form is created, it will open to a page like this. You will also be able to find it under the Forms tab in the Web Form site.

Information Tab

This section displays details about your web form, such as its name, type, format, submission status, and the dates submissions will be accepted.

If you need to make changes, simply click the Edit Information button in the top right corner.

You’ll also find buttons in the top right to Preview Form, open the Form Editor for edits, or Clone the form if you’d like to create a similar one.


Form URL and Button HTML Code

You can also find the Form URL here, which you can copy and share with your webmaster or post in various locations, such as via email or on social media. Plus, if you'd like to add a button with the link, we’ve included the code for that too.


Health Check

This box will display any items that may require your attention.

Items in red text need to be addressed for the form to function properly.

Items in orange are informational and won’t impact the form’s functionality.


Pending Submissions

As submissions to this form come in, they will appear in the Pending area. To review and process the data into Eleo, click the Process button. We keep submissions in Pending so you have a chance to link them to an existing record, in case someone entered their name differently but you know they’re already in your database.


Processed Submissions

All previously processed submissions for this form will be listed here. Press View All to review them.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.