Can you create forms which allow a background to be used or show through when placed in a website?

  • Dexterquinn
    Asked on April 30, 2015 at 6:14 AM
    Jotform Thread 561814 Screenshot
  • Welvin Support Team Lead
    Replied on April 30, 2015 at 9:26 AM

    Hi,

    Yes, you can do this in our Form Designer. In the form designer, just head over to "Background Image" tab and upload your images:

    Can you create forms which allow a background to be used or show through when placed in a website? Image 1 Screenshot 20

    Let us know if you need further assistance on this matter.

    Thanks

  • AaronSiciliano
    Replied on April 30, 2015 at 9:38 AM

    There are two different ways to set a background image for your form. The way i would recommend for you to do so is with the built in tools in the form designer.

    To get to the background image tool in the form designer open your form in the form builder and then click on the Designer button.

     

    Can you create forms which allow a background to be used or show through when placed in a website? Image 1 Screenshot 50

     

    When inside of the form designer there is a Background Image section under the Design tab. Inside of this tab it allows you to upload an image or directly input a link. I would recommend inputting a link to an image on your own server so you control the longevity of the image.

     

    Can you create forms which allow a background to be used or show through when placed in a website? Image 2 Screenshot 61

     

    Alternatively you can also set the background-image directly in the form CSS code. This is also the location that you would want to modify the opacity of the form if you wish to attempt to make the form transparent. In my personal recommendation if you only want a transparent background image and not an entire transparent form the best way to achieve this would be to modify your chosen background image in a photo editing software and make it a transparent image there and save it in a format that supports transparency such as PNG.

     

    In order to input your own custom css please open your form in the form builder. When inside of the form builder click on the Preferences button and then open the Form Styles Tab. You can type your custom CSS styles inside of the Inject Custom CSS input box. In my example i input the following CSS.

     

    .supernova { background-image:url("https://cms.jotform.com/uploads/image_upload/image_upload/AaronSiciliano/32981_paisley.png") !important; }

     

    Can you create forms which allow a background to be used or show through when placed in a website? Image 3 Screenshot 72

     

    And the end result of my example form.

     

    Can you create forms which allow a background to be used or show through when placed in a website? Image 4 Screenshot 83

     

    Please let me know whether this answered your question or if you have any followup questions.

     

    Thanks, Aaron