Making the background transparent using Form Designer

  • Profile Image
    my800Credit
    Asked on March 13, 2015 at 09: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!

  • Profile Image
    Jan
    Answered on March 14, 2015 at 03: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.

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

    Thank you.

     

  • Profile Image
    my800Credit
    Answered 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) 

     

     

    (2) 

    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.

     

           

     

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

     

    Please advise. Thank you so much!

     

  • Profile Image
    my800Credit
    Answered 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.
  • Profile Image
    jonathan
    Answered on March 17, 2015 at 01:56 AM

    Can you please try adding instead the CSS code 

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

      background-color: transparent;

    }

    it becomes like this

     

    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

     

     

     

     

     

  • Profile Image
    my800Credit
    Answered 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!

  • Profile Image
    david
    Answered 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.

     

  • Profile Image
    my800Credit
    Answered on March 25, 2015 at 01: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!

  • Profile Image
    david
    Answered on March 25, 2015 at 03:06 PM

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

    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.

  • Profile Image
    nsimogin
    Answered on May 29, 2015 at 01:50 AM

    This one

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

      background-color: transparent;

    }

    worked

    thanks