How To Customize A Captcha Field?

  • Profile Image
    Asked on March 10, 2013 at 05:06 PM

    I am trying to change the actual captcha field. I could change the size when using Firebug and GoogleDevTools. Changing the source code given won't make any effect because it seems the size of the captcha could only be edited in the html. I found this out by doing a preview of the form and then looking at in in Firebug. I believe something was set to "153" and I took it down to "140", which gave me the result I wanted, but again, this was in the html.

  • Profile Image
    Answered on March 10, 2013 at 05:55 PM


    Apply this custom css codes in to your form.

    /*--form captcha custom--*/

    .form-captcha {

    background: none repeat scroll 0 0 #F5F5F5;

    border: 1px solid #CCCCCC;

    border-radius: 4px 4px 4px 4px;

    padding: 6px;

    width: 140px;



    width: 137px;


    .form-captcha input{

    width: 115px !important;


    This is how it looks like:

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image
    Answered on June 28, 2014 at 01:15 PM


    tried this solution but it doesn't work for me. on the contact page on the website i have 3 boxes, but the width of the captcha field pushes everything so my last column ends up down below.

    here's a prevew:

    any help?

  • Profile Image
    Answered on June 28, 2014 at 04:14 PM

    @ HKZG


    I have created a separate thread for your question here

    we will respond to you on that thread.