Forms Overview

by Luke Simpson, Benson Lee, Chris Ullyott, Skyler Katz, Kevin Ullyott | Last edited: 2/5/2018

The CMS provides a simple way for creating and using forms on your site.

Features:

  • configurable: email where form submissions are sent, and email where notifications should come from. 
  • ability to create text sections as well different form elements including:
    text fields, text areas, drop down menus, check boxes, radio buttons, and captcha security input. 
  • customizable submit button image
  • customizable result page after the form is submitted.
  • forms can also be associated with Events that have RSVP enabled as well as E-Commerce products.

Implementation Overview

It is a two step process which involves configuring the form in the control panel and then using the API to call that form from the client website.

Creating the Form

Navigate to Connect > Forms to start creating your form. For more information on how to create a new form with custom fields, see this help page.

Placing the Form on Front End

A very simple getContent or Monklet can be used to place the form on the website itself.

<? getContent(
"form",
"find:form-slug"
);
?>


tag="form"
find="form-slug"

Pasting the Monklet code above directly to the Page or Section Editor (not the template) instead of creating a monklet will allow you to call different forms without creating a separate monklet for each form call.

Each form element will have a label and various hooks that can be used for styling. The form will have the same ID as the form slug.

You can opt to receive a JSON response string instead of redirecting the user to the 'thank you' page. 

<?
getContent(

"form",
"find:form-slug",
"response:json"
);
?>

If the form is accepted the response would be:

{"success":true}

On failure we would return the number of errors as well as the field names with the nature of the error.

We also include a number of validation related classes on the element to help with form styling.

On the input element itself we add is-invalid and on the error message, we include a class of invalid-feedback.

{"success":false,"error_count":3, "errors":{"e_36166":"required","e_36165":"required","e_36170":"valid_email"}}

Form Data & Results

Once the form is submitted the contents of the form will be e-mailed to the e-mail address configured when the form was created and the data will be stored at the CMS.

The form data can be accessed by clicking on 'view data' on the form listing screen under Connect > Forms.

Placing the Form Values on the Front End

 

On the form edit screen, check the box that says "Allow form submissions to be viewed on website." If this is not available, contact support to enable this capability for this form.

 

A very simple getContent or Monklet can be used to display form values on the website itself. 

<? getContent(
"form",
"find:form-slug",
"display:list",
"show: <a href=__form-submit-link__>Click here!</a> to see __form-first-name__'s personal information!"
);
?>

Selecting specific fields can be done using __form-field-name-slug__ where "Field Name Slug" is the slug of the field you are attempting to display. 

A template needs to be created called ekk_formvalues-form-slug.php (where form slug is the slug of your form) and the following getContent() needs to be placed in it in order to display more detail about a form submission.

<? getContent(
"form",
"find:".$_GET['keyId'],
"display:detail",
"show: On __form-submit-date__, __form-field-first-name__ entered their telephone number into the database, and so here it is: __form-field-telephone__"
);
?>

If the above getContent does not work, try doing a 'Load Config' from the backend to update the .htaccess rules for your site.

NOTE:

  • It is important to note that if a form is deleted in the Control Panel, all data will be deleted as well.
  • If you wish to email the form results to multiple recipients, you must separate the email addresses in the backend with commas.