com_connect - form and contact mailer

jakob · 2018-04-05 14:12:07

Hi Destry,

1) Just leave them out or use break="" to suppress the br.

2) Not all browsers allow styling of dropdown options. There are various more or less convoluted tricks out there to get around it, including restyling the widget as a regular ul-li dropdown. It’s debatable how much it’s worth it, especially on mobile.

3) That’s very likely. If you google you’ll find numerous different ways of catching outgoing email when using MAMP. Usually, I simply try that online, though.

4) Good question. Someone else needs to answer that.

Bloke · 2018-04-05 14:20:16

Destry wrote #310660:

the input and label elements are surrounded with <br> tags. Is that really needed?

Not if you don’t want it. Add break="". It defaults to break="br" for legacy reasons (and because that’s what most people use… 80:20 rule).

For the life of me I can’t seem to get any style affect on the .comSelect option elements.

It’s browser specific. Tricky. You can apply it to the entire .comSelect but that also affects the label so you’d need to override that if you can. A general solution is to wrap the options in an <optgroup> but even that seems to have been killed off by some browser (Chrome be damned).

Another solution involves wrapping the entire lot in a label but you’ll need to fudge that by hand and tell com_connect not to use a label on the select (use name="some-label" label="" instead).

I’m not getting emails on form tests, though it does seem to be functioning otherwise. I’m guessing this is because I’m testing locally and I don’t have any kind of email server setup?

Correct. Check your server logs and you’ll probably see it trying to deliver and failing or, more likely, delivering to your root@localhost account.

use a protonmail address in the SMTP Txp preference?

You can set the sender envelope, yes, and com_connect will pick it up and use it. Whether that fixes anything is open to interpretation. Roll on when we can put third party SMTP support in Txp!

EDIT: jakob was faster.

Last edited by Bloke (2018-04-05 14:23:41)

jakob · 2018-04-06 09:36:08

Destry wrote #310660:

3) I’m not getting emails on form tests, though it does seem to be functioning otherwise. I’m guessing this is because I’m testing locally and I don’t have any kind of email server setup?

As this is something I’ve often wondered about, I had a quick look if there is an easier way … and there is, at least when you use MAMP or better MAMP Pro on a Mac. I think that’s what you’re using. Here’s a quick how-to if that meets your requirements. It uses Mailhog to allow you to view local outgoing email in a web UI and Homebrew for installing.

Instructions for: MAMP / MAMP Pro on a Mac

1. Open the Terminal on the Mac.

2. If you’ve already used homebrew to install packages via the Terminal, check that it’s up to date with

$ brew update

then proceed directly to the next step (the $ is just the prompt, don’t enter that).

If you don’t have it installed, follow the instructions on the homebrew homepage. It pretty much runs through everything on its own.

If you’re an infrequent Homebrew user (like I am), and you get error messages, you may first need to troubleshoot Homebrew. I hadn’t used it since upgrading to High Sierra and had to reinstall Homebrew first to get it operational.

3. Install Mailhog with:

$ brew install mailhog

4. Set MailHog to start when macOS boots.

$ brew services start mailhog

Now you can access MailHog at its default location: http://127.0.0.1:8025/. You may want to bookmark that in your browser for yourself for future use.

5. In MAMP Pro, switch to ‘Postfix’ in the left-hand menu, and enter:

Set domain name of outgoing e-mails to: {yourdomain.tld}
Check ‘Use a smart host for routing’
Server name: localhost:1025
Authentication: none

If you wish, you can set “Include Postfix service in Groupstart” so that it starts along with Apache, PHP and MySQL when you start the MAMP Server.

That’s it!

To test, call up your local test domain and add a new Textpattern user (that sends out an email from Textpattern). Visit the Mailhog window and you should see a new email (sometimes it takes a short while, sometimes it’s practically immediate):

——

If you’re using MAMP (not Pro), you need to manually add details to your php.ini and perhaps also your postfix config as described here and here.

Destry · 2018-04-06 16:25:21

That’s awesome research, Julian! You will make somebody happy, I’m sure. ;) I don’t use MAMP, however. I’ve always preferred the native tools, as much as possible. Sometimes I have to bump up php with Homebrew, so it’s really a game of half/half between Mac native and Homebrew things.

But, I have a different question. I’m using the contact form on a one-page website. I want to be able to use an anchor to link to the form from top of page, externally, or wherever. I’d rather not have to put a div around the form to add the id="" when either the form, fieldset, or legend elements would do just fine. There’s a class="comConnectForm" on the form element, but it needs to be an id for an anchor, doesn’t it? Is there a way with Txp or plugin tag magic?

Maybe Stef will throw one in to make things easier ;)

Destry · 2018-04-06 16:35:38

jakob wrote #310661:

Just leave them out or use break="" to suppress the br.

I must have missed that in the docs.

Where does it go, exactly? Once in the form tag or individually in each child tag? I’ll probably skip it because it looks okay now, but just curious.

Bloke · 2018-04-06 16:49:50

Destry wrote #310705:

I want to be able to use an anchor to link to the form

Unfortunately in this case, the form is given a random ID when you submit, so that it can automatically jump down to it and show the Thanks message (or highlight any errors that need fixing prior to submission). To add your own ID would kill that, hence the plugin doesn’t have that option.

I think an HTML wrapper tag is the only alternative unfortunately.

Destry wrote #310706:

Where does [the break tag] go, exactly?

It goes on each child element. There are shortcuts for the required and class attributes that can be added to the main <txp:com_connect> container and will be automatically passed to child tags (unless overridden on a tag-by-tag basis), but that doesn’t currently apply to break.

I thought about implementing it, but then the whole thing about break becoming a global attribute happened so I wasn’t sure if it was the best idea to hijack that in the plugin. Now that global attributes are a reality, this plugin probably needs to be tweaked to take advantage of them in a more consistent manner. Not sure how best to do that right now.

