com_connect - form and contact mailer

Gallex · 2018-10-05 09:20:05

discovered this at the end of a form (just before the closing form tag):

<div style="visibility: hidden">
<input id="phone" name="phone" type="text" value=""><br>
<input id="mail" name="mail" type="text" value=""></div>

where this could come from?? it adds extra 78px high space to my site! any ideas?

my form is common:

<txp:com_connect to="mar...@gmail.com" label="" subject="Message" thanks="Thank's" lang="en-gb">
<txp:com_connect_text label="Name" placeholder="" break="" />
<txp:com_connect_email name="email" type="email" label="E-mail" break="" />
<txp:com_connect_text type="tel" label="Phone" break="" />
<txp:com_connect_textarea rows="4" cols="15" label="Message" placeholder="" break="" />
<txp:com_connect_submit label="Send" />
</txp:com_connect>

i use the plugin together with pap_comconnect plugin

Bloke · 2018-10-05 09:25:47

Gallex wrote #314408:

discovered this at the end of a form (just before the closing form tag):

That’s pap_contact_cleaner’s anti-spam measures. If you don’t want it, uninstall the plugin :-)

jakob · 2018-10-05 09:35:49

And if you still want the plugin but want to get rid of the space it takes up, try setting the font-size and line-height of #phone and #mail to 0 and #phone + br to display:inline; (or something like that – I don’t remember exactly what was needed).

As far as I remember pap_contact_cleaner deliberately used visibility:hidden; and not display:none; so that the elements are not taken out of the DOM (where they might not be seen by spambots) but don’t show on screen. By zero-ing their height you can hide the space they take up.

colak · 2018-10-05 09:56:05

Bloke wrote #314409:

That’s pap_contact_cleaner’s anti-spam measures. If you don’t want it, uninstall the plugin :-)

Keep it:) It really helps!

Gallex · 2018-10-05 10:24:19

jakob wrote #314410:

And if you still want the plugin but want to get rid of the space it takes up, try setting the font-size and line-height of #phone and #mail to 0 and #phone + br to display:inline; (or something like that – I don’t remember exactly what was needed).

managed to reduce height to 38px

#phone,#mail{
margin:0;
padding:0;
line-height:0;
font-size:0;
height:0;
border:0;
}

#phone + br{
display:none;
}

inputs heights are zero now, but break tag… this still causes that extra height (in my opinion)

Bloke · 2018-10-05 15:27:01

Yes, it’s a shame the plugin outputs the <br> as there really isn’t any need. I guess it was trying to fit in with the rest of the tags which, by default, use a break. Someone (colak?) could hack that out and reissue the plugin maybe?

While I applaud its simplicity, it’s kind of a shame that there’s hard-coded stuff in it. If you have a field called mail or phone in your form, then things probably won’t work as expected.

If we can find some way to bring this kind of anti-spam functionality to the plugin that would be great. An example might be to add a tag to render a “hidden” field that is automatically wired up to the evaluator if used. Thus the act of adding:

<txp:com_connect_hidden name="phone" break="" />
<txp:com_connect_hidden name="email" break=""/>

to your form would do exactly the same as pap_contact_cleaner. Added benefit: you can customize the hidden fields.

There is already a hidden attribute – I’ve not used it – but it only controls the visibility of the element not whether it triggers a spam check or not.

Another possibility: introduce a global attribute in all com_connect input tags that can be used to signal that the tag is to trigger some kind of special action on submit:

<txp:com_connect_text name="phone" break="" trigger="spam" />
<txp:com_connect_text name="email" break="" trigger="spam" />

If we added a callback on that action as well then anyone could augment or alter the built-in triggers to do all manner of processing on submission – insert in database, validate something in a custom way, communicate with a device on the Internet of Things, whatever.

Not thought it through yet. Ideas welcome.

phiw13 · 2018-10-06 00:39:40

Bloke wrote #314418:

