h1. com_connect

h2. Contents

"Introduction":#introduction
"Installing and upgrading":#install
"Migrating from zem_contact_reborn":#differences
"Usage":#usage
"Tags":#tags "com_connect tag":#cc "com_connect_text tag":#cc_text "com_connect_email tag":#cc_email "com_connect_textarea tag":#cc_textarea "com_connect_submit tag":#cc_submit "com_connect_select tag":#cc_select "com_connect_option tag":#cc_option "com_connect_checkbox tag":#cc_checkbox "com_connect_radio tag":#cc_radio "com_connect_secret tag":#cc_secret "com_connect_serverinfo tag":#cc_serverinfo "com_connect_send_article tag":#cc_send_article "com_connect_mime tag":#cc_mime "com_connect_fields tag":#cc_fields "com_connect_label tag":#cc_label "com_connect_value tag":#cc_value ** "com_connect_if tag":#cc_if
"Advanced examples":#advanced "Separate input and error forms":#advanced1 "User selectable subject field":#advanced2 ** "User selectable recipient, without showing email address":#advanced3
"Styling":#styling
"Plugin API and callback events":#api
"Frequently asked questions":#faq
"Authors/credits":#credits

h2(#introduction). Introduction

A Textpattern CMS form mailer plugin. @@ 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":https://github.com/textpattern/com_connect/issues.

h3. 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 @@, @@ and @
@ 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.

h3. History

Please see the "changelog on GitHub":https://github.com/textpattern/com_connect/blob/main/CHANGELOG.textile.

h2(#install). Installing and upgrading

Requires Textpattern 4.7.0+

Download the latest release of the plugin from "the GitHub project page":https://github.com/textpattern/com_connect/releases, paste the code into the Textpattern Admin>Plugins panel, install and enable the plugin. Visit the "forum thread":https://forum.textpattern.io/viewtopic.php?id=47913 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":https://getcomposer.org:

bc(language-bash). $ composer require textpattern/com_connect:*

h2(#differences). 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 @@ tag.

h2(#usage). Usage

h3. Contact form

The simplest form is shown below, which produces a default form with 'Name', 'Email' and 'Message' fields. Email will be delivered to code>recipient@example.com</code, with the user's supplied email as the @From:@ address.

bc(language-markup).

To specify fields explicitly, use something like this:

bc(language-markup).

<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:

bc(language-markup).

h3. 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:

@com_connect@, to create a form that is initially hidden by setting the @send_article@ attribute.

@com_connect_send_article@, to create a 'Send article' link which reveals the aforementioned form when clicked.

bc(language-markup).

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:

Set the @send_article@ attribute to @1@ in the @com_connect@ tag.

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

bc(language-markup)..

<txp:com_connect_email label="Your Email" />
<txp:com_connect_submit label="Send Article" />

</txp:com_connect>

h2(#tags). Tags

@@ 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>@ container tag or in a Textpattern form used as the @form@ attribute in the @@ 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 @@ 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.

h3(#cc). com_connect tag

bc(language-markup).

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.

h4. 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 @@ 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 @@ 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"@ %(warning)required% : Recipient email address. Multiple recipients can be specified, separated by commas. ; @to_form="form name"@ : Use specified form (overrides @to@ attribute).

h4. Examples

h5. 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 code>recipient@example.com</code, with the user's supplied email as the @From:@ address:

bc(language-markup).

h5. Example 2: Building a custom form container

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

bc(language-markup).

<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>

h5. Example 3: Custom message formatting

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

bc(language-markup).

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

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

: Mr. Nobody wrote: Nothing much :( ============ h5. 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: bc(language-markup). Use the @body_form@ form template named @message-formatting@ as follows, and note the @@ 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. bc.. ============ Fields submitted: :

============ h3(#cc_text). com_connect_text tag bc(language-markup). Creates a text @@ field and corresponding @@ tag. The input value will be included in the email, preceded by the label. h4. 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 @@ and @@ field. Default is @
@. 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 @

@ 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 @@ 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 @@ 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 @@ 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 @@ 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 @@ tag's @required@ attribute - if neither attribute is set then default is @1@. ; @size="value"@
The size, in characters, of the @@ 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@ h4. Examples h5. Example 1: Text input box bc(language-markup). h5. Example 2: Range slider bc(language-markup). h5. Example 3: Telephone input with validation Create a telephone field with a "validation pattern for UK telephone number":http://html5pattern.com/Phones format: bc(language-markup). h3(#cc_email). com_connect_email tag bc(language-markup). @@ field for user's email address. The entered email address will automatically be validated to make sure it is of the form "abc@xxx.yyy[.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. h4. 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 @@ and @@ field. Default is @
@. 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 @@ 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 @@ 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 @@ tag. ; @placeholder="text"@ : Text to show as a guide, when the @@ 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 @@ 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 @@ field. h4. Examples h5. Example 1: Standard email field bc(language-markup). h3(#cc_textarea). com_connect_textarea tag bc(language-markup). Creates a @

h4. 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"@<br/>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.

h4. Examples

h5. Example 1: Standard textarea

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

bc(language-markup). <txp:com_connect_textarea cols="40" rows="10" label="Your question" />

h3(#cc_submit). com_connect_submit tag

bc(language-markup). <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.

h4. 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@.

h4. Examples

h5. Example 1: Standard submit button

bc(language-markup). <txp:com_connect_submit />

h5. Example 2: Submit button with custom text

bc(language-markup). <txp:com_connect_submit label="To the moooon" />

h5. Example 3:  Usage as a container tag

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

bc(language-markup). <txp:com_connect_submit><strong>Send</strong> question</txp:com_connect_submit>

h5. Example 4: Image button

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

bc(language-markup). <txp:com_connect_submit>
    <img referrerpolicy="no-referrer" src="https://github.com/textpattern/com_connect/raw/main/path/to/img.png" alt="submit">
</txp:com_connect_submit>

h3(#cc_select). com_connect_select tag

bc(language-markup). <txp:com_connect_select />

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

h4. 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).

h4. Examples

h5. 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.

bc(language-markup). <txp:com_connect_select label="Department" options="{Choose dept},Marketing,Sales,Support" />

h5. Example 2: Using the com_connect option tag

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

bc(language-markup). <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.

h5. Example 3: Multiple select

bc(language-markup). <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>

h3(#cc_option). com_connect_option tag

bc(language-markup). <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.

h4. 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"@ %(warning)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.

h5. Example 1: Drop-down select list containing three options

bc(language-markup). <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>

h5. Example 2: Pass different values instead of label

'Sales' is selected by default.

bc(language-markup). <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>

h3(#cc_checkbox). com_connect_checkbox tag

bc(language-markup). <txp:com_connect_checkbox />

Creates a checkbox.

h4. 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.

h4. Examples

h5. Example 1: Accept terms of service

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

bc(language-markup). <txp:com_connect_checkbox label="I accept the terms and conditions" />

h5. Example 2: Optional checkboxes

bc(language-markup). 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" />

h3(#cc_radio). com_connect_radio tag

bc(language-markup). <txp:com_connect_radio />

Creates a radio button.

h4. 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"@ %(warning)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"@ %(warning)required%
: Text label displayed to the user as radio button option.
; @name="value"@ %(warning)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.

h4. Examples

h5. 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.

bc(language-markup). <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" />

h3(#cc_secret). com_connect_secret tag

bc(language-markup). <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.

h4. 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.

h4. Examples

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

bc(language-markup). <txp:com_connect_secret value="The answer is 42" />

h5. Example 2: As a container tag

bc(language-markup). <txp:com_connect_secret label="Dear user">
    Please provide a useful example for this tag!
</txp:com_connect_secret>

h3(#cc_serverinfo). com_connect_serverinfo tag

bc(language-markup). <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.

h4. Attributes

; @label="text"@
: Used to identify the field in the email. Defaults to the value of the @name@ attribute.
; @name="value"@ %(warning)required%
: Name of the server variable. See the "PHP manual":https://php.net/manual/reserved.variables.php#reserved.variables.server for a full list.

h4. Examples

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

bc(language-markup). <txp:com_connect_serverinfo name="REMOTE_ADDR" label="IP number" />

h5. Example 2: Add the name of the visitor's browser to the email

bc(language-markup). <txp:com_connect_serverinfo name="HTTP_USER_AGENT" label="Browser" />

h3(#cc_send_article). com_connect_send_article tag

bc(language-markup). <txp:com_connect_send_article />

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

h4. Attributes

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

h4. Examples

h5. Example 1: On an article form

bc(language-markup). <txp:com_connect_send_article linktext="Send this article" />

h3(#cc_fields). com_connect_fields tag

bc(language-markup). <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.

h4. 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.

h4. Examples

h5. Example 1: Create an unordered list of submitted fields

bc(language-markup). <txp:com_connect_fields wraptag="ul" break="li">
   <txp:com_connect_label /> = <txp:com_connect_value />
</txp:com_connect_fields>

h3(#cc_mime). com_connect_mime tag

bc(language-markup). <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.

h4. 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).

h4. Examples

h5. Example 1: Plaintext and HTML body content

bc(language-markup). <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 <txp:com_connect_mime> 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.

h3(#cc_label). com_connect_label tag

bc(language-markup). <txp:com_connect_label />

Return the label for the given attribute name.

h4. 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.

h3(#cc_value). com_connect_value tag

bc(language-markup). <txp:com_connect_value />

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

h4. 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.

h3(#cc_if). com_connect_if tag

bc(language-markup). <txp:com_connect_if />

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

h4. 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.

h4. Examples

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

bc(language-markup). <txp:com_connect_if name="delivery" value="courier">
   <txp:com_connect_label name="delivery" />: <txp:com_connect_value name="delivery" />
</txp:com_connect_if>.

h2(#advanced). Advanced examples

h3(#advanced1). 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).

bc(language-markup). <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.

h3(#advanced2). User selectable subject field

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

bc(language-markup). <txp:com_connect to="you@example.com" 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:

bc(language-markup). <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:

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

h3(#advanced3). User selectable recipient, without showing email address

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

bc(language-markup). <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:

bc(language-markup). <txp:php>
    global $com_connect_form;
    switch($com_connect_form['Department'][0])
    {
        case 'Support':
            echo 'crew@example.com';
            break;
        case 'Sales':
            echo 'showmethemoney@example.com';
            break;
        default:
            echo 'someone@example.com';
    }
</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@.

p(alert-block warning). *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!

h2(#styling). 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:

# 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.
# @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.
# 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.

h2(#api). 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:

bc(language-php).. // 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);

p. 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.

h4. Examples

bc(language-php).. 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;
}

p. 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.

h2(#faq). Frequently asked questions

h5. 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.

h5. 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.

h5. 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.

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

Try using the "rvm_counter":http://vanmelick.com/txp tag in the @subject@ attribute of the @com_connect@ tag.

h5. 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.

h5. Send article: can I let people specify multiple recipients?

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

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

Sure, put this just above the @com_connect@ tag:

bc(language-markup). <txp:php>$_GET['com_connect_send_article']='yes';</txp:php>

h5. How can I use this form to upload files?

You can't, but have a look at the "ext_file_attach":https://github.com/Bloke/ext_file_attach/releases/ module, or "mem_form":https://bitbucket.org/Manfre/txp-plugins/downloads/ plugins.

h5. Can I use this plugin to send HTML email?

Yes.

h5. Can I use this plugin to send newsletters?

Not without a plugin, such as "mem_postmaster":https://bitbucket.org/Manfre/txp-plugins/downloads/.

h5. 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":https://forum.textpattern.io.

h2. 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":https://github.com/textpattern/com_connect/graphs/contributors.</div>
    </div>

<div class="footer">
        <ul class="body">
            <li>© <script>
                    document.write(new Date().getFullYear())
                </script> Githubissues.</li>
            <li>Githubissues is a development platform for aggregating issues.</li>
        </ul>
    </div>

</html>

textpattern / com_connect

readme

@com_connect@, to create a form that is initially hidden by setting the @send_article@ attribute.

@com_connect_send_article@, to create a 'Send article' link which reveals the aforementioned form when clicked.

Set the @send_article@ attribute to @1@ in the @com_connect@ tag.

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