Change Text Field

Hey Jeff,

To rule out your theme’s CSS setting, can you try setting the CSS using the WordPress CSS customizer. If you check out this article, it’s method #1.

https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

See if that helps and let us know!

Hi Jared,

I appreciate your help!

Here’s where I copied the CSS — https://cl.ly/22443G2m2Z02 — but still nothing, which is strange considering the CSS to change the look of the confirmation container is right above it and works fine, as you can see in the link.

Nothing changed in Preview, or after I published changes and reloaded my posts.

I hate to bother you with such a tiny “issue,” but if you have a second thought, please let me know.

Thanks, again.

Jeff

Hi Jeff,

If I’m understanding correctly, it looks like you’re looking to change two things about the label text: font-weight and font-size. CSS troubleshooting is sometimes tricky, so I’ll share a few details below to assist.

Depending on the font you’re using, there may only be limited font-weight options available (some fonts just have one, many others just have a couple). If you try more general options such as normal or bold (rather than a number), this may help to apply the general weight you’re looking for. For examples, here’s a tutorial from W3Schools on font weights.

Similarly, the size may not change much with only a couple pixels of difference depending on the font your site is using. In case it helps, you could try checking the code using browser developer tools (here’s a super helpful tutorial from WPBeginner with details on how to do that).

And if the above details don’t help you to resolve the issue, you can find our recommendations for troubleshooting CSS in this tutorial. I suspect that the section on specificity may be especially helpful.

I hope that at least one of these details helps! ??

This is great, Jess, thank you!

I did have that thought about font weight, like maybe the one I’m designating doesn’t even exist. Makes sense.

I will watch/read through each tutorial that you recommended.

I really appreciate your thorough reply!

Jeff

Hi Jess,

It worked! I found the issue using the Inspect Element. It’s actually on WP Forms’ end. Using the CSS from Inspect, the code is written this way:

div.wpforms-container-full .wpforms-form .wpforms-field-label?{
. ? display:?block;
. ? font-weight:?700;
. ? font-size:?16px;
. ? float:?none;
. ? line-height:?1.3;
. ? margin:?0 0 4px 0;
. ? padding:?0;
}

But your website gives different CSS for this field. I copied this directly and you can see how the code from your website adds an extra line up top:

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-text .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}

Just letting you know, so you guys can make the necessary change on your website, on the page “How to Customize the Style of Individual Form Fields.”

Thanks again for your help! I never would’ve identified the issue without your assistance.

Jeff

Hi Jeff,

Thanks for taking the time to mention this ??

I took a look at our doc, and I think I may be able to help clarify. We’ve included both of the selectors you mentioned in different sections, each targeting different labels within the form (here’s our CSS for all field labels, and here’s our CSS specifically for the label of a Single Line Text field.

So it depends on whether you’d like to change the styles of all field labels, or just the labels for Single Line Text fields. I apologize if our doc was unclear, and if there’s any way we may be able to clarify this better please feel welcome let us know any suggestions!

Either way, glad to hear you got the CSS you needed up and running ??