PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Gravity Forms Styling Checkboxes

  1. Not sure if this is beyond the scope of support, but I can't get this to work for the life of me.

    I found this link in another forum post on here to use this script for styling buttons and checkboxes: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

    I've installed everything in the .js, added the CSS, but I can't get it to work. The script is being called in the header, so I know that much is working, but I can't get the checkboxes to use the image associated with the script.

    Here's the link if anyone can help: http://myimpact.impactpartner.com/launch

    Thanks

    Posted 11 years ago on Friday January 18, 2013 | Permalink
  2. Oh, click on 'Business Cards' to see the form.

    Posted 11 years ago on Friday January 18, 2013 | Permalink
  3. I clicked on the top row, center item (Business Cards 02) and the "Order" button but I got this URL and no form:

    http://myimpact.impactpartner.com/launch/#branding_businesscards

    Is there a direct URL to the form embedded in a page?

    Posted 11 years ago on Friday January 25, 2013 | Permalink
  4. My apologies. I accidentally deleted it out of there. It has been reinserted.

    Additionally, I found a different method that works with everything except for gravity forms.

    The JS is

    jQuery("input[type='checkbox']").each(function() {
        var jQuerythis = jQuery(this);
        jQuerythis.hide();
    
        var jQueryimage = jQuery("<img src='http://developer.impactpartner.com/albertson/wp-content/uploads/2013/01/checkbox-unchecked.png' class='testbox' />").insertAfter(this);    
    
        jQueryimage.bind("click", function() {
            var jQuerycheckbox = jQuery(this).prev("input");
            jQuerycheckbox.prop("checked", !jQuerycheckbox.prop("checked"));
            checkImage();
        })
    
        function checkImage() {
            if(jQueryimage.prev("input[type='checkbox']").prop("checked")) {
                jQueryimage.attr("src", "http://developer.impactpartner.com/albertson/wp-content/uploads/2013/01/checkbox-checked.png");
    			jQueryimage.attr("class", "testbox");
            } else {
                jQueryimage.attr("src", "http://developer.impactpartner.com/albertson/wp-content/uploads/2013/01/checkbox-unchecked.png");
    			jQueryimage.attr("class", "testbox");
            }
        }
    
    });
    });

    You will see it working at the bottom of the page with Contact Form 7. I have tried adding the class "testbox" in the CSS Class Name of the checkbox in Gravity Forms but it doesn't seem to work for me.

    Posted 11 years ago on Monday January 28, 2013 | Permalink
  5. I did not see any checkboxes to style in the Gravity Form in the modal dialog when I clicked on business cards.

    Can you try embedding this form in a regular WordPress page and see if your script works there. If it does, we have to work on getting the scripts loaded in the modal. If it does not, then we have other problems.

    Posted 11 years ago on Tuesday January 29, 2013 | Permalink
  6. I embeded a duplicate of the form at the bottom of the page and the check boxes don't seem to work with Gravity Forms.

    Posted 11 years ago on Tuesday January 29, 2013 | Permalink
  7. I also added a content form 7 into the "Logo" selection item to see if it was an issue with the popup but it seems to be working fine within the popup.

    Posted 11 years ago on Tuesday January 29, 2013 | Permalink