Adding placeholder text to Jotforms captcha

Would love for the ability to add placeholder text to the input of the standard Jotforms captcha.  Right now we can add hoverable text, but still no ability for placeholder unless I embed the full code and edit the HTML manually (which I'd like to avoid).

Are there any workarounds to add this text other than editing the source?  Perhaps a :before / :after in CSS?  I know you can add hoverable hint text, but a few clients have asked me why I don't just add placeholder text to the input box.

Thanks

Hi,

Actually there used to be a default text(placeholder text) within the Captcha field.

BUT we have remove it since it was causing some confusion to some users and causing them to provide the incorrect captcha value.

The old screen capture below shows the Captcha used to have hint text within the input box

 

Checking the source code of the Captcha field now, you can no longer see the 'group-hint' class code that currently are available to Textboxes and TextArea fields.

But I think using custom injected CSS code can indeed allow adding a 'hint' text within the input box of the Captcha field. I'll check how to achieve this.

Can you please confirm also that it is what you actually wanted to do here?

 

Thanks.

Hi,

Please try this demo jotform http://www.jotformpro.com/form/50047651820954

I was able to add a hint text within the Captcha input box using custom injected CSS codes.

 

I added modification on the existing CSS codes you had on your jotform http://www.jotformpro.com/form/43217102114942 that I cloned.

This is the part of the injected CSS codes I updated

 

.form-captcha:hover {

border : none;

}

.form-captcha-image {

max-width : 45%;

float : left;

height : 49px;

border : border 1px solid #002639;

}

.form-captcha div:before {

content: "Enter text as shown!";

z-index: 1;

position: absolute;

top: 25px;

left: 3px;

opacity: 0.3;

}

.form-captcha div {

position: relative;

float : right;

max-width : 45%;

}

[name="captcha"]:hover {

position: relative;

z-index: 2;

}

 

I suggest you clone my demo jotform http://www.jotformpro.com/form/50047651820954 so that you can properly review the modification using your Form Builder.

Follow this user guide to clone: -How-to-Clone-an-Existing-Form-from-a-URL

Hope this help. Please let us know if further assistance is needed.

Thanks!

Jonathan, thanks for that solution!  I suspected there was some :after/:before css that would get it done.  I'm going to clean up the text a bit to line up in some responsive views but it looks like it'll work fine.

Thanks again for taking the time to put that together.

In behalf of my colleague, Jonathan, you're welcome. Please do update us if you were able to make it work in your end. We'll be more than happy to assist you further then.

Best regards.