Request: Add class name to form instruction text

Hi snappyhappyme,

Please see the contact form documentation, Installing a WordPress Contact Form on Your Site.

Please notice this note about the form:

What the Contact Form feature IS: A simple drop-in contact form for a contact page that won’t get spammed.
What the Contact Form feature is NOT: A configurable and full-featured plugin like some other contact form plugins out there.
Note: Please do not request new features for the built-in contact form, as the main focus of the plugin is spam protection. Thank you.

Regarding your first request about adding a CSS class, that isn’t necessary as the text you’re referring to can be styled without needing its own class, using the appropriate selectors. The entire form can be styles without any modifications to its current setup.

If the built-in contact form isn’t exactly what you need, we fully understand that. You’re welcome to use another form such as Contact Form 7, and WP-SpamShield protects 3rd party contact form plugins.

Hey Scott,

I am aware of your notice and YES I read it before posting.

I thought you would be amiable to the request as it isn’t a feature rather a cosmetic refinement of what you have already delivered… clearly I was wrong.

We appreciate the single view focus, we hate spam too.

But .. I didn’t want to style all <p> markers I only wanted to pick on the form instruction text at the footer.

Maybe I am being a dunce.

How can I specifically target that single sentence ‘Required fields are marked *’ in a sea of <p> markers? Anyone???

Hey there snappyhappyme,

We’re definitely amiable. It’s just that we’re not trying to create a contact form to compete with the likes of CF7. ??

You wouldn’t have to style all of the <P>…you can target that exact phrase,as I mentioned. You’ll need to use CSS + DOM. Might need to Google it. (CSS advice is not really a support issue though.)

Have a good one!

– Scott

Got it sorted.

For anyone trying to do the same, he’s my solution:

p:nth-last-child(2) { whatever styling you want here }

The instruction text at base of form is now styled. But changes to the number inside the brackets (#) may be needed with plugin updates.

Cheers

Glad to hear you got things sorted out. I would however recommend modfiying your solution just a bit.

It’s generally best to be as specific as possible to prevent collisions. Use unique ID or class elements, and use the DOM tree. (See this: DOM + CSS = A beautiful couple) With the DOM, you can isolate any element on a page whether or not is has an ID or class…it is extremely powerful. Start with a known ID or class and work down from there.

The form ID is “wpss_contact_form”, but you haven’t included that, so I would recommend adding it.

If you just want to modify your current solution as-is:

#wpss_contact_form p:nth-last-child(2)  { css declarations go here... }

As you mentioned though, this could change in the future, so I probably wouldn’t recommend using “nth-last-child”. (Not likely anytime soon, but just to be safe.) That’s up to you though. When you’re using it with code you’re written and can control, you’re fine, but with plugins, themes, frameworks, etc that are updated outside your control, you should get more specific to prevent your CSS from breaking in the future.

(Before we go further, a handy plugin for adding CSS to a specific page or post is: WP Add Custom CSS.)

Browser developer consoles can help you isolate the exact DOM-based CSS selector you need. For example in Chrome, if you open your console, go to Elements, and pick the element you want to style, it literally lists the selectors out for you in a horizontal bar right below the source code.

Sometimes to select the text you want, the trick is to make sure you have styling for the text you’re not targeting. Then you can use a straightforward rule for the text you do want to target.

The text you’re trying to style is the only text not within a label. So make sure you set style rules for the text within labels as well. (The text above each input line, etc.) For example:

#wpss_contact_form p label { css declarations go here... }

Now when you set this directive for the text you want to target (“Required fields are marked *”), you can use a fairly simple selector set, that won’t have any collisions:

#wpss_contact_form p { css declarations go here... }

Some other selectors you could use:

#wpss_contact_form p label strong { css declarations go here... }

#wpss_contact_form p label input { css declarations go here... }

And since you’re not a fan of the non-breaking space in the last <p>, you can use the “nth-last-child(1)” selector with a “line-height: 0” declaration to make it disappear altogether if you like. (There are a number of ways to handle this.) Something like this would be a quick fix:

#wpss_contact_form p:nth-last-child(1) {
     line-height: 0;
     other css declarations go here...;
}

When using CSS + DOM, possibilities are pretty much endless.

I’ll add some of this to the documentation in case it’s helpful to others.

WOO HOO, that was great. Many thanks.

You are correct, I had omitted the #wpss_contact_form id prefix from my suggested solution.

An oversight in my post. As my working code did have this. Sorry readers.

For the redundant last paragraph I did apply a ‘hide’ class (slightly different to yours).

Thanks again

You’re very welcome. ??

No worries. There’s a lot of ways to do it.

Absolutely…yours with ‘hide’ is better.

I added a modified version of this to the Contact Form documentation page. Been meaning to do that for a while. ??