If we can find some way to bring this kind of anti-spam functionality to the plugin that would be great. An example might be to add a tag to render a “hidden” field that is automatically wired up to the evaluator if used. Thus the act of adding:

<txp:com_connect_hidden name="phone" break="" />...

to your form would do exactly the same as pap_contact_cleaner. Added benefit: you can customize the hidden fields.

There is already a hidden attribute – I’ve not used it – but it only controls the visibility of the element not whether it triggers a spam check or not.

You don’t want to use the hidden attribute in this case, as that would hide de element from spambots as well, afaik. A class .hidden or .com-hidden could be used instead, possibly applied to the a wrapper div.

.com-hidden {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

@ Gallex

try this:

[style^=visibility] {
  height: 0;
  overflow: hidden;
}

edit for typo :-(

Last edited by phiw13 (2018-10-06 11:48:02)

Gallex · 2018-10-06 07:12:31

phiw13 wrote #314431:

@ Gallex

try this:

[style^=visiblity] {...

no, didn’t help. my page – if you would like to see by yourself

Last edited by Gallex (2018-10-06 07:13:07)

phiw13 · 2018-10-06 07:28:09

Gallex wrote #314436:

no, didn’t help. my page – if you would like to see by yourself

Oh it does help. The thing is, you are in a flexbox context, and the bottom of your right-hand column (inside the@<div class=“tulband-2” />@) creates lots of white-space at the bottom. .tulbad-2 > div has a margin-bottom:3%, there is an empty span there, …

Gallex · 2018-10-06 07:47:44

phiw13 wrote #314437:

Oh it does help. The thing is, you are in a flexbox context, and the bottom of your right-hand column (inside the@<div class=“tulband-2” />@) creates lots of white-space at the bottom. .tulbad-2 > div has a margin-bottom:3%, there is an empty span there, …

yes, that 3% adds also a little more extra space to the end of flexbox-2, but, the fact is – there is still a div with dimensions 344×38px.
and here ,there i use your suggestion also

phiw13 · 2018-10-06 08:35:08

Gallex wrote #314439:

and here ,there i use your suggestion also

I don’t see anything in the webkit inspector indicating that you use the code I noted above.

maybe try a little more specific (quotes are optional)?

 div[style^="visibility"] {}

Gallex · 2018-10-06 09:12:30

phiw13 wrote #314440:

I don’t see anything in the webkit inspector indicating that you use the code I noted above.

maybe try a little more specific (quotes are optional)?

div[style^="visibility"] {}...

aaa, there was a typo in your first code – visiblity – “i” is missing. ;) i copy-pasted your first code. it’s working now, thank’s!

Textpattern CMS

Textpattern CMS support forum

#109 2018-10-05 09:20:05

Re: com_connect - form and contact mailer

#110 2018-10-05 09:25:47

Re: com_connect - form and contact mailer

Gallex wrote #314408:

#111 2018-10-05 09:35:49

Re: com_connect - form and contact mailer

#112 2018-10-05 09:56:05

Re: com_connect - form and contact mailer

Bloke wrote #314409:

#113 2018-10-05 10:24:19

Re: com_connect - form and contact mailer

jakob wrote #314410:

#114 2018-10-05 15:27:01

Re: com_connect - form and contact mailer

#115 2018-10-06 00:39:40

Re: com_connect - form and contact mailer

Bloke wrote #314418:

#116 2018-10-06 07:12:31

Re: com_connect - form and contact mailer

phiw13 wrote #314431:

#117 2018-10-06 07:28:09

Re: com_connect - form and contact mailer

Gallex wrote #314436:

#118 2018-10-06 07:47:44

Re: com_connect - form and contact mailer

phiw13 wrote #314437:

#119 2018-10-06 08:35:08

Re: com_connect - form and contact mailer

Gallex wrote #314439:

#120 2018-10-06 09:12:30

Re: com_connect - form and contact mailer

phiw13 wrote #314440:

Board footer