com_connect - form and contact mailer

Kjeld · 2021-03-20 03:38:17

jstubbs wrote #306930:

Not sure if this has been answered before as a search did not bring results – I was wondering if its possible to style the label tag separately?

Example:

<txp:com_connect_text label="Name" required="1" break="" class="someclass anotherclass yetanotherclass" placeholder="Enter your name" />...

Using the above results in the class names being applied to both the label and input tags.. I’d like to style them differently..

This comment is from September 2017, but the issue remains.

I am using Bootstrap, so had to come up with a solution.

This solution might be helpful for other people using Bootstrap and com_connect:

This is what my contact form looks like:

This is the code in the contact output_form:

<!-- START CONTACT uses etc_query to remove class from label -->
<div class="row g-2 my-5 fs-6">
  <div class="col-md-6 form-floating">
    <txp:etc_query data='<txp:com_connect_text label="First Name *" class="form-control" break="" label_position="after" placeholder="First Name *" />' replace="//label@@class"/>
  </div>
  <div class="col-md-6 form-floating">
    <txp:etc_query data='<txp:com_connect_text label="Last Name *" class="form-control" break="" label_position="after" placeholder="Last Name *" />' replace="//label@@class"/>
  </div>

  <div class="col-md-6 form-floating">
    <txp:etc_query data='<txp:com_connect_email label="Email *" class="form-control" break="" label_position="after" placeholder="Email *" />' replace="//label@@class"/>
  </div>
  <div class="col-md-6 form-floating">
    <txp:etc_query data='<txp:com_connect_text type="tel" label="Phone" class="form-control" break="" label_position="after" placeholder="Phone" required="0" />' replace="//label@@class"/>
  </div>

  <div class="col-md-6 form-floating">
    <txp:etc_query data='<txp:com_connect_text label="Company or Organization" class="form-control" break="" label_position="after" placeholder="Company or Organization" required="0" />' replace="//label@@class"/>
  </div>
  <div class="col-md-6 form-floating">
    <txp:etc_query data='<txp:com_connect_text label="Image Number" class="form-control" break="" label_position="after" placeholder="Image Number" required="0" />' replace="//label@@class"/>
  </div>

  <div class="col-md-12 form-floating">
    <txp:etc_query data='<txp:com_connect_textarea label="Message *" class="form-control" break="" label_position="after" placeholder="Message *" />' replace="//label@@class"/>
  </div>

  <div class="col-12">
    <txp:com_connect_submit label="Send" class="btn btn-primary" />
  </div>

</div>
<!-- /END CONTACT -->

This sample is specifically for Bootstrap’s floating labels where the labels are inside the input forms. But the basic method will work for any situation where you want to remove the class from the label tag.

The com_connect tag is inside the etc_query tag:

<txp:etc_query data='<txp:com_connect_text label="First Name *" class="form-control" break="" label_position="after" placeholder="First Name *" />' replace="//label@@class"/>

This part removes the class from the label tag:

replace="//label@@class"

If you want to replace the label tag class with another class, use this instead (as suggested by etc):

replace="//label@@class=labelclass;//input@@class=anotherclass"

Plugins used: com_connect and etc_query

Last edited by Kjeld (2021-06-18 06:43:05)

Bloke · 2021-03-20 08:52:30

Not sure I get the issue. Are you saying that with bootstrap it’s not possible to target the label independently in CSS via something like: .com_connect_form label.class_name?

If not, it might be a specificity issue, so maybe we need to look into a solution in the plugin to apply the class to one or both elements.

Kjeld · 2021-03-20 11:58:12

Bloke wrote #329373:

Not sure I get the issue. Are you saying that with bootstrap it’s not possible to target the label independently in CSS via something like: .com_connect_form label.class_name?

If not, it might be a specificity issue, so maybe we need to look into a solution in the plugin to apply the class to one or both elements.

Well, one could.

But these are all of the Bootstrap css declarations for the class .form-floating:

