com_connect

Contents

• Introduction
• Installing and upgrading
• Migrating from zem_contact_reborn
• Usage
• Tags
  • com_connect tag
  • com_connect_text tag
  • com_connect_email tag
  • com_connect_textarea tag
  • com_connect_submit tag
  • com_connect_select tag
  • com_connect_option tag
  • com_connect_checkbox tag
  • com_connect_radio tag
  • com_connect_secret tag
  • com_connect_serverinfo tag
  • com_connect_send_article tag
  • com_connect_mime tag
  • com_connect_fields tag
  • com_connect_label tag
  • com_connect_value tag
  • com_connect_if tag
• Advanced examples
  • Separate input and error forms
  • User selectable subject field
  • User selectable recipient, without showing email address
• Styling
• Plugin API and callback events
• Frequently asked questions
• Authors/credits

Introduction

A Textpattern CMS form mailer plugin. <txp:com_connect /> produces a flexible, customisable email contact form. It is intended for use as an enquiry form for commercial and private sites, and includes several features to help reduce common problems with such forms (invalid email addresses, missing information).

Please report bugs and problems with this plugin at the GitHub project’s issues page.

Features

• Arbitrary HTML5 text fields can be specified, with min/max/required settings for validation.
• Email address validation, including a check for a valid MX record (Unix only).
• Safe escaping of input data.
• UTF-8 safe.
• Accessible form layout, including <label>, <legend> and <fieldset> tags.
• Various classes and ids to allow easy styling of all parts of the form.
• Spam prevention API (used by Tranquillo’s pap_contact_cleaner plugin) and delivery API for altering or extending the plugin’s capabilities.

History

Please see the changelog on GitHub.

Installing and upgrading

Requires Textpattern 4.7.0+

Download the latest release of the plugin from the GitHub project page, paste the code into the Textpattern Admin>Plugins panel, install and enable the plugin. Visit the forum thread for more info or to report on the success or otherwise of the plugin.

To uninstall, delete from the Plugins panel.

Alternatively, this plugin can be installed using Composer:

$ composer require textpattern/com_connect:*

Migrating from zem_contact_reborn

If upgrading from zem_contact_reborn (the previous incarnation of this plugin), please note these differences:

• Tags have been globally renamed from <txp:zem_contact ... /> to <txp:com_connect ... /> – please adjust your code accordingly.
• Classes zemConnectForm, zemError, zemRequired, zemThanks, zemText, zemEmail, zemTextarea, zemSubmit, zemSelect, zemOption, zemCheckbox and zemRadio have been renamed to comConnectForm, comError, comRequired, comThanks, comText, comEmail, comTextarea, comSubmit, comSelect, comOption, comCheckbox and comRadio respectively – please adjust your code accordingly.
• Disable or remove the zem_contact_lang plugin. Language strings are now bundled as part of the plugin itself. If you have a translation Textpack available that is not yet bundled, please submit it for inclusion.
• Classes based on the input element name are no longer automatically applied. Only default class names beginning with com are set. To employ custom classes, use the class attribute for each tag, or the global classes attribute to set names for error and information messages.
• If your site’s ‘Doctype’ preference is set to html5 you may use HTML5 attributes in your tags. Otherwise, they will be ignored.
• Validation of required elements and min/max constraints is done by the browser first, and the plugin second. So if you specify a field is required and it is left empty, the browser will usually prevent the form being submitted. To bypass (most of) the browser checks, specify browser_validate="0" in your <txp:com_connect /> tag.

Usage

Contact form

The simplest form is shown below, which produces a default form with ‘Name’, ‘Email’ and ‘Message’ fields. Email will be delivered to [email protected], with the user’s supplied email as the From: address.

<txp:com_connect to="[email protected]" />

To specify fields explicitly, use something like this:

<txp:com_connect to="[email protected]">
    <txp:com_connect_email />
    <txp:com_connect_text label="Phone" min="7" max="15" />
    <txp:com_connect_textarea label="Your question" />
    <txp:com_connect_submit label="Send" />
</txp:com_connect>

Alternatively, place the field specifications in a Textpattern form, and call it like this:

<txp:com_connect to="[email protected]" form="my-contact-form" />

Send article

Within the context of an individual article, this plugin can be used to send the article (or excerpt, if it exists) to an email address specified by the visitor. This requires at least two tags:

1. com_connect, to create a form that is initially hidden by setting the send_article attribute.
2. com_connect_send_article, to create a ‘Send article’ link which reveals the aforementioned form when clicked.

<txp:com_connect send_article="1" />
<txp:com_connect_send_article />

By default the form contains fields for your name and email address, the recipient’s email address and a personal message, but similar to contact forms you can create your own form layout. Some things you need to know:

1. Set the send_article attribute to 1 in the com_connect tag.
2. Use a com_connect_email tag with the send_article attribute set to 1. This field will be used as the recipient email address.

<txp:com_connect to="[email protected]" send_article="1">
    <txp:com_connect_email label="Recipient Email" send_article="1" />
    <txp:com_connect_email label="Your Email" />
    <txp:com_connect_submit label="Send Article" />
</txp:com_connect>

<txp:com_connect_send_article />

Tags

<txp:com_connect_send_article /> can be used to create a ‘Send article’ link within an article form, connecting it to the contact form.

