Change form fields background to transparent on focus

  • vanessabuck
    Asked on February 20, 2016 at 2: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.
    Jotform Thread 776878 Screenshot
  • Mike_G JotForm Support
    Replied 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;

    }

    Change form fields background to transparent on focus Image 1 Screenshot 20

  • Vanessa
    Replied 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.
  • Mike_G JotForm Support
    Replied on February 20, 2016 at 3: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.

  • vanessabuck
    Replied on February 20, 2016 at 4: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.Change form fields background to transparent on focus Image 1 Screenshot 20
  • Mike_G JotForm Support
    Replied on February 20, 2016 at 5: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.

    Change form fields background to transparent on focus Image 1 Screenshot 20

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

  • vanessabuck
    Replied on February 22, 2016 at 7:07 PM

    Change form fields background to transparent on focus Image 1 Screenshot 20

    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
  • BJoanna
    Replied on February 23, 2016 at 3: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