com_connect - form and contact mailer

jakob · 2026-01-01 16:35:07

jayrope wrote #342062:

Thank you, Jakob. I am not versed with patterns, or RegEx for that matter…

Most of the above is very simple. IIRC a regular term on a blank line also works, so it doesn’t need to be a regex expression. If you wrap the expression with two equal characters, e.g. /…/ then the expression will be processed. The rules above are:

[abc] = one of the contained letters, e.g either a, b, or c
(one|two|three) = one of the contained terms, e.g. either "one", "two", or "three"
\s = One or more spaces, tabs, etc.
? = with or without the preceding item, e.g. \s? = zero or more spaces
(something)? = with or without the preceding group

…and there are many more. regex101.com is a useful site and has a quick reference panel with more options.

Gallex · 2026-01-21 11:57:22

jakob wrote #342061:

And there’s another even more effective method which swaps out the form action after a time delay, causing automated bots which fill out forms quickly to land in nirvana while allowing regular (slower) people to submit the form.

Use the delay attribute to specify the number of seconds before it switches the form action and the action attribute to specify an alternative (e.g. throwaway) action target, followed by the real one. If it’s the same page as the form, just end the attribute with a comma. Both go in the initial txp:com_connect tag, for example:

delay="5-15" action="https://binit.domain.com/,"...

I found that to be most effective so far.

I also asked Claude AI for a good anti-spam solution and he suggested a so-called “honeypot” solution. Sorry if this solution is already integrated into the plugin.

Here’s a honeypot-only solution:

<script>
  // Wait 3 seconds before enabling the submit button
  setTimeout(function() {
    var submitBtn = document.getElementById('submit-btn');
    var hpField = document.getElementById('honeypot');

    // Enable button only if honeypot is empty
    if (submitBtn && hpField && hpField.value === "") {
      submitBtn.disabled = false;
      submitBtn.style.opacity = "1";
    }
  }, 3000);

  // Additional check: if bot fills the honeypot, lock the button immediately
  function checkBot(val) {
    var btn = document.getElementById('submit-btn');
    if (val !== "") {
      btn.disabled = true;
      btn.style.opacity = "0.5";
    }
  }
</script>

<style>
  #submit-btn {cursor: pointer;}
  #submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .v-hidden { position: absolute; left: -9999px; top: -9999px; visibility: hidden; }
</style>

<txp:com_connect
---
    <div class="v-hidden">
        <input type="text" name="website" id="honeypot" onchange="checkBot(this.value)" autocomplete="off" tabindex="-1">
    </div>
    <txp:com_connect_submit label="Send" id="submit-btn" disabled="disabled" />
</txp:com_connect>

This solution uses only a honeypot field (hidden from real users but visible to bots) plus a 3-second delay before enabling the submit button. No reCAPTCHA included.

Last edited by Gallex (2026-01-21 12:02:06)

phiw13 · 2026-01-23 00:44:05

Gallex wrote #342326:

This solution uses only a honeypot field (hidden from real users but visible to bots) plus a 3-second delay before enabling the submit button. No reCAPTCHA included.

That is basically the same honeypot solution as is build in the plugin with the delay attribute and some invisible (hidden) field.

The possible advantage of yours is that it would work with some strict CSP that requires nonces and limits inline script blocks, which is where the latest versions of com_connect fail (issue).

Bloke · 2026-01-23 01:06:08

Ack, thanks for the nudge on that CSP issue. I’ll see if it can be solved.

bici · Today 15:50:38

I am having a devil of a time in installing a contact page that is styled with css and that is safe against bots etc.

But in the meantime–– is this instruction correct?

The simplest form is shown below:

 <txp:com_connect to="recipient@example.com" />

To specify fields explicitly, use something like this:

  <txp:com_connect to="recipient@example.com">
    <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="recipient@example.com" form="my-contact-form" />

that last line doesn’t work for me––but this does :

<txp:output_form form="contact_form" />

So are the instructions incorrect or if not, they seem ambiguous….

As for trying to add a styled form and bot safe that is proving challenging. I tried for hours just to style the submit button without any luck.
Why not included a fully documented working example, where all one has to do is change the css styles and use their own email?

jakob · Today 17:05:47

Hi Walter. In its simplest form that should work as you showed:

Make sure you have the most recent version of the plugin from the releases page on GitHub if you are on Textpattern 4.9
Grab com_connect_v4.9.0.txt from that page.
Copy the plugin and install on your site.
Make sure you have activated it.

I tried the first snippet you showed above on the demo site and it worked immediately. The styling is still quite basic but it is a starting point. It adds a br between the label and input as standard, but if you add

.comConnectForm input, 
.comConnectForm textarea {
    display: block;
    margin-block-end: 1rem;
}

you already get passable output.

Obviously, you can go much further here with form styling or markup. Kevin Powell has a nice video on Form Styling Essentials (YouTube) by way of example.

bici wrote #343013:

The simplest form is shown below:...

that last line doesn’t work for me––but this does :

<txp:output_form form="contact_form" />...

This depends on what you have in your contact_form. This combination works:

<txp:com_connect to="recipient@example.com" form="my-contact-form" />

when my-contact-form contains:

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

Note there is no wrapping com_connect tag in the form here, just what is inside … i.e. the tags that output the forms and labels. Using txp:output_form with this won’t work because you would have no wrapping html form and no specified email recipient.

If, on the other hand, you’ve placed the entire block of code above including the wrapping com_connect tag in a contact_form form, then calling the entire block with output_form works. That’s just normal txp output.

You will need to test sending with your host. The email it sends from is what you have in your settings under Admin. Some hosts have stricter requirements, especially nowadays, others will happily send if the email is valid. Ask here again if you have no luck.

Spam protection methods vary. The honeypot method using pap_contact_cleaner is rather basic and works only for the simplest method. The newer method using delay works better in my view. See the 4.9 instructions for more details.

Contact forms come in so many different shapes and sizes that there is no single simple tutorial. But, like you suggested, it would be good to have one or two examples on textpattern.tips.

Textpattern CMS

Textpattern CMS support forum

#511 2026-01-01 16:35:07

Re: com_connect - form and contact mailer

jayrope wrote #342062:

#512 2026-01-21 11:57:22

Re: com_connect - form and contact mailer

jakob wrote #342061:

#513 2026-01-23 00:44:05

Re: com_connect - form and contact mailer

Gallex wrote #342326:

#514 2026-01-23 01:06:08

Re: com_connect - form and contact mailer

#515 Today 15:50:38

Re: com_connect - form and contact mailer

#516 Today 17:05:47

Re: com_connect - form and contact mailer

bici wrote #343013:

Board footer