Hey there, @jarp 👋
Happy to help you out with this one!
- Would you mind sending us an URL to your page? In general, you’ll want to put in just the name of a class to Custom CSS class field, without dot. That means it should read
jarp-navyblue which then allows you to target it in your child theme’s CSS this way .jarp-navyblue. As it turns out, Placeholder part doesn’t allow heading tags to be added so while you can certainly make it look like <h2>, you’ll need to target your styles on <p> instead. Something like .jarp-navyblue p should do the trick.
- Could you please share more details about this? Are you using International format option in Phone part? Validation and formatting of phone number in that case is real time, with additional backend validation on submit.
Let us know the details! 🙂
Thread Starter
jarp
(@jarp)
Thank you!.
I have two phone fields on a form. One is using international format and the other not. On both fields I type a 5 and I get no realtime or backend validation after submitting the form.
It tells me everything is Ok and presents the green box. Is there anyway I can put in a pattern and if so how?.
This is a site in construction and am working in localhost. I do have the site up on my host but not finished.
Kind Regards,
JARP
Oh I see, @jarp.
Phone part actually uses phone formatting library which formats it automatically when International format is selected. As for now, there’s currently no option to insert a custom pattern. Sorry about that!
As for the phone number validation — you’re right, we currently don’t check if the number is actually a real phone number fulfilling all formatting rules for specific country. It’s something we’d like to improve for sure and we’ll definitely move our focus to it in a future releases.
Stay tuned! 🙂
Thread Starter
jarp
(@jarp)
Thank you for clearing this up!.
On the other hand, could you be more explicit on point 1?. I am not versed in CSS.
This is what I have tried:
1. Set the title name.
2. Set the title name by writing the text of placeholder in the text editor of placeholder, the text is in bold and italics and formatted as bullet points. Here, it seem to inherit from the theme I use (GeneratePress and GP premium).
In custom class i just inserted jarp-navyblue and the simple code i used is for testing is:
.jarp-navyblue p
{
color: red;
font-size: 40px;
font-style: italics;
}
This code is inside my child theme styles.css. On both points 1 and 2 the happyforms form is not picking up the CSS code.
Any help will be appreciated.
Thanks again and kind regards,
JARP
Hey @jarp 👋
Does adding !important to the end of each line before ; help? Would you mind sending us your page URL? We’ll be happy to have a closer look.
Thanks!
Thread Starter
jarp
(@jarp)
Unfortunately it did not work!.
Inspecting the placeholder field, it is targeted in a label and span from what I saw.
I am also confronting the issue that on the email field, and setting to display as placeholder, once the user inputs data and moves to the next field the placeholder moves down one line and overwrites the text input (on all browsers).
The site is under construction but I set up a test page located at:
https://enersoft.tech/testsite
Kind Regards and thank you,
JARP
Hey @jarp,
Sorry to hear it didn’t work. We just wanted to check out your page to see for ourselves but it looks like you already removed Placeholder part from the test page. Would you mind adding it back in along with CSS code for it? We’ll be happy to point you in a right direction there.
As for the Email part in Display as placeholder setting — thanks for reporting this! We noticed the issue and it’ll be fixed in next release which is scheduled to go out in a couple of days.
Let us know your thoughts! 🙂
Thread Starter
jarp
(@jarp)
Thank you for your response.
I never removed the placeholder it is still there, upon inspecting placeholder text, it is contained within a <span> tag with a class=”label” and so it will not pick up my class .jarp-navyblue even though it is defined in custom class.
The only way I was able to style the placeholder text is if I put it in the text editor because it will be enclosed in <p> tag.
Thank you and Kind Regards,
JARP
Hmm, that’s strange, @jarp.
Would you mind giving us more details on what you’re up to? From the description of the thread, we thought you’d like to style the text within Placeholder part. But looking at your page, that one doesn’t contain any text and the jarp-navyblue class is applied to Short Text part below it instead.
Let us know!
Thread Starter
jarp
(@jarp)
Thank you for your response.
You are correct, I wanted to style the text within a placeholder. From what I see in happyforms you have a title field and a text editor field in placeholder part build. If I fill in the title field with text it will not be targetted in my CSS due to the behaviour I described.
If I put text in the text editor IT WILL be targetted in my CSS. It could be my lack of understanding of both fields behaviour until I looked closer at them, I was trying to target the title field text.
In any case I have updated the testsite to reflect what I am explaining here.
Again, thank you very much for your help and kind regards,
JARP
That’s correct, @jarp!
The code discussed here was to change the appearance of Placeholder part body text, not its title. To target the title instead, you’ll want to change the selector to the following:
.happyforms-part--placeholder .happyforms-part__label
Hope this helps! 😀
