Creating a Contact Form

The forms module provides an administrative interface through which to create forms and snippets to draw and operate the form within the public interface.

Forms are defined with a simple markup language which the forms module uses to build the HTML, client side validation and server side validation.

From the dashboard within your sites manager select the Forms option and click the Add Form icon to create a new form.

In the Display Name field put a descriptive name for the form e.g. My first form. Next put the subject line for the email sent from the form in the Subject field e.g. Results from your test form. The email address of the person to receive the form goes in the Recipient field, however if there is more than one recipient simply put all the email addresses with a single comma between each.

When the form is displayed on the website the HTML from the Form Into Text is displayed before it, however once the form has been correctly submitted the Form Intro Text and the form is no longer displayed instead the Thank You Text is displayed.

Email Body (HTML) and Email Body (Text) can be treated the same, the difference is the former defines an HTML formatted email to send on form submission while the latter defines the text version of the same email.

Paste the following into both fields:

[[+name]] at [[+email]] sent the following message:
[[+message]]
-- End of Message --

The placeholders must match the id of the associated field in the form definition i.e. the value that the user submits in the field <field type="text" id="name" label="Your Name"> will replace the placeholder [[+name]].

Copy the following to the Form Definition box, this defines the form and the requirements for each field:

<form>
	<field type="text" id="name" label="Your Name">
		<validate>
			<required />
			<max length="100" />
		</validate>
	</field>
	<field type="email" id="email" label="Your Email Address">
		<validate>
			<required />
		</validate>
	</field>
	<field type="textarea" id="message" label="Your Message">
		<validate>
			<required />
			<max length="16384" />
		</validate>
	</field>
	<submit caption="Send Email" />
</form>

Finally save the new form, once saved you will be put into edit mode for the form and the form will appear in the left hand list of available forms.

After the form name will be a number e.g. 1 if this is the first form, this number is required in order to use the form on the website, so go to a document that the form should be placed on and place the snippet to call the form, in this case form ID 1:

[[!forms.use &id=`1`]]

When you complete the form and submit it an email will be built and sent using the system email settings to the forms recipient list.




TOP