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

    How to enable Form Box shadow

    Asked by benjaminaurelius on August 04, 2014 at 02:48 PM

    Hey,

     

    I would like to know how I could reproduce the blue highlightes box shadow that appears as soon as a field is active. Like seen in this product: http://codecanyon.net/item/nexforms-the-ultimate-wordpress-form-builder/full_screen_preview/7103891   (scroll down and click on a field).

    I tried to copy the code from the site (box-shadow) but couldnt figure it out.

     

    Thank you!

    enable form product site builder scroll
  • Profile Image
    JotForm Support

    Answered by KadeJM on August 04, 2014 at 04:23 PM

    As far as I know I think you basically wish to turn the form highlight effect into a box shadow when the input is selected. This should be possible with some custom injected css.

    Please see this example demo form: http://form.jotform.us/form/42156069790157

     

    Here's How to Apply this to your Form ~

    (1) Make sure you've disabled your form's highlight effect.

    (2) Grab the following CSS Code from below and Inject it into your form.

     

    CSS Code:

    textarea:focus,

    input[type="text"]:focus,

    .uneditable-input:focus {

    border-color: rgba(82, 168, 236, 0.8);

    outline: 0;

    outline: thin dotted \9;

    /* IE6-9 */-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);

    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);

    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);

    }

     

    The above CSS was derived from an example in this reference thread at Stack Exchange. I think we have a similar thread in our forum somewhere that is more specific on how to do this here involving our form fields but unfortunately I seem to be unable to find it.