Making the background transparent using Form Designer

  • my800Credit
    Asked on March 13, 2015 at 9:56 PM

    I tried the solution mentioned without luck. I posted my followup quesitons as answers... not sure that was correct. 

     

    The real estate form is on the Real Estate tab of www.vesellaw.com

     


    Thank you!

  • Jan
    Replied on March 14, 2015 at 3:17 AM

    Please use the Form Designer to make the background transparent. You can make the background transparent by moving the slider all the way to left. Please check the screenshot below. Don't forget to save.

    Making the background transparent using Form Designer Image 1 Screenshot 20

    Hope this helps. Let us know if you need any help.

    Thank you.

     

  • my800Credit
    Replied on March 16, 2015 at 10:29 PM

    I did try this... it seemed like it should have been that easy however I am unable to save the transaparent selection:

    (1) Making the background transparent using Form Designer Image 1 Screenshot 50

     

     

    (2) Making the background transparent using Form Designer Image 2 Screenshot 61

    So it appears selected and then I chose select to save the choice... but the background remains white... this is a screenshot after hitting select and then reopening the selection tool.

     

    Making the background transparent using Form Designer Image 3 Screenshot 72       Making the background transparent using Form Designer Image 4 Screenshot 83

     

    Notice there are now transparent options available, but I can't get the selection to save.  :(

     

    Please advise. Thank you so much!

     

  • my800Credit
    Replied on March 16, 2015 at 10:43 PM

    Also, once this was figured out,

    I also wanted to revise the Thank You page that appears after the form has been successfully submitted to also be on a transparent background.
  • jonathan
    Replied on March 17, 2015 at 1:56 AM

    Can you please try adding instead the CSS code 

    .supernova .form-all, .form-all {

      background-color: transparent;

    }

    it becomes like this

    Making the background transparent using Form Designer Image 1 Screenshot 20

     

    Hope this help. Please let us know if still not resolve.

    Thanks.

     

    --

    We will attend to your other question here http://www.jotform.com/answers/534477

     

     

     

     

     

  • my800Credit
    Replied on March 19, 2015 at 10:30 AM

    I've applied:

    .supernova .form-all, .form-all {

        background-color : transparent;

    }

     

    But I did not see any change to the form :(

    Will you please take a look from your side? www.vesellaw.com --> Real Estate Tab and scroll down to Seller Registatration. 

    Thank you!

  • David JotForm Support
    Replied on March 19, 2015 at 12:23 PM

    Hi,

    Our old themes once they are applied can be a rather large pain to remove.  I had to remove most of the styling but I was able to get your form to finally have a transparent background, here is my cloned version so you can see how it looks:

    http://form.jotformpro.com/form/50774360286964

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    I embedded it to a test site to make sure the background was transparent and indeed it was.  Preserving the old theme as well as having a transparent background may prove to be a bit more challenging.

     

  • my800Credit
    Replied on March 25, 2015 at 1:55 PM

    Thank you David, that looks great!  The only remaining question now is how to update the font color of the form field names because the gray is very difficult to read on the gray background of the site. Otherwise Perfect!

  • David JotForm Support
    Replied on March 25, 2015 at 3:06 PM

    After the changes I made above, you can just change the font color in the form builder:

    Making the background transparent using Form Designer Image 1 Screenshot 20

    I changed it to red and the changes were applied without issue:

    http://form.jotformpro.com/form/50774360286964

    To change the header color, please inject the following custom css, change the color to your liking:

    .form-header{color:white !important;}

    This guide should help you in injecting this custom css: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    That should also work.

    Let us know if you have any further questions and we will be happy to help.

  • nsimogin
    Replied on May 29, 2015 at 1:50 AM

    This one

    .supernova .form-all, .form-all {

      background-color: transparent;

    }

    worked

    thanks