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

    Custom Form Background

    Asked by gulfsouth on June 07, 2013 at 11:07 AM

    I have seen alot of posts that show how to use a repeated background but I would like to use this as a background on the CSS Mini form template as used here 

     

    form background form template uploads template png
  • Profile Image

    Answered by sidharth_kch on June 07, 2013 at 12:09 PM

    @gulfsouth

    Do you want your form fields to be within this background image, or do you want this image to be repeated? Let us know and we will send you the custom css.

    Thanks,

    Sidharth

  • Profile Image

    Answered by gulfsouth on June 07, 2013 at 12:18 PM

    Hi   

    I have done some things

    but it is still a little off and also I am working on a custom submit button 

    http://form.jotform.us/form/31534207763149

  • Profile Image

    Answered by gulfsouth on June 07, 2013 at 12:28 PM

    this is the code for the submit button 

     

    http://gulfsouthdisabilitylawyers.com/wp-content/uploads/2013/06/button2.png

  • Profile Image

    Answered by gulfsouth on June 07, 2013 at 12:34 PM

    hold on for a min - I have to make some definte adjustment 

     

    this is the http://gulfsouthdisabilitylawyers.com/?loggedin#   if you get a login screen its td03173

    3

  • Profile Image

    Answered by gulfsouth on June 07, 2013 at 01:31 PM

    Ok it seems as it I have mostly have it 

     

    http://form.jotform.us/form/31534207763149

     

    Need a little padding on the left like maybe 5 - cant find that  and also  need to adjust the length

     

    Could you possibly help with that code 

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 07, 2013 at 01:43 PM

    Use this code for the left margin,

    .form-section{

    margin-left:8px;

    }

    If you'd like to show the full background, add this:

    .form-all{

    height: 400px;

    }

    Thanks!

  • Profile Image

    Answered by gulfsouth on June 07, 2013 at 01:57 PM

    The CSS for the height doesnt work 

     

    here is all of the code for the form 

     

    .form-all{

    background:#f7f7f7;

    background:-moz-linear-gradient(90deg, #ccc, #fff); /* Firefox */

    background: url("http://gulfsouthdisabilitylawyers.com/wp-content/uploads/2013/06/form_background.png") no-repeat;

    float: left;; /* Webkit */

    border:1px solid #aaa;

    -moz-border-radius:10px;

    -webkit-border-radius:10px;

    -moz-box-shadow:0 0 15px #aaa;

    -webkit-box-shadow:0 0 15px #aaa;

    padding-top:200px !important;

    }

    .form-label-left:hover span{

    color:#0459b7;

    }

    .form-label-left:hover span:after{

    content:" »";

    }.form-submit-button{

    http://gulfsouthdisabilitylawyers.com/wp-content/uploads/2013/06/button2.png); /* Firefox */

    background:-webkit-gradient(linear, left top, left bottom, from(#08adff), to(#0459b7)); /* Webkit */

    border:1px solid #093c75;

    -moz-border-radius:3px;

    -webkit-border-radius:3px;

    -moz-box-shadow:0 1px 0 #fff;

    -webkit-box-shadow:0 1px 0 #fff;

    color:#fff;

    cursor:pointer;

    font-family:Arial,sans-serif;

    font-size:10px;

    font-weight:bold;

    margin-left: 115px;

    padding:5px 5px;

    text-decoration:none;

    text-shadow:0 1px 1px #333;

    text-transform:uppercase;

    }

    .form-submit-button:hover{

    background:#eee;

    background:-moz-linear-gradient(90deg, #067cd3, #0bcdff);

    background:-webkit-gradient(linear, left top, left bottom, from(#0bcdff), to(#067cd3));

    border-color:#093c75;

    }

    .form-textbox,.form-textarea{

    background: rgba(255, 255, 255, 0.9);

    background:-moz-linear-gradient(90deg, #fff, #eee); /* Firefox */

    background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff), color-stop(0.2, #fff)); /* Webkit */

    border:1px solid #aaa;

    -moz-border-radius:3px;

    -webkit-border-radius:3px;

    -moz-box-shadow:0 0 3px #aaa;

    -webkit-box-shadow:0 0 3px #aaa;

    font-family: 'Verdana' !important;

    font-size:12px !important;

    padding:5px 7px;

    }

    .form-textbox:focus,.form-textarea:focus{

    border-color:#093c75;

    -moz-box-shadow:0 0 3px #0459b7;

    -webkit-box-shadow:0 0 3px #0459b7;

    outline:none;

    }/*--move error below submit button--*/

    .form-button-error{

    display:block;

    text-align: center;

    }

    /*--remove error button--*/

    .form-error-message {

    display: none !important;

    }

    .form-line-error {

    background:none repeat scroll 0 0;

    }/*--submit button move slightly left--*/.form-textarea{

    font-size:11px;

    width:149px !important;

    max-width:149px !important;

    }/*--add red border on error--*/

    .form-validation-error {

    border: 1px solid red !important;

    }

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 07, 2013 at 02:03 PM

    I have injected my CSS codes to your form. Check your form now. Thanks!

    It would also be nice if you could increase the textarea a little down below so it takes up the white gap down to it.

  • Profile Image

    Answered by gulfsouth on June 07, 2013 at 02:28 PM

    I had to use a new graphic to change some text  - can you plug this into the code

     

    http://gulfsouthdisabilitylawyers.com/wp-content/uploads/2013/06/form_background.png

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 07, 2013 at 02:31 PM

    Done. Check your form now. :)

  • Profile Image

    Answered by gulfsouth on June 07, 2013 at 02:43 PM

    thank you - you have beeen sooo very awesome