-
ESFAAsked on September 25, 2018 at 4:37 AM
-
Ashwin JotForm SupportReplied 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.
-
ESFAReplied 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
-
Ashwin JotForm SupportReplied 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:
I would suggest you to please test your form again and see if the background image is displayed correctly.
-
ESFAReplied 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?
-
Kevin Support Team LeadReplied 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.