A Simple Synergy 8 Contact Form
Get started developing forms on Synergy 8 by creating a simple contact form
The following code describes a simple implementation of a Synergy 8 contact form. This form will forward the form submission (contact enquiry) to a nominated email address, redirect the user to a page confirming the form was submitted successfully, and add the user as a new member on the database.
On the Synergy 8 platform, the general html <form> tag is replaced with the <ss:forms:form> tag. This allows for proper tracking and processing of the form.
The <ss:forms:row> tag can be used inside the <ss:forms:form> tag to layout each row of your form.
Here's the code for the contact form:
- Contact Form Code
Form Tag Attributes
These attributes are not the only ones available to you, this is just a quick list of the most common attributes, and explains some of the form attributes used in the above example. Click here to view a full list of attributes.
Remember you can also use any HTML form attributes (width, class, etc) in addition to these;
- Id="contact_us"- Each form must be assigned a unique id, which is used for the html id attribute and referencing in the parser's document object model. The form id is also displayed to admin users in the dashboard, so make sure to use a name that makes sense.
- RecordSubmissions="true"- This attribute determines whether or not Synergy 8 will record the form submission in the back-end dashboard. As an example; a contact form should record submissions and a simple login form should not.
- OnSubmitRedirect="/contact-us/success/"- This attribute defines the page to redirect to upon successful form submission.
- contactmode="store"- This attribute has the following valid values:
- Register - Registers the members, and fails validation if the member 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.
- OnSubmitEmail="firstname.lastname@example.org" - If set, an e-mail with the form submission details will be sent to the nominated email address.
- OnSubmitEmailSubject=""- This attribute defines the email subject when used in conjunction with OnSubmitEmail.
Form Row Tag Attributes
Each of the form fields are wrapped in a Synergy 8 form row tag. This tag displays a field label and description, in addition to ensuring that the form fields display properly when being emailed. Using form rows will also ensure that your forms display correctly on mobile devices. The API reference of the form row tag can be viewed here. 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 and can have the following values:
Form Editbox Attributes
Most of the form fields used in the above form are implemented using form editboxes. When implementing a website you'll need to change all form inputs to Synergy 8 friendly form tags. The only form field type needed for the contact form was the editbox and the textarea, however other form field types are also available for use. The API reference for the editbox can be viewed here. The editbox has the following commonly used attributes:
- ID="contact_first_name" - Each editbox must have an ID, which sets the id of the object and is used for the html id attribute and referencing in the parser's document object model. This will also allow the form to be prefilled with member details which alread exist in the database if the correct ID is used - see API reference for member fields.
- 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="mandatorty,email" has also been used on the e-mail input field.