All other tags provided by this plugin can only be used inside a <txp:com_connect> – </txp:com_connect> container tag or in a Textpattern form used as the form attribute in the <txp:com_connect /> tag.

In addition to the tags detailed in the following sections, every tag accepts a core set of common attributes. These are:

; accesskey="character"
: Shortcut key to set focus on the field.
; autofocus="boolean"
: To automatically focus the cursor in this field on page load. Only one field may have this property.
; dir="value"
: Text direction (ltr, rtl or auto).
; disabled="boolean"
: Whether the input control accepts user input. If set, the element does not get submitted with the form, nor is it subject to any checkValidity() JavaScript calls.
; hidden="boolean"
: The visibility of the input control.
; id="id"
: The HTML identifier for the control.
; lang="value"
: The ISO 639 language short code (e.g. en-gb, de-de) that governs the field.
; list="id"
: Used in conjunction with the <datalist> tag to specify a set of options. The id is the reference to the datalist to use.
; readonly="boolean"
: Control does not accept user input, but will be processed on form submission and can be validated.
; spellcheck="value"
: Whether the field is subject to spell checking (true = yes, default = browser decides, or false = no).
; style="style rules"
: Inline CSS style rules to apply to the input control.
; tabindex="number"
: The order in which the cursor jumps between elements when using the tab key.
; title="value"
: Usually used for hover tooltip describing the input control’s use in your application.
; translate="boolean"
: Whether to subject the attribute content to language translation.

com_connect tag

<txp:com_connect />

May be used as a single (self-closing) or container tag. Place this where you want the input form to go. Status and error messages, if any, will be displayed before the form.

Attributes

; body_form="form name"
: Use specified form for the message body text.
; class="space-separated values"
: Set the CSS class name of the tag. Default: comConnectForm. To remove class attribute from the element entirely, use class="".
; classes="comma-separated key:value pairs"
: Set the CSS classes for error / information conditions. Specify each as a pair of values separated by a colon, e.g. classes="required: req_field, element: warn_field". There are up to four available to customise:
: element: Set for each form field that fails validation for any reason. Default: errorElement.
: wrapper: The class to surround the list of errors shown above the form. Default: comError.
: required: Class assigned when a required element is not completed. Default: comRequired.
: thanks: Class applied to the wrapper around the thanks_form. Default: comThanks.
; copysender="boolean"
: Whether to send a copy of the email to the sender’s address. Available values: 1 (yes) or 0 (no). Default is 0.
; expire="number"
: Number of seconds after which the form will expire, thus requiring a page refresh before sending. Default is 600.
; form="form name"
: Use specified form, containing the layout of the contact form fields.
; from="email address"
: Email address used in the “From:” field when sending email. Defaults to the sender’s email address. If specified, the sender’s email address will be placed in the “Reply-To:” field instead.
; from_form="form name"
: Use specified form (overrides from attribute).
; label="text"
: Label for the contact form. If set to an empty string, display of the fieldset and legend tags will be suppressed. Default is Contact.
; lang="lang-code"
: Override the language strings that would normally be used from the current admin-side language in force. e.g. lang="fr-fr" would load the French language strings. A Textpack must already exist for the chosen language.
; browser_validate="boolean"
: Set to 0 if you wish to stop the browser from validating form field values and ‘required’ status of input elements. The plugin itself is then solely responsible for validation and will indicate error conditions after submission. Default is 1.
; redirect="URL"
: Redirect to specified URL (overrides thanks and thanks_form attributes). URL must be relative to the Textpattern site URL. Example: redirect="monkey" would redirect to http://example.com/monkey.
; replyto=boolean|email address
: Governs the email address of who the message reply should go to. Options:
: true (default): Use the email address from the form itself (value from the <txp:com_connect_email> tag) if the from address has been specified. Blank otherwise.
: false: Always use the from email address as reply-to. Note that if the from is omitted the email will be from nobody and may be rejected by the receiving server.
: email address: Use the specified email address as the reply-to, if it’s a valid address.
; required="boolean"
: Whether to require all tags in this contact form to be completed before the form can be submitted. Can be overridden on a field-by-field basis by using the required attribute in the relevant tag. Available values: 1 (yes) or 0 (no). Default is 1.
; send_article="boolean"
: Whether to use this form to send an article. Available values: 1 (yes) or 0 (no). Default is 0.
; show_error="boolean"
: Whether to display error and status messages. Available values: 1 (yes) or 0 (no). Default is 1.
; show_input="boolean"
: Whether to display the form <input> fields. Available values: 1 (yes) or 0 (no). Default is 1.
; subject="subject text"
: Subject used when sending an email. Default is the site name.
; subject_form="form name"
: Use specified form (overrides subject attribute).
; thanks="text"
: Message shown after successfully submitting a message. Default is Thank you, your message has been sent.
; thanks_form="form name"
: Use specified form (overrides thanks attribute).
; to="email address" required
: Recipient email address. Multiple recipients can be specified, separated by commas.
; to_form="form name"
: Use specified form (overrides to attribute).

Examples

Example 1: Built-in contact form

When used as a single tag, produces a default form with ‘Name’, ‘Email’ and ‘Message’ fields. Email will be delivered to [email protected], with the user’s supplied email as the From: address:

<txp:com_connect to="[email protected]" />

Example 2: Building a custom form container

When used as a container tag, much more flexibility is allowed, for example:

