How can I remove weird line around my custom submit button? & Error messages?

  • Profile Image
    Mathias Lindberg
    Asked on September 02, 2012 at 04:15 AM

    Hey, I created a form using JotForm and I've been trying to remove this weird border around my custom sumbit button.

    This is my page, and the sumbit button is the one saying "Submit CraftPackage" - http://dl.dropbox.com/u/19707357/Website/craftpackage.html

    I also find it a tad annoying that required fields return an error message if not filled out. Especially since the form needs to be an exact size, and there is no scrolling. Is there a way to add scrolling?

  • Profile Image
    abajan
    Answered on September 02, 2012 at 06:47 AM

    Please do the following:

    1. With the form loaded in the form builder, click the submit button

    2. In the form builder's toolbar, click Button Style and then click the default

    3. Inject the following CSS:

    .form-submit-button {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

    input,textarea,select {
    border: 2px inset #EEE;
    }

    .form-required {
    color: transparent;
    }

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

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

    .form-validation-error {
    border:2px inset #EEE;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

    4. Save the form

  • Profile Image
    abajan
    Answered on September 02, 2012 at 07:48 PM

    Actually, it would be better to omit the third and last rules from the CSS I provided. (That group of rules was used to style another user's form which had a somewhat different issue.)

    Also, since the first field is required, its default should be blank. Otherwise, a user could neglect to select a domain and still be able to submit the form. Incidentally, assuming you don't want the background of a field to become highlighted when it receives focus, go to the Setup & Embed tab > Preferences > Field Styles > Highlight Effect > Disabled.