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: 304
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 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-03-20 03:51:08)


JapaneseStreets.com – Japanese street fashion (mostly txp)
Old Photos of Japan – Japan between 1860 and 1940 (100% txp)
MeijiShowa – Stock photos of Japan between 1860 and 1940 (100% txp)

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,240
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: 304
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…


JapaneseStreets.com – Japanese street fashion (mostly txp)
Old Photos of Japan – Japan between 1860 and 1940 (100% txp)
MeijiShowa – Stock photos of Japan between 1860 and 1940 (100% txp)

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,240
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: 304
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=”“)

JapaneseStreets.com – Japanese street fashion (mostly txp)
Old Photos of Japan – Japan between 1860 and 1940 (100% txp)
MeijiShowa – Stock photos of Japan between 1860 and 1940 (100% txp)

Offline

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

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,335
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 ?

Offline

Board footer

Powered by FluxBB