Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 453
Website

Re: com_connect - form and contact mailer

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"

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


Old Photos of Japan – Japan in the 1850s~1960s (100% txp)
MeijiShowa – Stock photos of Japan in the 1850s~1960s (100% txp)
JapaneseStreets.com – Japanese street fashion (mostly txp)

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,468
Website GitHub

Re: com_connect - form and contact mailer

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

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

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 453
Website

Re: com_connect - form and contact mailer

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…


Old Photos of Japan – Japan in the 1850s~1960s (100% txp)
MeijiShowa – Stock photos of Japan in the 1850s~1960s (100% txp)
JapaneseStreets.com – Japanese street fashion (mostly txp)

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,468
Website GitHub

Re: com_connect - form and contact mailer

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

  1. 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?
  2. A different class on the label to the element (what class names would work best?)
  3. Additional classes on the label and element so they can be more easily targeted with compound selectors (e.g. .comText.comElement and .comText.comLabel)?
  4. No classes at all so that bootstrap can take over more easily?
  5. Something else…?

The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

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

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 453
Website

Re: com_connect - form and contact mailer

Bloke wrote #329379:

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

  1. 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?
  2. A different class on the label to the element (what class names would work best?)
  3. Additional classes on the label and element so they can be more easily targeted with compound selectors (e.g. .comText.comElement and .comText.comLabel)?
  4. No classes at all so that bootstrap can take over more easily?
  5. 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:

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

Old Photos of Japan – Japan in the 1850s~1960s (100% txp)
MeijiShowa – Stock photos of Japan in the 1850s~1960s (100% txp)
JapaneseStreets.com – Japanese street fashion (mostly txp)

Offline

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

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,220
Website

Re: com_connect - form and contact mailer

Kjeld wrote #329380:

  1. The label doesn’t automatically take the class used for input as is now the case
  2. 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.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

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

mrdale
Member
From: Walla Walla
Registered: 2004-11-19
Posts: 2,215
Website

Re: com_connect - form and contact mailer

Has anyone created a plugin to support HTML formatted emails?

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,468
Website GitHub

Re: com_connect - form and contact mailer

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)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

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

mrdale
Member
From: Walla Walla
Registered: 2004-11-19
Posts: 2,215
Website

Re: com_connect - form and contact mailer

Bloke wrote #330560:

Yes. com_connect can now do it natively.

Champion!

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,742
Website

Re: com_connect - form and contact mailer

In reply to mrdale #330561:

Yep, very nice! Thanks Stef!


TXP Builders – finely-crafted code, design and txp

Offline

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

trenc
Plugin Author
From: ⛵️, currently Göteborg, SE
Registered: 2008-02-27
Posts: 574
Website GitHub

Re: com_connect - form and contact mailer

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)


Digital nomad, sailing the world on a sailboat: 32fthome.com

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,468
Website GitHub

Re: com_connect - form and contact mailer

Weird. I shall investigate. Thanks for the report.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

Board footer

Powered by FluxBB