<txp:com_connect to="[email protected]">
    <txp:com_connect_email />
    <txp:com_connect_text type="tel" label="Phone" min="7" max="15" />
    <txp:com_connect_textarea label="Your question" />
    <txp:com_connect_submit label="Send" />
</txp:com_connect>

Example 3: Custom message formatting

Use the body_form attribute to build custom content that is emailed to the recipient:

<txp:com_connect to="[email protected]" body_form="message-formatting" />

And the body_form form template named message-formatting is as follows:

============
Email received.

<txp:com_connect_if name="email"><txp:com_connect_label name="email" />: <txp:com_connect_value name="email" /><txp:else />Mr. Nobody</txp:com_connect_if> wrote:

<txp:com_connect_if name="message"><txp:com_connect_value name="message" /><txp:else />Nothing much :(</txp:com_connect_if>

============

Example 4: HTML and plaintext email content

Use the body_form attribute to build custom content in both plaintext and HTML formats that is emailed to the recipient:

<txp:com_connect to="[email protected]" body_form="message-formatting" />

Use the body_form form template named message-formatting as follows, and note the <txp:com_connect_mime> tags which indicate that the content of the given type immediately follows. Use the tag with type="end" to signify that the content is complete.

============
<txp:com_connect_mime type="text" />
Fields submitted:
<txp:com_connect_fields break="">
<txp:com_connect_label />: <txp:com_connect_value />
</txp:com_connect_fields>

<txp:com_connect_mime type="html" />
<table width="600" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
<txp:com_connect_fields break="tr">
<td style="padding:10px 0">
   <txp:com_connect_label />
</td>
<td style="padding:10px 0">
   <txp:com_connect_value />
</td>
</txp:com_connect_fields>
</table>

<txp:com_connect_mime type="end" />
============

com_connect_text tag

<txp:com_connect_text />

Creates a text <input> field and corresponding <label> tag. The input value will be included in the email, preceded by the label.

Attributes

; autocomplete="value"
: Indicates whether the value of the control can be automatically completed by the browser. This attribute is ignored if the value of the type attribute is password. Possible values are: off (the browser does not automatically complete the entry) or on (the browser can automatically complete the value based on values that the user has entered during previous uses). Default is unset.
; break="tag"
: Break tag between the <label> and <input> field. Default is <br />. Use break="" to put the label and input field on the same line.
; class="space-separated values"
: Set the CSS class name of the tag. Default: comText. To remove class attribute from the element entirely, use class="".
; default="value"
: Default value when no input is provided.
; html_form="id"
: The HTML id of the <form> tag to which the field is attached. Associated with the contained form by default.
; inputmode="value"
: A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is text, password or url. Possible values are:
: verbatim: Alphanumeric, non-prose content such as usernames and passwords.
: latin: Latin-script input in the user’s preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.
: latin-name: As latin, but for human names.
: latin-prose: As latin, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.
: full-width-latin: As latin-prose, but for the user’s secondary languages.
: kana: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
: katakana: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
: numeric: Numeric input, including keys for the digits 0 to 9, the user’s preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using type="number".
: tel: Telephone input, including asterisk and pound key. Use type="tel" if possible instead.
: email: Email input. Use <txp:com_connect_email /> if possible instead.
: url: URL input. Use type="url" if possible instead.
; label="text"
: Text label displayed to the user. Default is Text.
; label_position="text"
: Position of the label in relation to the <input> field. Available values: before or after. Default is before.
; max=value"
: For character-based inputs, the maximum input value length in characters, using the HTML5 maxlength attribute. To remove maxlength attribute from the element entirely (not recommended), use max="". For numeric-based inputs, the maximum input value the field accepts, using the HTML5 max attribute (can be a negative value). Default is 100. To remove max attribute from the numerical input element entirely, use max="".
; min="value"
: For character-based inputs, the minimum input value length in characters, using the HTML5 minlength attribute. Default is unset, i.e., no minimum limit. For numeric-based inputs, the minimum input value the field accepts, using the HTML5 min attribute (can be a negative value). Default is 0. To remove min attribute from the numerical input element entirely, use min="".
; name="value"
: Field name, as used in the HTML <input> tag.
; pattern="regex"
: Regular expression that governs the format in which the field data is expected. Only used for character-based inputs.
; placeholder="text"
: Text to show as a guide, when the <input> field is empty.
; required="boolean"
: Whether this field must be filled out. Available values: 1 (yes) or 0 (no). Default is whatever is set in the <txp:com_connect> tag’s required attribute – if neither attribute is set then default is 1.
; size="value"
The size, in characters, of the <input> field.
; step="value"
: For numeric-based inputs, the interval between min and max.
; type="value"
: Type of text input. Default is text. Choose from:
: color
: date
: datetime
: datetime-local
: month
: number
: password
: range
: search
: tel
: text
: time
: url
: week

Examples

Example 1: Text input box

<txp:com_connect_text label="Your name" />

Example 2: Range slider

<txp:com_connect_text type="range" label="UK shoe size" min="1" max="15" />

Example 3: Telephone input with validation

Create a telephone field with a validation pattern for UK telephone number format:

<txp:com_connect_text type="tel" label="Telephone" pattern="^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$" required="1" />

com_connect_email tag

<txp:com_connect_email />

<input> field for user’s email address.

The entered email address will automatically be validated to make sure it is of the form “[email protected][.zzz]”. On non-Windows servers, a test will be done to verify that an A or MX record exists for the domain. Neither test prevents spam, but it does help detect accidental typing errors.

Attributes

; autocomplete="value"
: Indicates whether the value of the control can be automatically completed by the browser. Possible values are: off (the browser does not automatically complete the entry) or on (the browser can automatically complete the value based on values that the user has entered during previous uses). Default is unset.
; break="tag"
: Break tag between the <label> and <input> field. Default is <br />. Use break="" to put the label and input field on the same line.
; class="space-separated values"
: Set the CSS class name of the tag. Default: comEmail. To remove class attribute from the element entirely, use class="".
; default="value"
: Default value when no input is provided.
; html_form="id"
: The HTML id of the <form> tag to which the field is attached. Associated with the contained form by default.
; label="text"
: Text label displayed to the user. Default is Email.
; label_position="text"
: Position of the label in relation to the <input> field. Available values: before or after. Default is before.
; max="integer"
: Maximum input value length in characters, using the HTML5 maxlength attribute. Default is 100. To remove maxlength attribute from the element entirely (not recommended), use max="".
; min="integer"
: Minimum input value length in characters, using the HTML5 minlength attribute. Default is unset, i.e., no minimum limit.
; name="value"
: Field name, as used in the HTML <input> tag.
; placeholder="text"
: Text to show as a guide, when the <input> field is empty.
; required="boolean"
: Whether this field must be filled out. Available values: 1 (yes) or 0 (no). Default is whatever is set in the <txp:com_connect> tag’s required attribute – if neither attribute is set then default is 1.
; send_article="boolean"
: Whether this field is used as the recipient email address when using the send_article function. Available values: 1 (yes) or 0 (no). Default is 0.
; size="value"
: The size, in characters, of the <input> field.

Examples

Example 1: Standard email field

<txp:com_connect_email label="Your email address" />

com_connect_textarea tag

<txp:com_connect_textarea />

Creates a <textarea>.

Attributes

; autocomplete="value"
: Indicates whether the value of the control can be automatically completed by the browser. Possible values are: off (the browser does not automatically complete the entry) or on (the browser can automatically complete the value based on values that the user has entered during previous uses). Default is unset.
; break="tag"
: Break tag between the <label> and <textarea>. Default is <br />. Use break="" to put the <label> and <input> field on the same line.
; class="space-separated values"
: Set the CSS class name of the <textarea>. Default: comTextarea. To remove class attribute from the element entirely, use class="".
; cols="integer"
Number of columns, in characters, of the <textarea>. Default is 58.
; default="value"
: Default value when no input is provided.
; html_form="id"
: The HTML id of the <form> tag to which the <textarea> is attached. Associated with the contained form by default.
; label="text"
: Text label displayed to the user. Default is Message.
; label_position="text"
: Position of the label in relation to the <textarea> field. Available values: before or after. Default is before.
; max="integer"
: Maximum input value length in characters, using the HTML5 maxlength attribute. Default is 10000. To remove maxlength attribute from the element entirely (not recommended), use max="".
; min="integer"
: Minimum input value length in characters, using the HTML5 minlength attribute. Default is unset, i.e., no minimum limit.
; name="value"
: Field name, as used in the HTML <input> tag.
; placeholder="text"
: Text to show as a guide to users, when the <textarea> is empty.
; required="boolean"
: Whether this field must be filled out. Available values: 1 (yes) or 0 (no). Default is whatever is set in the <txp:com_connect> tag’s required attribute – if neither attribute is set then default is 1.
; rows="integer"
: Number of rows, in characters, of the <textarea>. Default is 8.
; wrap="value"
: Governs word-wrap. Available values: hard or soft. If this attribute is not specified, soft is its default value.

Examples

Example 1: Standard textarea

Create a text area that is 40 characters wide, 10 lines high, with a customised label:

<txp:com_connect_textarea cols="40" rows="10" label="Your question" />

com_connect_submit tag

<txp:com_connect_submit />

Creates a submit button. When used as a container tag, a <button> element will be used instead of an <input> element.

Attributes:

; class="space-separated values"
: Set the CSS class name of the tag. Default: comSubmit. To remove class attribute from the element entirely, use class="".
; html_form="id"
: The HTML id of the <form> tag to which the button is attached. Associated with the contained form by default.
; label="text"
: Text shown on the submit button. Default is Send.

Examples

Example 1: Standard submit button

<txp:com_connect_submit />

Example 2: Submit button with custom text

<txp:com_connect_submit label="To the moooon" />

Example 3: Usage as a container tag

This allows you to use Textpattern tags and HTML markup in the submit button:

<txp:com_connect_submit><strong>Send</strong> question</txp:com_connect_submit>

Example 4: Image button

As example 3 above, but using an image as the button:

<txp:com_connect_submit>
    <img src="path/to/img.png" alt="submit">
</txp:com_connect_submit>

com_connect_select tag

<txp:com_connect_select />

Container tag that creates a drop-down selection <select> list, or scrolled <select> list box (by utilising the size attribute).

Attributes

; break="tag"
: Break tag between the label and <select> field. Default is <br />. Use break="" to put the label and input field on the same line.
; class="space-separated values"
: Set the CSS class name of the list. Default: comSelect. To remove class attribute from the element entirely, use class="".
; delimiter="character"
: Separator character between list items if using the options attribute. Default is , (comma). Ignored if this tag is used as a container.
; label="text"
: Text label displayed to the user. Default is Option.
; label_position="text"
: Position of the label in relation to the <select> field. Available values: before or after. Default is before.
; html_form="id"
: The HTML id of the <form> tag to which the <select> is attached. Associated with the contained form by default.
; multiple="boolean"
: Whether to allow multiple selections to be made from the set of options. Default: unset.
; name="value"
: Field name, as used in the HTML <select> tag.
; options="comma-separated values"
: List of items (previously list) to show in the select box. Surround the first entry with {Braces} to indicate it is an ‘empty’ placeholder. Alternatively, the <txp:com_connect_option /> tag may be used inside this tag’s container.
; required="boolean"
: Whether this field must be filled out. Available values: 1 (yes) or 0 (no). Default is whatever is set in the <txp:com_connect> tag’s required attribute – if neither attribute is set then default is 1.
; selected="value"
: List item that is selected by default.
; size="value"
: If the <select> is to be presented as a scrolled list box, this attribute represents the number of rows in the list that should be visible at one time. Default is unset (i.e. a drop-down selection <select> list).

Examples

Example 1: Single drop-down select list

A list labeled ‘Department’, containing three options and a blank option shown by default and labelled with ‘Choose dept’, forcing the user to make a selection.

<txp:com_connect_select label="Department" options="{Choose dept},Marketing,Sales,Support" />

Example 2: Using the com_connect option tag

Same as the above example, but with ‘Sales’ selected by default.

<txp:com_connect_select label="Department" selected="Sales">
    <txp:com_connect_option label="{Choose dept}" />
    <txp:com_connect_option label="Marketing" />
    <txp:com_connect_option label="Sales" />
    <txp:com_connect_option label="Support" />
</txp:com_connect_select>

The advantage to use the option tag is that you can name the options independently of the label. You could also add a boolean selected attribute to the individual option tag, instead of to the containing select tag.

Example 3: Multiple select

<txp:com_connect_select label="Ice cream flavours" multiple>
    <txp:com_connect_option label="{Choose your favourites}" />
    <txp:com_connect_option label="Vanilla" />
    <txp:com_connect_option label="Strawberry" />
    <txp:com_connect_option label="Raspberry" />
    <txp:com_connect_option label="Chocolate" />
    <txp:com_connect_option label="Mint choc-chip" name="mint-with-chocolate-chips" />
</txp:com_connect_select>

com_connect_option tag

<txp:com_connect_option />

Creates a drop-down selection option. May be used as a single (self-closing) or container tag. Also see com_connect_select tag above.

Attributes

; class="space-separated values"
: Set the CSS class name of the option. Default: comOption. To remove class attribute from the element entirely, use class="".
; label="text" required
: Text label of this option displayed to the user. Surround the label with {braces} to indicate it is an empty placeholder at the start of the list. Note if you use this braces syntax, the value will be forced to value="", i.e. any supplied value will be ignored.
; selected="boolean"
: Whether this item is selected, May also be specified in the container tag’s selected attribute. Available values: 1 (yes) or 0 (no).
; value="text"
: The value associated with this option when submitted. Default is the label.

Example 1: Drop-down select list containing three options

<txp:com_connect_select label="Department">
    <txp:com_connect_option label="Marketing" />
    <txp:com_connect_option label="Sales" />
    <txp:com_connect_option label="Support" />
</txp:com_connect_select>

Example 2: Pass different values instead of label

‘Sales’ is selected by default.

<txp:com_connect_select label="Department">
    <txp:com_connect_option value="contact-marketing">Marketing</txp:com_connect_option>
    <txp:com_connect_option value="contact-sales" selected>Sales</txp:com_connect_option>
    <txp:com_connect_option value="contact-support">Support</txp:com_connect_option>
</txp:com_connect_select>

com_connect_checkbox tag

<txp:com_connect_checkbox />

Creates a checkbox.

Attributes

; break="tag"
: Break tag between the checkbox button and label. Default is one space. Use break="br" to put the checkbox and label on separate lines.
; checked="boolean"
: Whether this box is checked when first displayed. Available values: 1 (yes) or 0 (no). Default is 0.
; class="space-separated values"
: Set the CSS class name of the option. Default: comCheckbox. To remove class attribute from the element entirely, use class="".
; html_form="id"
: The HTML id of the <form> tag to which the checkbox is attached. Associated with the contained form by default.
; label="text"
: Text label displayed to the user. Default is Checkbox.
; label_position="text"
: Position of the label in relation to the <input> field. Available values: before or after. Default is after.
; name="value"
: Field name, as used in the HTML <input> tag.
; required="boolean"
: Whether this checkbox must be filled out. Available values: 1 (yes) or 0 (no). Default is whatever is set in the <txp:com_connect> tag’s required attribute – if neither attribute is set then default is 1.
; value="text"
: Value to send in the email if the option is checked. Uses yes/no if not set.

Examples

Example 1: Accept terms of service

Shrink-wrap agreement which must be checked by the user before the email will be sent.

<txp:com_connect_checkbox label="I accept the terms and conditions" />

Example 2: Optional checkboxes

With which operating systems are you familiar?<br />
<txp:com_connect_checkbox label="Windows" required="0" /><br />
<txp:com_connect_checkbox label="Unix/Linux/BSD" required="0" /><br />
<txp:com_connect_checkbox label="macOS" required="0" />

com_connect_radio tag

<txp:com_connect_radio />

Creates a radio button.

Attributes

; break="tag"
: Break tag between the radio button and label. Default is one space. Use break="br" to put the radio button and label on separate lines.
; checked="boolean"
: Whether this radio option is checked when the form is first displayed. Available values: 1 (yes) or 0 (no). Default is 0.
; class="space-separated values"
: Set the CSS class name of the radio button. Default: comRadio. To remove class attribute from the element entirely, use class="".
; group="text" required
: Text used in the email to describe this group of radio buttons. This attribute value is remembered for subsequent radio buttons, so you only have to set it on the first radio button of a group. Default is Radio.
; html_form="id"
: The HTML id of the <form> tag to which the radio button is attached. Associated with the contained form by default.
; label="text" required
: Text label displayed to the user as radio button option.
; name="value" recommended
: Field name, as used in the HTML <input> tag. This attribute value is remembered for subsequent radio buttons, so you only have to set it on the first radio button of a group. If it hasn’t been set at all, it will be derived from the group attribute.
; required="boolean"
: Whether this radio set must be filled out. Available values: 1 (yes) or 0 (no). Default is whatever is set in the <txp:com_connect> tag’s required attribute – if neither attribute is set then default is 1. You should set the required attribute on only the first radio button of the group, or set the same identical attribute value on all radio buttons in the group.
; value="text"
: Value to send in the email if the option is checked. Uses label if not set.

Examples

Example 1: Radio set

Group mutually exclusive radio buttons by setting the group attribute on the first radio button in a group. Only the chosen radio button from each group will be used in the email message. The message will be output in the form group: label for each of the chosen radio buttons.

<txp:com_connect_radio label="Medium" group="I like my steak" />
<txp:com_connect_radio label="Rare" />
<txp:com_connect_radio label="Well done" />
<txp:com_connect_radio label="Wine" group="With a glass of" />
<txp:com_connect_radio label="Beer" />
<txp:com_connect_radio label="Water" />

com_connect_secret tag

<txp:com_connect_secret />

This tag has no effect on the form or HTML output, but will include additional information in the email. It can be used as a single (self-closing) tag or as a container tag.

Attributes

; label="text"
: Used to identify the field in the email. Default is Secret.
; name="text"
: Used internally. Set this only if you have multiple ‘secret’ form elements with identical labels.
; value="value"
: Some text you want to add to the email.

Examples

Example 1: As a single (self-closing) tag

<txp:com_connect_secret value="The answer is 42" />

Example 2: As a container tag

<txp:com_connect_secret label="Dear user">
    Please provide a useful example for this tag!
</txp:com_connect_secret>

com_connect_serverinfo tag

<txp:com_connect_serverinfo />

This tag has no effect on the form or HTML output, but will include additional information in the email based on the PHP $_SERVER variable.

Attributes

; label="text"
: Used to identify the field in the email. Defaults to the value of the name attribute.
; name="value" required
: Name of the server variable. See the PHP manual for a full list.

Examples

Example 1: Add the IP address of the visitor to the email

<txp:com_connect_serverinfo name="REMOTE_ADDR" label="IP number" />

Example 2: Add the name of the visitor’s browser to the email

<txp:com_connect_serverinfo name="HTTP_USER_AGENT" label="Browser" />

com_connect_send_article tag

<txp:com_connect_send_article />

Use this tag in your individual article form, where you want the “send article” link to be displayed.

Attributes

; linktext="text"
: Text displayed for the link. Default is send article.

Examples

Example 1: On an article form

<txp:com_connect_send_article linktext="Send this article" />

com_connect_fields tag

<txp:com_connect_fields />

Iterate over the set of submitted fields. Only really of use in the designated body_form to format the user-supplied content in the email body.

Attributes

; break="text or tag"
: Break tag or text to use as a separator between each item. Default is , @. Use @break="" to remove the effect of this attribute.
; class="space-separated values"
: Set the CSS class name of the wraptag. Default: unset.
; label="text"
: Comma-separated list of field labels to iterate over.
; name="text"
: Comma-separated list of field names to iterate over.
; wraptag="tag"
: HTML tag (without angle brackets) to wrap the set of fields. Default: unset.

Note that label and name may be used individually or in tandem. If both are omitted, the entire set of fields are iterated.

Examples

Example 1: Create an unordered list of submitted fields

<txp:com_connect_fields wraptag="ul" break="li">
   <txp:com_connect_label /> = <txp:com_connect_value />
</txp:com_connect_fields>

com_connect_mime tag

<txp:com_connect_mime />

Use this in the body_form to delineate sections of the message for use in plaintext email clients and/or html-capable email clients.

Attributes

; type="value"
: The type of content that follows the tag. Choose from text (plaintext), html, or end (to signify the end of the blocks).

Examples

Example 1: Plaintext and HTML body content

<txp:com_connect_mime type="text" />
<txp:com_connect_fields break="">
   <txp:com_connect_label />: <txp:com_connect_value />
</txp:com_connect_fields>
<txp:com_connect_mime type="html" />
<txp:com_connect_fields wraptag="ul" break="li">
   <txp:com_connect_label /> = <txp:com_connect_value />
</txp:com_connect_fields>
<txp:com_connect_mime type="end" />

Note that there are three uses of the new tag:

• One to signify the start of the plaintext content (type="text").
• One to signify the start of the html content (type="html").
• One to signify the end of all the content (type="end").

Whether you use one or both of the text/html types, you require the ‘end’ or you’ll just get garbage messages.

com_connect_label tag

<txp:com_connect_label />

Return the label for the given attribute name.

Attributes

; name="text"
: The name of the field for which you wish to retrieve the label. If used within a <txp:com_connect_fields> container, the name is optional and will return the current field in the set.

com_connect_value tag

<txp:com_connect_value />

Return the value of the given attribute, by name or its label.

Attributes

; break="text or tag"
: Break tag or text to use as a separator between each item, if the value is a multiple (e.g. a multi-select option list). Default is , @. Use @break="" to remove the effect of this attribute.
; class="space-separated values"
: Set the CSS class name of the wraptag. Default: unset.
; label="text"
: The label of the field for which you wish to retrieve the value.
; name="text"
: The name of the field for which you wish to retrieve the value.
; wraptag="tag"
: HTML tag (without angle brackets) to wrap the field. Default: unset.

If used within a <txp:com_connect_fields> container, the name and label are optional and the tag will use the current field in the set.

com_connect_if tag

<txp:com_connect_if />

Conditional tag for checking variable conditions, either by name or label.

Attributes

; label="text"
: The label of the field you wish to check.
; name="text"
: The name of the field you wish to check.
; value="text"
: The value against which to test the given field. Leave blank to just test if there is any value assigned to the field.

If used within a <txp:com_connect_fields> container, the name and label are optional and the tag will test the current field in the set.

Examples

Example 1: Take action if the visitor has entered a particular value

<txp:com_connect_if name="delivery" value="courier">
   <txp:com_connect_label name="delivery" />: <txp:com_connect_value name="delivery" />
</txp:com_connect_if>.

Advanced examples

Separate input and error forms

Using show_input and show_error to display the form and error messages on different parts of a page. A form is used to make sure the contents of both forms are identical, otherwise they would be seen as two independent forms. The first form only shows errors (no input), the second form only shows the input fields (no errors).

<div id="error">
    <txp:com_connect form="contact_form" show_input="0" />
</div>
<div id="inputform">
    <txp:com_connect form="contact_form" show_error="0" />
</div>

Apart from the show_error and show_input attributes, all other attributes must be 100% identical in both forms, otherwise they would be seen as two unrelated forms.

User selectable subject field

Specify the subject_form attribute and create a form which includes a com_connect_select tag:

<txp:com_connect to="[email protected]" subject_form="my_subject_form" />
    <txp:com_connect_text label="Name" /><br />
    <txp:com_connect_email /><br />
    <txp:com_connect_select label="Choose Subject" options=",Question,Feedback" /><br />
    <txp:com_connect_textarea label="Message" /><br />
</txp:com_connect>

Create a Textpattern form called “my_subject_form”, containing:

<txp:php>
    global $com_connect_form;
    echo $com_connect_form['Choose Subject'];
</txp:php>

The label used in the com_connect_select tag must be identical to the corresponding variable in the subject_form. Here we used Choose subject.

If you’d prefer to add a common prefix for all subjects, use a subject_form containing:

<txp:php>
    global $com_connect_form;
    echo 'My common prefix - ' . $com_connect_form['Choose Subject'];
</txp:php>

User selectable recipient, without showing email address

Specify the to_form attribute and create a form which includes a com_connect_select tag:

<txp:com_connect to_form="my_com_connect_to_form">
    <txp:com_connect_text label="Name" /><br />
    <txp:com_connect_email /><br />
    <txp:com_connect_select label="Department" options=",Support,Sales" /><br />
    <txp:com_connect_textarea label="Message" /><br />
</txp:com_connect>

Create a Textpattern form called “my_com_connect_to_form”, containing:

<txp:php>
    global $com_connect_form;
    switch($com_connect_form['Department'][0])
    {
        case 'Support':
            echo '[email protected]';
            break;
        case 'Sales':
            echo '[email protected]';
            break;
        default:
            echo '[email protected]';
    }
</txp:php>

The label used in the com_connect_select tag must be identical to the corresponding variable in the to_form. Here we used Department.

A ‘default’ email address in the to_form is specified to ensure that a valid email address is used in cases where you add or change a select/radio option and forget to update the to_form.

Warning: Never use tags like com_connect_text, com_connect_email or com_connect_textarea for setting the recipient address, otherwise your form can be abused to send spam to any email address!

Styling

The form itself has a default class of comConnectForm set on the <form> HTML tag.

If a thanks_form template is used, the wrapper around that template has a default class of comThanks.

The list of error messages (if any) has a default class of comError set on the ul HTML tag that encloses the list of errors. This class name may be overridden using the classes attribute of the com_connect tag.

All form elements and corresponding labels have the following classes (or ids) set by default:

1. One of comText, comEmail, comTextarea, comSelect, comOption, comRadio, comCheckbox or comSubmit. By default, it should be obvious which class is used for which form element (and corresponding label). You can override these names by using your own class attribute.
2. comRequired and/or errorElement, depending on whether the form element is required, an error was found in whatever the visitor entered, or both. Override these using the classes attribute in the com_connect tag.
3. An individual id or class set to the value of the name attribute of the corresponding tag. When styling forms based on this class, you should explicitly set the name attribute because automatically generated names may change in newer com_connect versions.

com_connect’s API

The plugin API of com_connect, originally developed by Tranquillo, allows other plugins to interact with contact forms. This permits extra functionality such as combatting comment spam, HTML email, newsletter delivery and so forth to be bolted onto the base plugin.

Four callback events exist in com_connect:

• comconnect.submit is called after the form is submitted and the values are checked if empty or valid email addresses, but before the mail is sent.
• comconnect.form lets you inject content (fields) in the contact form as displayed to the visitor.
• comconnect.render lets you inject or alter markup of the entire <form>. Useful for editing things like enctype (e.g. for file attachment modules that link into this plugin).
• comconnect.deliver is called immediately prior to delivery and advertises the intended payload so you may manipulate it. For example, you could do something as simple as adding CC: or BCC: fields. Or change the MIME type header to text/html and add some HTML content based on the given body data, then let com_connect handle the mailing. Or you could intercept the entire mail process, handle mailing yourself with a third party system, and tell com_connect to skip its internal mailing process.

For reference here are the commands that will be interesting to plugin developers:

// This will call your function before the form is submitted so you can analyse the submitted data
register_callback('abc_myfunction', 'comconnect.submit');

// This will call your function and add the output (use @return $mystuff;@) to the contact-form.
register_callback('abc_myotherfunction2', 'comconnect.form');

// To get hold of the form-variables you can use global com_connect_form;
// With the following two lines you can tell com_connect if your plugin found spam.
$evaluator =& get_comconnect_evaluator();

// The passed value must be non-zero to mark the content as spam.
// Value must be a number between 0 and 1.
$evaluator -> add_comconnect_status(1);

Multiple plugins can be active at the same time and each of them can mark the submitted content as spam and prevent the form from being submitted.

Examples

register_callback('pap_comconnect_form','comconnect.form');
register_callback('pap_comconnect_submit','comconnect.submit');

function pap_comconnect_form()
{
    $field = '<div style="display:none">'.
        finput('text','phone',ps('phone'),'','','','','','phone').'<br />'.
        finput('text','mail',ps('mail'),'','','','','','mail').'</div>';
    return $field;</code>
}

function pap_comconnect_submit()
{
    $checking_mail_field = trim(ps('mail'));
    $checking_phone_field = trim(ps('phone'));
    $evaluation =& get_comconnect_evaluator();

    // If the hidden fields are filled out, the contact form won't be submitted!
    if ($checking_mail_field != '' or $checking_phone_field != '') {
        $evaluation -> add_comconnect_status(1);
    }

    return;
}

For the delivery callback, you signal back to the plugin your intentions so that com_connect knows what to do after your delivery plugin has executed. Return the following strings:

• comconnect.send (or no return value) to allow com_connect to continue mailing the content.
• comconnect.skip to skip com_connect’s mailing (i.e., the third party handles the mail process) and return ‘success’ to the visitor.
• comconnect.fail to skip com_connect’s mailing and return ‘fail’ to the visitor.

Or simply exit your plugin to halt the entire operation so no com_connect feedback is given.

Frequently asked questions

How do I remove the legend and fieldset surrounding the contact form?

Set the label attribute to an empty value (label="") in the com_connect tag.

No email is sent. How do I diagnose and fix the problem?

First try a simple contact form, using only the com_connect tag with the to attribute set to a valid email address. If that doesn’t send email, fill out the ‘SMTP envelope sender address’ field in Textpattern’s Admin>Preferences. If that doesn’t help either, take a look at your mail server log files to see what the problem is.

Which tag do I use to create the submit button?

Just use normal HTML code to create a submit button. For historical reasons this plugin still provides the com_connect_submit tag, but it provides little extra functionality.

How can I get a unique (order) number in the subject of each email?

Try using the rvm_counter tag in the subject attribute of the com_connect tag.

I want to use the contact form in an article list (one form for each article), but how do I make each form unique?

You can make each form unique by making one of its attribute values unique. See previous question for an example of how to do this with the subject attribute.

Send article: can I let people specify multiple recipients?

No. The ‘send article’ functionality is spammy enough as it is right now.

Send article: can I show the contact form without having to click a link first?

Sure, put this just above the com_connect tag:

<txp:php>$_GET['com_connect_send_article']='yes';</txp:php>

How can I use this form to upload files?

You can’t, but have a look at the ext_file_attach module, or mem_form plugins.

Can I use this plugin to send HTML email?

Yes.

Can I use this plugin to send newsletters?

Not without a plugin, such as mem_postmaster.

I have a question that’s not listed here

First read the plugin documentation (the page you’re on right now) once more. If that doesn’t answer your question, visit the Textpattern forum.

Authors/credits

• zem wrote the zem_contact 0.6 plugin on which this plugin was initially based.
• Mary completely revised the plugin code.
• Stuart turned it into a plugin, added a revised help text and additional code. Maintained all plugin versions until 4.0.3.17.
• wet added the com_connect_radio tag.
• Tranquillo added the anti-spam API and zem_contact_send_article functionality.
• aslsw66, jdykast and others provided additional code.
• Ruud cleaned up and audited the code to weed out bugs and completely revised the help text. Maintained all versions until 4.0.3.20.
• Bloke was the maintainer of v4.5.0.0.
• Adopted as a community plugin and now maintained by the core development team.
• Supported and tested to destruction by the Textpattern community. Many thanks to all additional contributors.