Destry · 2018-04-06 17:34:47

Thanks, brother.

Last thing, I think. Just a wording suggestion, really…

Maybe it’s just me, but on the confirmation messages, instead of…

Thank you, your message has been sent.

How about just…

Your message was sent successfully.

If somebody sends me spam, or a rant (it happens), I sure as hell don’t want to thank them for it. ;) Saying “thank you” is kind of irrelevant, like saying “Welcome” on a home page. It’s generally pointless.

And instead of…

The form was already submitted, please fill out a new form.

The form isn’t submitted, the message is. Shouldn’t it be something like…

Message was already sent. Fill out form again to send a new message.

colak · 2018-04-06 17:46:13

Hi Destry,

You can edit the confirmation message by using the thanks attribute:

<txp:com_connect to="e@domain.tld" label=""  thanks="Your message was sent successfully.">

Regarding your second point… I could not see any way to do it without hacking the plugin.

jakob · 2018-04-06 19:00:15

Destry wrote #310705:

That’s awesome research, Julian! You will make somebody happy, I’m sure. ;) I don’t use MAMP, however. I’ve always preferred the native tools, as much as possible. Sometimes I have to bump up php with Homebrew, so it’s really a game of half/half between Mac native and Homebrew things.

Untested, but this may be all you need to do differently to use Mailhog with macOS’ native PHP setup.

Destry · 2018-04-07 07:03:08

colak wrote #310713:

You can edit the confirmation message by using the thanks attribute.

Regarding your second point… I could not see any way to do it without hacking the plugin.

Good to know about the thanks attribute. (Why do I keep missing this stuff about attributes in the docs?)

But, if the default was better, it wouldn’t be necessary to override it with a big text string in the tag.

Maybe a suggestion for plugin advancement would be to put all feedback messages as plugin preferences (textarea fields, please). But then again, if the defaults are tight, I don’t need to change them.

Destry · 2018-04-07 07:11:43

jakob wrote #310715:

Untested, but this may be all you need to do differently to use Mailhog with macOS’ native PHP setup.

Thanks! I might give that a try when I have more time. I’ll report back if/when I do. This is the only form I would need it for, though. I’ll test live first and see what happens. ;)

Destry · 2018-04-07 07:18:14

I put this in my styles to add under the confirmation message because the disappearance of the form might confuse people if they, for whatever reason I can’t imagine, wanted to send another message. Are there other ways of handling it?

.comThanks p:after {
	content:'(If you need to send another message, close your browser tab and revisit this page.)';
	display: block;
	font-size: .75rem;
	margin-top: .5em;
}

But in any case, that might be a good reason to have feedback messages as preference fields; so you could edit whatever you wanted.

Update: Just discovered:

If I use the thanks="" attribute override. The CSS :after above doesn’t work anymore. Doesn’t display. Don’t know why not.
You can use emoji in the thanks="" attribute. ;)

Last edited by Destry (2018-04-07 07:46:36)

phiw13 · 2018-04-07 07:18:30

Destry wrote #310724:

But, if the default was better, it wouldn’t be necessary to override it with a big text string in the tag.

Default have (sometimes …) limits anyway. And if you want to improve the thanks message, you can also pull it from a TXP form, via the thanks_form="form name" attribute.

Maybe a suggestion for plugin advancement would be to put all feedback messages as plugin preferences (textarea fields, please).

Might be something yes. That would keep the contact form code easier to read.

Destry · 2018-04-07 07:29:46

Finally found where the attributes are listed. With the “Tags” descriptions, naturally. I will read a little more before my next dumb question.

Bloke · 2018-04-07 07:48:45

Destry wrote #310712:

“Your message was sent successfully.” … and… “Message was already sent. Fill out form again to send a new message.”

These are Textpack strings in the plugin so can be changed in your database if necessary. But I can change the default wording no problem. As colak says, the thanks message can be overridden in the tag, and as phiw13 says, you can specify a thanks_form if you really want to go to town. That might also solve your post-submission situation too as you can design the Form how you like.

You don’t necessarily have to tell people to refresh, btw. You can just offer a link to the same page URL without the #:

<a href="<txp:page_url />">Send another message</a>

Textpattern CMS support forum

#46 2018-04-05 14:12:07

Re: com_connect - form and contact mailer

#47 2018-04-05 14:20:16

Re: com_connect - form and contact mailer

Destry wrote #310660:

#48 2018-04-06 09:36:08

Re: com_connect - form and contact mailer

Destry wrote #310660:

#49 2018-04-06 16:25:21

Re: com_connect - form and contact mailer

#50 2018-04-06 16:35:38

Re: com_connect - form and contact mailer

jakob wrote #310661:

#51 2018-04-06 16:49:50

Re: com_connect - form and contact mailer

Destry wrote #310705:

Destry wrote #310706:

#52 2018-04-06 17:34:47

Re: com_connect - form and contact mailer

#53 2018-04-06 17:46:13

Re: com_connect - form and contact mailer

#54 2018-04-06 19:00:15

Re: com_connect - form and contact mailer

Destry wrote #310705:

#55 2018-04-07 07:03:08

Re: com_connect - form and contact mailer

colak wrote #310713:

#56 2018-04-07 07:11:43

Re: com_connect - form and contact mailer

jakob wrote #310715:

#57 2018-04-07 07:18:14

Re: com_connect - form and contact mailer

#58 2018-04-07 07:18:30

Re: com_connect - form and contact mailer

Destry wrote #310724:

#59 2018-04-07 07:29:46

Re: com_connect - form and contact mailer

#60 2018-04-07 07:48:45

Re: com_connect - form and contact mailer

Destry wrote #310712:

Board footer