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
    JotForm Support

    Supermarket Form

    Asked by abajan on July 02, 2011 at 08:45 AM

    Hi Linda

    Here are some (unsolicited) tips to improve your form at the Bishop's Supermarket Directions page:

    * Most importantly, update your source to include the Submit button!

    * The header's white background makes it too bright against the rust colored background of the form. (The same goes for the yellow highlighting of focused fields)

    * The rust colored background has an obscurring effect on the asterisks indicating the required fields and the sublabels of the Full Name field

    * Besides being somewhat hard to see, the sublabels are a tad too far to the left

    * Two (2) email notifications are unnecessary, unless you want to have the one going to linda@siegelphotography.com to be different than that going to bishopsmarket@yahoo.com

    * The pink background on unfilled required fields is unnecessary

    * The pink background on the error messages themselves does not match the rust colored background of the form

    I applied the tips above to a clone of your form. Here's a partial screenshot of the result:

    If you like how it looks, copy the following CSS and paste it into the Inject Custom CSS section of your form's Preferences (Setup & Embed tab > Preferences > Form Styles > Inject Custom CSS) :

    .form-header-group {
    border:2px outset #8DB2B2;
    }.form-subHeader {
    .form-line-active {
    .form-required {
    }.form-line-error {
    background:none repeat scroll 0 0;
    }.form-error-message {
    background:#ADEA70 !important;
    }.form-error-arrow-inner {
    border-color: transparent transparent #ADEA70;
    }.form-sub-label {

    Even if you don't change the form's style, be sure to include the submission button. Otherwise the form is pretty much useless.

    ~ Wayne

  • Profile Image

    Answered by lindasiegel on July 02, 2011 at 09:46 AM

    You are so terrific to help with this.  I will work on all of it, starting with the SUBMIT button.  This is problem we have had before... on my browser (SAFARI) it is there in the iWeb website and online on website, and we are getting constant submissions.  Guessing the problem is with IE, so not sure if the other problems are also IE related...

    Here's how it looks on the website on Safari...

  • Profile Image

    Answered by lindasiegel on July 02, 2011 at 09:47 AM

    Best regards,

    Linda Siegel
    Siegel Photography

  • Profile Image

    Answered by lindasiegel on July 02, 2011 at 09:59 AM

    Do I have to load the screenshot to Imageshack to show you?

  • Profile Image

    Answered by lindasiegel on July 02, 2011 at 10:08 AM

    Colors being off is a real problem, since it looks perfect on my monitor in Safari...I know right... where is that pink stuff coming from?

  • Profile Image
    JotForm Support

    Answered by abajan on July 02, 2011 at 08:37 PM

    Hi Linda

    Yep. Regarding your penultimate post, the screenshot first needs to be uploaded so you would have its URL to enter into the Link URL box of the Insert/edit link window. Please see this thread for details.


    ~ Wayne

  • Profile Image

    Answered by lindasiegel on July 05, 2011 at 12:14 PM

    Hi again Wayne, per SUBMIT button, I remembered this happened before in IE, and went back to earlier forum questions and found the fix... can u let me know if you can see it now?  Took some of your other pointers as well.

    Thanks again!!

  • Profile Image

    Answered by lindasiegel on July 05, 2011 at 12:33 PM

    Can't find where the pink error color is coming from, any ideas?  I did not set it.

  • Profile Image
    JotForm Support

    Answered by abajan on July 05, 2011 at 09:19 PM

    Hi again Linda

    The Submit button is there now but it's being partially hidden by the bottom of the frame surrounding the form.

    Most of your page consists of a 1012 px by 913 px image called droppedImage.jpg and since the dimensions of the portion of that image within which the form sits is quite limited, the dimensions of the form need to be made small enough to fit that space, as there is no way (to my knowledge) to expand that section of droppedImage.jpg without adjusting the dimensions of the entire image.

    From what I can tell, the width of the form is okay. It's the height that needs to be reduced. I notice that you have reduced the size of the heading's font to 16 pixels. That's good because the heading now occupies only one line. It might also be a good idea to get rid of the subheading altogether and substitute hover text in the Your E-mail Address field stating "Please add info@bishopssupermarket.com to your address book."

    My final space saving tip would be to do away the warning messages ("Enter a valid e-mail address." and "This field is required.") as you may have noticed that they both expand the height of the form when invoked. Having the fields containing errors highlighted with just a red border should suffice. (Change the error message when the Submit button is clicked from "There are incomplete required fields. Please complete them." to "Please ensure that all fields are completed and your email address is correct.")

    So how do we do all of this? Let's deal with them one at a time. First, load the form into the form builder.

    Remove the Subheading

    1. Click the heading and then the Sub Heading button in the toolbar

    2. Click the text and select all of it [Ctrl + A] and then cut it to the Windows clipboard [Ctrl + X] as shown below

    3. Click OK

    Attach Hover Text to the Your E-mail Address Field

    1. Click the Your E-mail Address field and then click the Hover Text button and paste [Ctrl + V] what you just cut into the text box:

    2. Click OK

    Get Rid of The Warning Messages

    Inject the following CSS but don't close the Preferences window just yet:

    .form-error-message {
    display: none !important;

    Change Warning Message

    1. Click the Advanced Settings tab and the Edit Form Warnings

    2. Click the message indicated below and replace it with Please ensure that all fields are completed and your email address is correct. :

    3. Click Save but don't close the Preferences

    To remove the pink error color

    Return to the Form Styles tab and inject the following CSS:

    .form-line-error {
    background:none repeat scroll 0 0;

    Your total injected CSS should now look like this:

    .form-header {
    font-size: 16px;}
    .form-error-message {
    display: none !important;
    .form-line-error {
    background:none repeat scroll 0 0;

    Now you can go ahead and close the Preferences' settings and save the form.

    Please let us know if these latest tips improve your form. If they don't meet your requirements, we could always try something else.


    ~ Wayne