.form-floating {
  position: relative;
}
.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  padding: 1rem 0.75rem;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    transition: none;
  }
}
.form-floating > .form-control::-webkit-input-placeholder {
  color: transparent;
}
.form-floating > .form-control::-moz-placeholder {
  color: transparent;
}
.form-floating > .form-control::placeholder {
  color: transparent;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:-webkit-autofill ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

It is an awful lot easier to just remove the class from the label than to create appropriate target classes…

Bloke · 2021-03-20 14:02:17

Okay. I’m still not sure what you want the plugin to do differently.

No classes on the label at all? In which case, since the label sometimes precedes the element, what facilities should there be to allow people who do want to style them easily without resortiong to multiple sibling selectors?
A different class on the label to the element (what class names would work best?)
Additional classes on the label and element so they can be more easily targeted with compound selectors (e.g. .comText.comElement and .comText.comLabel)?
No classes at all so that bootstrap can take over more easily?
Something else…?

Kjeld · 2021-03-20 15:08:18

Bloke wrote #329379:

Okay. I’m still not sure what you want the plugin to do differently.

No classes on the label at all? In which case, since the label sometimes precedes the element, what facilities should there be to allow people who do want to style them easily without resortiong to multiple sibling selectors?

A different class on the label to the element (what class names would work best?)

Additional classes on the label and element so they can be more easily targeted with compound selectors (e.g. .comText.comElement and .comText.comLabel)?

No classes at all so that bootstrap can take over more easily?

Something else…?

Actually, I am fine. etc_query solves the problem perfectly. I posted the manual thinking it may help someone else.

But if you are planning to make a change, I think the following would be most user-friendly:

The label doesn’t automatically take the class used for input as is now the case
The user can choose whether the label gets a class or not (labelclass=”“)

phiw13 · 2021-03-21 11:58:04

Kjeld wrote #329380:

The label doesn’t automatically take the class used for input as is now the case

The user can choose whether the label gets a class or not (labelclass=”“)

I would be quite in favour of options for separate classes for <label /> and <input />, except eventually the error classes for when you don’t rely on browsers build-in validation.

mrdale · 2021-06-16 22:48:16

Has anyone created a plugin to support HTML formatted emails?

Bloke · 2021-06-18 12:05:14

mrdale wrote #330517:

Has anyone created a plugin to support HTML formatted emails?

Yes. com_connect can now do it natively.

Usage is within the body_form attribute. If you use that, you can now format your text in chunks – one plaintext, one HTML – and the plugin will stitch them into a single message. Recipients can then toggle between HTML or Text view.

Example body_form:

<com::connect_mime type="text" />

<com::connect_fields break="">
<com::connect_label />: <com::connect_value />
</com::connect_fields>

<com::connect_mime type="html" />

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
<tr>
...
</tr>
<tr>
<td colspan="2" style="padding:10px 0">
<com::connect_fields wraptag="ul" break="li">
   <com::connect_label /> = <com::connect_value />
</com::connect_fields>
</td>
</tr>
</table>

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

Note also the other new tag <txp:com_connect_fields>. This is an iterator to allow you to step over the submitted fields, which is very useful inside your body_form.

If you don’t supply a list of fields in the name or label attributes, it’ll step over all of the fields in your form. Otherwise, it’ll only pluck out the selected items and process them inside the tag’s container.

Inside the container, if you use <txp:com_connect_label> or <txp:com_connect_value> without a name/label attribute, you’ll access the ‘current’ item in the loop and can thus display it any way you wish. Usual attributes wraptag, break and class are supported in the <txp:com_connect_fields> tag.

In addition, <txp:com_connect_select> can now take a multiple attribute allowing people to pick a set of <txp:com_connect_option> items. To facilitate displaying the individually selected items in the email (plaintext or html), <txp:com_connect_value> supports wraptag, break and class. Default: break=", ".

I’ll add plugin docs and examples later today, then consider issuing a beta. You can still test it now by uploading the .php file from GitHub into recent Textpattern versions.

Please play with this and test it with as many different scenarios as you can to check nothing’s stuffed up, and report any breakage here so I can fix it.

Hope this is a useful update.

EDIT: a possible future enhancement is to support form as well as container content in the <txp:com_connect_fields> tag.

Last edited by Bloke (2021-06-18 12:07:45)

mrdale · 2021-06-18 16:49:18

Bloke wrote #330560:

Yes. com_connect can now do it natively.

Champion!

jakob · 2021-06-19 13:20:35

In reply to mrdale #330561:

Yep, very nice! Thanks Stef!

trenc · 2021-07-26 16:20:17

Hi,

before I file an issue on Github I want to ask here. Since 4.8.7 (first detected) I found an odd behaviour in com_connect 4.6.0 with the default attribute in conjunction with break.:

<txp:com_connect to="name@example.com">
	<txp:com_connect_text break="" label="Test 1" default="14,40" />
	<txp:com_connect_text label="Test 2" default="14,40" />
</txp:com_connect>

Test 1 shows a text input with the value set to 1400 and the Test 2 value is set to 14,40.

Why is Test 1 escaped/sanitized? Does these attributes interfere with some new global attributes?
Or other: Can anybody confirm this behaviour?

I didn’t see any problems in the plugin code on the first sight. But maybe I’m just tired.

Tommy

Last edited by trenc (2021-07-26 16:21:51)

Bloke · 2021-07-26 16:22:47

Weird. I shall investigate. Thanks for the report.

Textpattern CMS

Textpattern CMS support forum

#289 2021-03-20 03:38:17

Re: com_connect - form and contact mailer

jstubbs wrote #306930:

This is what my contact form looks like:

This is the code in the contact output_form:

#290 2021-03-20 08:52:30

Re: com_connect - form and contact mailer

#291 2021-03-20 11:58:12

Re: com_connect - form and contact mailer

Bloke wrote #329373:

#292 2021-03-20 14:02:17

Re: com_connect - form and contact mailer

#293 2021-03-20 15:08:18

Re: com_connect - form and contact mailer

Bloke wrote #329379:

#294 2021-03-21 11:58:04

Re: com_connect - form and contact mailer

Kjeld wrote #329380:

#295 2021-06-16 22:48:16

Re: com_connect - form and contact mailer

#296 2021-06-18 12:05:14

Re: com_connect - form and contact mailer

mrdale wrote #330517:

#297 2021-06-18 16:49:18

Re: com_connect - form and contact mailer

Bloke wrote #330560:

#298 2021-06-19 13:20:35

Re: com_connect - form and contact mailer

In reply to mrdale #330561:

#299 2021-07-26 16:20:17

Re: com_connect - form and contact mailer

#300 2021-07-26 16:22:47

Re: com_connect - form and contact mailer

Board footer