What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Adding placeholder text to Jotforms captcha

    Asked by majux on January 05, 2015 at 05:07 PM

    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

    Page URL:
    http://www.sullivangalleshaw.com/

    placeholder text placeholder source hint captcha hint text
  • Profile Image
    JotForm Support

    Answered by jonathan on January 05, 2015 at 06:43 PM

    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.

  • Profile Image
    JotForm Support

    Answered by jonathan on January 05, 2015 at 08:18 PM

    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!

  • Profile Image

    Answered by majux on January 06, 2015 at 10:10 AM

    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.

  • Profile Image
    JotForm Support

    Answered by Charlie on January 06, 2015 at 11:49 AM

    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.