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

    Change form fields background to transparent on focus

    Asked by vanessabuck on February 20, 2016 at 02:02 AM
    I created a new contact form , but I'm struggling to make two adjustments :- I would not show the white background when I click on the " name " field to fill , I would like to continue green when I click .- How do I make form fields more to the left? Without overlapping the background image ?- How do I leave the fixed form , without moving ? Fixed wanted to leave as the background image is .You help me with these questions ? Sending a copy of the form to make it easier enteder my doubts .I thank you very much for your attention.
    Screenshot
    contact form make form background image focus form line form fields transparent background-color
  • Profile Image
    JotForm Support

    Answered by Mike_G on February 20, 2016 at 11:32 AM

    I created a clone version of your form, https://form.jotform.com/60504730367957, and added the CSS codes below with the help of this guide: How-to-Inject-Custom-CSS-Codes

    .form-line{

    background-color: transparent !important;

    }

  • Profile Image

    Answered by Vanessa on February 20, 2016 at 12:05 PM
    Thank you for the feedback. I could pack by placing the code you gave me , I worked. I am very happy.Only left me two more questions :- How do I get form get fixed ? For there is a scroll bar and the form information move , I would like to stay fixed with the image placed in the background.- How do I stop the form information further to the left , without overlapping the background image? I do not want the letters stay on top of the background image .Thank you very much in advance.A big hug.
  • Profile Image
    JotForm Support

    Answered by Mike_G on February 20, 2016 at 03:35 PM

    Please try to inject the additonal CSS codes below to resolve your concern. 

    .form-all{

    position: fixed !important;

    margin-left: 20% !important;

    }

    .supernova{

    background-size: cover !important;

    }

    I made the background image cover the whole page at any page size.

    Please check the clone version of your form again. https://form.jotform.com/60504730367957

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by vanessabuck on February 20, 2016 at 04:25 PM
    Hello good afternoon. It includes code that you gave me , but the form is not yet adequate. Sending a copy of the current form , I circled in red the parts that need to be arranged . I wanted to take that message from the top left corner. The other form fields do not appear ( missing the email field and the message, which were cut , on top of the form is the face of the drawing, which is the image that is in the background.Bottom line: There are three items that need fix :- Remove the right option in the upper left corner- Put the form's contents to the left , not to overlap the background image .- Appear entire contents of the form, which includes after the last code I get cut , hidden.Only need these settings in order to use the form on the site .Thank you very much for your attention.
  • Profile Image
    JotForm Support

    Answered by Mike_G on February 20, 2016 at 05:44 PM

    To remove the logo, please add the CSS code below: 

    .form-all:before{

    display: none !important;

    }

    As for the parts of the form that overlaps the background image and parts of the form that's been cut off, it only appears that way because you're looking the from through Preview mode. Try opening your form in a browser and you will be able to see the full form without it overlapping the background image.

    Here's how it should look like when opened on a browser after I have removed the logo using the CSS code above.

    Let us know if you have any further question. Thank you.

  • Profile Image

    Answered by vanessabuck on February 22, 2016 at 07:07 PM

    Hello .. Good evening.I added the code you gave me and it worked, could remove that field with the Logo .

    I copied the html code to put on the blogger platform in contact page, but it was cut , how do I adjust the form and be fully visible ?Thank you for your attention and guidance.A big hug
  • Profile Image
    JotForm Support

    Answered by BJoanna on February 23, 2016 at 03:03 AM

    Considering that you last question is not related to subject of this thread, I have moved your question to separate thread and we will provide you an answer there shortly. 

    http://www.jotform.com/answers/778797