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

    Issues with active form border color and submit button.

    Asked by ArtesaniaSV on July 28, 2016 at 12:04 PM

    Hello friends,

     

    I am having two issues with my current form:

    1.) I have injected custom css code to change the active field border color, however it is not working.

     

    2.) My submit button is being stretched across the entire form width (as if in Responsive mode) while viewed on my webpage normally. 

     

    Please Help!

    Thanks!

    Page URL:
    http://www.sistermoonjewelry.com/index.php/shop

    border color and active form active
  • Profile Image
    JotForm Support

    Answered by BDAVID on July 28, 2016 at 02:17 PM

    1) Please try with the following code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .form-line-active input:focus{

    border:1px solid blue !important;

    }

    .form-line-active textarea:focus{

    border:1px solid blue !important;

    }

    Result:

    2) Your forms submit button stretched across the entire form width, because of the dimensions of the div where you have embedded it:

     

    So, you may consider increasing the div's width.

     

    Let us know if you need more help.

  • Profile Image

    Answered by ArtesaniaSV on July 28, 2016 at 05:01 PM

    Thank you for your prompt response! I have added the custom code above, however the blue border still exists. There is a very thin purple border (the color I would like alone), but also the blue border. What am I missing?

     

    http://www.sistermoonjewelry.com/index.php/shop

  • Profile Image

    Answered by ArtesaniaSV on July 28, 2016 at 05:03 PM

    Also, in regards to my second issue with the Submit button, is there css I can manipulate to prevent this mobile responsive behavior of the button? Can I simply have the Submit button not resize on small screens (or narrow divs)?

     

    Thanks in advance!!

  • Profile Image
    JotForm Support

    Answered by Kevin_G on July 28, 2016 at 07:13 PM

     There is a very thin purple border (the color I would like alone), but also the blue border. What am I missing?

    Please do note that depending on the browser where the form is viewed, there is an outline color applied to the fields, so you will need to remove it and show only the border color. 

    Base on that you've mentioned, this should be the correct code you need to embed: 

    .form-line-active input:focus, .form-line-active textarea:focus {

        border : 1px solid purple !important;

        outline: none;

    }

    Also, in regards to my second issue with the Submit button, is there css I can manipulate to prevent this mobile responsive behavior of the button? Can I simply have the Submit button not resize on small screens (or narrow divs)?

    Please inject this code to set the same with no matter the screen size: 

       .form-submit-button {

            width: auto !important;

        }

    Here is my sample form: https://form.jotform.com/62097270607962 

    Hope this helps. 

  • Profile Image

    Answered by ArtesaniaSV on July 28, 2016 at 08:37 PM

    Thank so much! JotForm's support is truly superb!

    Just one last detail....Do the active form fields (of my contact form) in your browser show a slight yellow shadow/highlight around the purple?

    I am using Safari and Firefox and I see a yellow border. Faint...but there. Is there css to remove it?

    Continued thanks!

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 28, 2016 at 11:49 PM

    I checked your form on Firefox but I don't see any yellow highlight around the purple.

    I also checked on Safari but I didn't notice any highlight. Please note that browsers apply their own outline on active fields, however, the previous CSS that my colleague Kevin provided has removed this outline from being shown on your form. So your active fields should only show the purple border that you added. Please try clearing your browser cache to see if the outline is now gone.

    If you need further assistance, please let us know.
    Regards.

  • Profile Image

    Answered by ArtesaniaSV on July 29, 2016 at 12:07 AM

    Ok, well thanks again for all your wonderful help! :)