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

    how can i change the background to an image and widen the message box

    Asked by perrymanku on December 13, 2013 at 07:35 AM

    Hello,

     

    I have this form:  http://www.jotform.com//?formID=33463176417961

     

    I would like to add an image as the background and widen the message entry box to be the same width as the other fields. 

     

    Please advise.

     

    Thanks

    Perry

    message JotForm www thanks
  • Profile Image

    Answered by EliezerN on December 13, 2013 at 10:59 AM

    To use an image as background of your form, first you need to remove the orange highlighted URL from the css code your form already has and add the URL of the image you wish to use:

    .form-all{

    padding-top:2px !important;

    background:url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6461_clouds.jpg) no-repeat;

    border: 1px #A4E1FF solid;

    font-family: verdana !important;

    -moz-box-shadow: 1px 1px 3px #E1E1E1;

    -webkit-box-shadow: 1px 1px 3px #E1E1E1;

    box-shadow: 1px 1px 3px #E1E1E1;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    color :#666666;

    }

    And to widen the Textarea/message field as the same width as the other fields, find and change to the desired width the orange highlighted values of the CSS code your form already has:

    form-textarea {

    width: 231px !important;

    max-width: 231px !important;

    margin-left: 2px;

    }

    Please inform us if you need further assistance with this.

    Thanks