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

    Form errors

    Asked by heatsource on May 29, 2013 at 06:51 AM

    Hi,

    I would like my form errors to show undeneath the relevany form fields rather than going to another screen. See attched.

    What do i need to do. Sny help would be great,

    Cheers Paul

    Page URL:
    http://exceedallexpectations.org.uk/contact-us.html

    Screenshot
    focus color
  • Profile Image

    Answered by jalaludeen on May 29, 2013 at 07:14 AM

    @heatsource,

    I have checked your page due to Javascript error blocked jotform script wokring, My suggestion to use iFrame code instead of Embed Form in your page.


    Please refer this guide Getting the Form iFrame Code


    Thanks
    Jalaludeen

  • Profile Image

    Answered by heatsource on May 29, 2013 at 08:14 AM
    Hi,
    The submit and send buttons now don't appear on the bottom though
    Cheers Paul
    Date: Wed, 29 May 2013 07:14:28 -0400
    To: trowbi1kinobe@hotmail.com
    Subject: Re: Form errors
  • Profile Image

    Answered by dinesh-it on May 29, 2013 at 08:37 AM

    Hi, can you please clear your browsers cache and try again. Because I am able to see those buttons in above provided page link.

    Output

     

    Feel free to ask for further clarification.

    Thank you.

  • Profile Image

    Answered by heatsource on May 29, 2013 at 07:05 PM
    Sorry this is for another site
    http://bugstoreys.businesscatalyst.com/contact-us.html
    So I have added the code as an iframe and the errors are appearing underneath line but the submit/ clear buttons are not appearing. They are there if i choose to embed the code but then i don't get the individual errors.
    I would also like to change the colour of the comments box, the field glow on selection and the error message backgrounds underneath the form fields.
    It would be great if you can help.
    Cheers Paul
    Date: Wed, 29 May 2013 08:37:32 -0400
    To: trowbi1kinobe@hotmail.com
    Subject: Re: Form errors
  • Profile Image
    JotForm Support

    Answered by abajan on May 29, 2013 at 08:43 PM

    @heatsource

    Regarding the styling changes, please replace the current injected CSS with the following:

    .form-line-error .form-error-message {
    background: red;
    color: #FFF;
    padding: 6px;
    margin-bottom: 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .form-error-arrow {
    border-color: transparent transparent red transparent;
    }

    .form-line-active,
    .form-line-error,
    .form-textbox,
    .form-textarea {
    background: #F0EDED;
    }

    input:focus, textarea:focus {
    outline: none;
    }

    The resulting form should be like this clone.

    If you need additional help with this aspect (styling) of the form, please open a new thread and post the query there. (We prefer to stick to a single topic per thread.)

    Thanks

  • Profile Image

    Answered by heatsource on May 30, 2013 at 07:16 PM
    All great,.Thanks. Can i change the yellow highlight though?
    Date: Wed, 29 May 2013 20:43:23 -0400
    To: trowbi1kinobe@hotmail.com
    Subject: Re: Form errors
  • Profile Image
    JotForm Support

    Answered by jonathan on May 30, 2013 at 07:49 PM

    Hi,

    Are you still having issue with the missing submit button? I checked your form on your website http://bugstoreys.businesscatalyst.com/contact-us.html and I could not see the submit buttons.

    It is probably due to the wrong height used in the iframe code

     

    Please try getting the form's iframe code again (guide: Getting-the-Form-iFrame-Code) and re-embed.

    You can change the border color of the text area by adding CSS code like this

     

    .form-textarea {

    border: 1px solid rgb(235, 15, 15);

    }

     

    Please inform us if you have further inquiry.

    Thanks.

  • Profile Image

    Answered by dinesh-it on May 31, 2013 at 04:02 AM

    Hi, You can disable those highlight effect as shown below.

    1. Goto Setup & Embed tab and select preferences

    Preferences Option

     

    2. Now select Field Styles tab in the opened window.

    3.Now You can disable the highlight effect as shown below. (By default it is enabled)

    Field Highlight Effect

     

    This will solve your problem.

    Feel free to ask for further clarification.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by abajan on May 31, 2013 at 06:08 AM

    @heatsource

    To change the outline color of an input when it has the focus, replace the last rule in the injected CSS with the following:

    input:focus, textarea:focus {
    outline-color: #090;
    }

    Thanks

  • Profile Image

    Answered by heatsource on May 31, 2013 at 04:13 PM
    Hi,
    Still no luck. I have tried it at 924px and more but the buttons don't show. They do if in select embed or source. Very strange...
    Cheers Paul
    Date: Thu, 30 May 2013 19:49:37 -0400
    To: trowbi1kinobe@hotmail.com
    Subject: Re: Form errors
  • Profile Image
    JotForm Support

    Answered by Mike_T on May 31, 2013 at 04:54 PM

    Please try removing the script part that is following the iFrame code. That script may cause height issues in some cases.

    Thank you.

  • Profile Image

    Answered by heatsource on May 31, 2013 at 05:22 PM
    Works nice one!!
    Date: Fri, 31 May 2013 16:54:18 -0400
    To: trowbi1kinobe@hotmail.com
    Subject: Re: Form errors