DeveloperTutorialsForms

Get Started: Contact Enquiry Forms

This tutorial will give you an overview of some common elements found in Synergy 8 forms, and walk through implementation of a basic enquiry form as an example.

The contact enquiry form will:

1. Forward the user's form submission (contact enquiry) to a nominated admin email address.

2. Add the user as a new contact in the database.

3. Redirect the user to a page confirming the form was submitted successfully.

Form, Rows & Fields

The following tags are commonly used when implementing forms on Synergy 8:

<ss:forms:form>
This tag is used in place of a standard <form> tag, and introduces some additional options for handling a submission. Using this tag will also introduce security and spam protection measures. When developing on the Synergy 8 platform, the standard html <form> tag should be replaced with the <ss:forms:form> tag.

<ss:forms:row>
An optional layout element to provide an easy way to layout forms. It's used inside the <ss:forms:form> tag to display a label and description, and ensures that form fields display nicely when form submissions are emailed.

<ss:forms:editbox>
Used in place of the standard html <input┬átype="text"> field.  Allows the user to input one line of text.

<ss:forms:textarea>
Used in place of the standard html <textarea > field.  Allows the user to enter multiple lines of text.

Modifying the Form

Options for handling a form submission are controlled through the attributes of the <ss:forms:form> tag. A list of the most common attributes can be found below.

You can also use any standard HTML form attributes (width, class, etc) in addition to these.

Id="contact_us"
Each form must be assigned a unique id. The form id is displayed throughout the Dashboard to log submissions, and when used with automation. (Use an id like: contact_us, quick_quote, get_started).

RecordSubmissions="true"
This attribute determines whether Synergy 8 will store submissions from this form in the database. As an example; a contact form should record submissions, whereas a simple login form or newsletter subscribe should not.

OnSubmitRedirect="/contact-us/success/"
This attribute defines the page users should be redirected to upon successful form submission. As standard practice, consider adding a new page under the form to act as a success page.

ContactMode="store"
This attribute controls creation of the new contact. You may choose from the following valid values:

  • Register - Registers a new contact, and fails validation if the contact already exists.
  • Store - Optionally registers the member if they do not exist.
  • Guest - Optionally registers the member if they do not exist, but does not log the user in.
  • Login - Logs in the member (requires contact_email and contact_password fields).
  • Logout - Logs out the member.
  • Unsubscribe - Unsubscribes the member.

"Store" is commonly used for enquiry forms, otherwise use "register" when creating newsletter subscribe forms and "login" if you're implementing a login form.

OnSubmitEmail="info@mywebsite.com"
If set, an e-mail with the form submission details will be sent to the specified email address. You may separate multiple e-mail addresses with a comma. 

OnSubmitEmailSubject="'Website Enquiry: ' + $_POST['subject']"
This attribute defines the email subject when used in conjunction with OnSubmitEmail. It's common practice to include the form name and the name of the user who completed the form.

Click here to view the full API reference for the <ss:forms:form> tag.

Modifying Form Rows

Form rows are an optional layout element to provide an easy way for you to layout forms.

This tag renders a row, field label and description, and ensures that the form fields display properly when being emailed.

The row tag has the following commonly used attributes:

Label="Phone Number"
This attribute is used to define the text which will appear as the row label.

Description="Please enter your phone number"
This attribute places a short description in a small font.

Type="one_column"
This attribute defines the number of columns assigned to the row:

  • one_column
  • two_column
The full API reference of the form row tag can be viewed here.

Modifying Form Input Fields

An <ss:forms:editbox> allows the user to input one line of text, and a <ss:forms:textarea> allows the user to input multiple lines of text.

If your form will create a new contact record in the database, each form field should use ids that match the contact database fields. (eg. use contact_first_name, contact_e-mail). You can view all contact fields here via the API reference.

The only form field types needed for a basic contact form were the editbox and the textarea, however other form field types are also available for use (check out the API).

The editbox has the following commonly used attributes:

Id="contact_first_name"
Each field must have a unique ID. If the current user is logged in, this will also allow the form to be prefilled with contact's details.

Validations="mandatory"
Sets the validations to be applied to the form item. In this case the editbox has a mandatory validation, which means the form will not submit until the user has completed this field. In the above example, validations="mandatory, email" has also been used on the e-mail input field to ensure that the e-mail address is valid. 

Putting it all Together

Here's our completed contact enquiry form, which combines all of the above elements:

  • Contact Form Code
  • Preview

Share This Tutorial: