Transparent Placeholder

Does Happyforms support invisible recaptcha?
recaptcha2 kind of hmmm ugly~~

Hey there, @originkaffa ??

Happy to hear you enjoy using HappyForms! As it turns out, there’s no specific documentation for CSS but we’ll be happy to point you in a right direction once you share your ideas with us.

Would you mind giving us more details about the transparent placeholder? Are you referring to our Placeholder part background color or changing the text color of input placeholders?

HappyForms supports HoneyPot spam protection by default which is invisible. All you need to do is check the Spam prevention checkbox in Step 2. We don’t support invisible reCaptcha yet but we think it’s a nice idea. We’re adding it to our list!

Let us know your thoughts! ??

Hello,

Thx for quick reply!
Yes, I would like to know how to make Placeholder “background color transparent”.

Thank you!

Oh okay, @originkaffa.

As it turns out, the Placeholder background is transparent by default. Would you mind sharing your form URL with us so we can have a closer look? I have a hunch your theme may be overriding HappyForms styles there.

Thanks! ??

OH! my bad, it’s transparent by default..

My theme used contact form 7, I don’t know much about css, I found the codes at my theme style.css.

.wpcf7 input .select_wrap,
.wpcf7 textarea .select_wrap,
.wpcf7 select .select_wrap,
.contact-form input .select_wrap,
.contact-form textarea .select_wrap,
.contact-form select .select_wrap {
background: transparent;
}

https://www.originkaffa.com/reservation/
What can I modify it with?

Thanks!

Okay, @originkaffa. Are you trying to make the background of all form inputs transparent on that page? We’ll be happy to share the CSS if that’s what you’re after.

Let us know! ??

Hi,
I would like all happyforms inputs transparent on whole site, or one page is fine to me, I can use one page css to modify other pages.

Thank you!

Got it, @originkaffa.

The following code should do the trick:

.happyforms-part input[type=text], .happyforms-part input[type=email], .happyforms-part input[type=tel], .happyforms-part input[type=number], .happyforms-part input[type=range], .happyforms-part textarea, .happyforms-part input[type=text]:focus, .happyforms-part input[type=email]:focus, .happyforms-part input[type=tel]:focus, .happyforms-part input[type=number]:focus, .happyforms-part textarea:focus, .happyforms-part--choice .option-label, .happyforms-part--choice .option-label .border, .happyforms-part--choice input:checked~.border, .happyforms-part--choice .option-label:hover .border {
  background-color: transparent !important;
}

It’s a pretty long selector but that should make all your parts background transparent.

Hope this helps! ??

Hi,
Thanks for your codes!!
Can you check the url again? I’m not sure it’s theme’s style still effecting the code? or the codes you’ve provided didn’t make all of placeholder transparent, or simply I didn’t put correct styly in forms?
Thank you very much!

It looks like this is caused by Autoptimize plugin inserting custom styles before actual HappyForms ones. That leads to custom styles getting overridden. Would you mind giving it a try with the following CSS?

.happyforms-form form .happyforms-part input[type=text], .happyforms-form form .happyforms-part input[type=email], .happyforms-form form .happyforms-part input[type=tel], .happyforms-form form .happyforms-part input[type=number], .happyforms-form form .happyforms-part input[type=range], .happyforms-form form .happyforms-part textarea, .happyforms-form form .happyforms-part input[type=text]:focus, .happyforms-form form .happyforms-part input[type=email]:focus, .happyforms-form form .happyforms-part input[type=tel]:focus, .happyforms-form form .happyforms-part input[type=number]:focus, .happyforms-form form .happyforms-part textarea:focus, .happyforms-form form .happyforms-part--choice .option-label, .happyforms-form form .happyforms-part--choice .option-label .border, .happyforms-form form .happyforms-part--choice input:checked~.border, .happyforms-form form .happyforms-part--choice .option-label:hover .border {
  background-color: transparent !important;
}

That should fix it up.

Lovely! it’s working!
In return I’ll translate plugin to chinese language for your team. It might take some time to translate it.
By the way, where should I send PO/MO files once I complete translation?
Have a nice day.

Happy to hear that it worked, @originkaffa!

It’s nice to see you’d like to be involved in translating HappyForms! You can submit translations directly to Translate page here.

Have a great day! ??

Hello,
Loco plugin doesn’t seems to work for HappyForms? I’ve placed translation in both default language dir. and custom dir. need to test translations before submit.
Any idea?

*Off topic: How can I change form submit successful message, from “top of the form” to “bottom of the form”?

Thanks.

Hey again, @originkaffa!

That’s odd. Loco Translate works well with HappyForms. Would you mind double-checking that you choose System location in Choose a location section when adding a new language to HappyForms? That should patch it up for you.

As it turns out, changing where confirmation message shows up is not yet baked in to HappyForms. Sorry about that!

Feel free to create a new thread if you have any questions at all. We’ll be happy to help! ??

I’ve changed translation default folder to ‘system’, and it worked!
Thanks for advice!