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

    Change the warning's background colour...

    Asked by alienredwolf on September 17, 2012 at 10:11 PM

    My form is on http://www.arwmedia.com.au/ and it's works wonderfully, although when somebody doesn't quite type something in properly (or nothing at all) and the warnings come up, there is this big pink ugly box that appears around it. Anyway to make that transparent but keep the warning text?

     

    Thanks heaps.

    Page URL:
    http://www.arwmedia.com.au/

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Rodjit on September 17, 2012 at 10:27 PM

    Hi Alienredwolf,

    Inject this codes on your form:

    .form-line-error {

    background:none repeat scroll 0 0;

    }

    Hope this helps.

     

    Rodjit

  • Profile Image
    JotForm Support

    Answered by liyam on September 17, 2012 at 10:32 PM

    In addition to Rodjit's response, you can also use this CSS code:

    .form-line-error { background-color: transparent; }

    Please let us know if you have further questions.

  • Profile Image

    Answered by alienredwolf on September 17, 2012 at 10:40 PM

    Hey guys, thanks for the speedy responses...

    I have added this to my form's custom CSS, do I need...

    .form-line-error {

    background:none repeat scroll 0 0;

    }

    Just as it is? Or do I need some other code to set it up? I've never experimented with CSS properly.

    I did it just as it is and it's the only code I have in there at the moment. I saved and embedded it using the simple embed.

    Still not displaying correctly for me...

    Any ideas? Thanks again...

  • Profile Image
    JotForm Support

    Answered by liyam on September 17, 2012 at 10:57 PM

    There seems to be a delay on the update of the form on your website.  To get an immediate update, you can change your script's src reference on your web page from http://form.jotform.com to http://www.jotform.com

    Please let us know if you need further clarification on this matter.

  • Profile Image

    Answered by alienredwolf on September 17, 2012 at 11:00 PM

    Thanks so much! Now I can experiement with some colour options. Best service guys, thanks again.

  • Profile Image

    Answered by alienredwolf on September 17, 2012 at 11:10 PM

    One more thing guys... It's looks awesome, but is there any chance of customising the little 'exclamation mark'. It's linking to here:

    http://submit.jotform.co/images/exclamation-octagon.png

    Can I have my own custom icon there?

    Can I also change the colour of the red asterisk to something more suitable?

    Thanks.

  • Profile Image
    JotForm Support

    Answered by liyam on September 17, 2012 at 11:48 PM

    I'm not sure if it would be possible using CSS since the image tag and its source is coded within the div that shows the message. But we can remove the image by hiding it via CSS as well.

    But if the purpose is to replace the image, the best solution that I could think of for this is to get your form's HTML source code (including the CSS and JS files) and then manually edit the coding.

    Update: I forgot to add, you can get your form's source code by following this user guide: http://www.jotform.com/help/104-How-to-get-your-Form-Source-Code.

    Please take note of the download link for the zipped file.

  • Profile Image
    JotForm Support

    Answered by abajan on September 18, 2012 at 12:04 AM

    Glad you've found my colleagues' advice useful. As to the color of the asterisk, inject the following rule and edit the color to suit:

    .form-required {
    color:#2AEA8B;
    }

    Incidentally, here's a good starting point to learn CSS. (Check out the three presentations at the bottom of that page.)

    Should you require further assistance with this or any other JotForm related matter, we'd be glad to help.

  • Profile Image

    Answered by alienredwolf on September 18, 2012 at 01:09 AM

    All really helpful guys...  Thanks...

    I'm still interested in how to replace or at least hide the little exclamation mark. Still couldn't figure out how to do that... And also... The length of the warning message box that comes up is massively long, any way to decrease the size of the balloon it's in to fit the text more snugly?

    This is what I have in at the moment...

     

    /* background of entire field */

    .form-line-error {

    background:none repeat scroll 0 0;

    }

     

    /* background of "This field is required." message */

    .form-error-message {

    background:#FFF !important;

    }

     

    /* color of arrow attached to the above message which points to the unfilled field */

    .form-error-arrow-inner {

    border-color: transparent transparent #FFF;

    }

     

    /* the actual input */

    .form-validation-error {

    background-color:#FFF; /* the background */

    border:1px solid grey; /* the border */

    -moz-box-shadow:0 0 10px grey; /* the shadow effect on the border */

    -webkit-box-shadow: 0 0 10px grey; /* the shadow effect on the border */

    box-shadow: 0 0 10px grey; /* the shadow effect on the border */

    }

     

    .form-required {

    color:#933;

    }

  • Profile Image
    JotForm Support

    Answered by idarktech on September 18, 2012 at 03:19 AM

    @alienredworlf

    Add the following codes:

    /*---error message width--*/

    .form-error-message{

    max-width: 60px !important;

    }

    /*---remove exclamation icon--*/

    .form-error-message img{

    display:none;

    }

    /*---display error message below submit button--*/

    .form-button-error{

    display:block;

    }

    Hope this helps. Feel free to let us know if you need anything else. Thanks!

  • Profile Image

    Answered by alienredwolf on September 18, 2012 at 03:36 AM

    Thank you so much! It's looking perfect now! :)