check box hidden in embedded form

  • Profile Image
    djbutton
    Asked on October 24, 2015 at 04:19 AM

    All the check boxes are invisible in the embedded form, but are visible in the linked form.

  • Profile Image
    Boris
    Answered on October 24, 2015 at 07:23 PM

    I can see that the same is happening when your form is accessed directly:

    https://form.jotformpro.com/51763154697970

    I have managed to narrow it down - the background image that is used to display your checkbox is unable to be loaded through a secure HTTPS connection. You can see that the checkboxes display correctly when the form is opened through a HTTP link:

    http://form.jotformpro.com/51763154697970

    In order to rectify this problem, please try adding the following CSS into your form:

    input.form-checkbox[type="checkbox"] + label { background-image: url('//cms.jotform.com/uploads/image_upload/image_upload/Boris/35086_reg_form_check_button_orange.png') !important; }

    What this code does is, it uses the same image, but I have uploaded it to a different place that can be accessed through a secure link - so it is able to be loaded on a secure form. You can add the CSS code by opening your form in the Designer, and pasting it into the textbox under the CSS tab:

    Alternatively, you can host the image of the checkbox yourself at any location that can be loaded through HTTPS, and then use that image link instead of the one I've used. Your form will display like this after applying the fix:

    Please let us know how it goes.

  • Profile Image
    djbutton
    Answered on October 24, 2015 at 11:20 PM

    Hi Boris,

    You are a legend. I appreciate your help sorting this out. I would never have thought to look at the https angle.

    Your code works perfectly! Your instructions were clear and precise. Thank you.

  • Profile Image
    ashwin_d
    Answered on October 25, 2015 at 01:01 PM

    Hello djbutton,

    On behalf of my colleague, you are welcome. I am glad to know that my colleague's custom css code solved your problem.

    Do get back to us if you have any questions.

    Thank you!