How do I set image as background in Input Table field?

  • ESFA
    Asked on September 25, 2018 at 4:37 AM

    I have looked at input table which may work - but how do I set the background as an image?

    Many thanks.

  • Ashwin JotForm Support
    Replied on September 25, 2018 at 4:47 AM

    Please inject the following custom css code in your form to add a background image in input table fields:

    table.form-matrix-table {

        background-image: url(https://www.jotform.com/uploads/ESFA/form_files/ESFA_-_Logo_Horiz_Rev_RGB_web.jpg);

    }

    .form-matrix-table tr:nth-child(2n) {

        background-color: transparent;

    }

    The following guide should help you how to inject custom css code in form:   https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you need any other changes.

  • ESFA
    Replied on September 26, 2018 at 1:56 AM

    Hi Ashwin,

    Thanks for that.  However, while I see the background image in design mode it doesn't appear in the actual form.  Screen shots of both are below.

    The form I am testing this in is https://form.jotform.co/82557436137866

    1537941356FOPDifference Screenshot 10

  • Ashwin JotForm Support
    Replied on September 26, 2018 at 4:40 AM

    I am sorry for the trouble caused to you. The issue was caused because of the custom css code you have injected in form and also the image URL you have used in css. It seems you have added non ssl image URL and it will not be displayed if you access your form with SSL / https form URL.

    I have fixed this issue in your form. Please check the screenshot below:

    1537951163bgimage Screenshot 10

    I would suggest you to please test your form again and see if the background image is displayed correctly.

  • ESFA
    Replied on September 26, 2018 at 7:38 PM

    Hi Ashwin,

    Many thanks.  Really appreciate your help.

    I'll use the http:// ... jotform ... URL at the moment (until our website is updated).

    When I open the form in different browsers the tick boxes are very different in size.  Can this be fixed?

    1538008170FOPDifference Screenshot 10

  • Kevin Support Team Lead
    Replied on September 26, 2018 at 11:37 PM

    The check boxes appearance changes in Firefox indeed, in order to handle that you may inject the code below instead  of handling the width and height of the fields: 

    .form-matrix-values input[type="checkbox"]{

        -ms-transform: scale(3); /* IE */

      -moz-transform: scale(3); /* FF */

      -webkit-transform: scale(3); /* Safari and Chrome */

      -o-transform: scale(3); /* Opera */

      margin: 10px !important;

    }

    The result can be seen on this cloned form of yours: http://form.jotform.com/82688646339979 

    I hope this helps.