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.

Signature JS breaking

  1. Hi All,

    I've started to experiment with the signature add-on for a private client portal. The objective is to allow logged-in users (my clients) to review purchase orders and creative proofs, and give approval via digital signature as opposed to downloading, signing and faxing or scanning the docs back to me.

    So far I've created a simple form for approval of a creative proof, with the image added in an HTML field with prettyPhoto (for full-screen preview). Below the HTML field is a radio field with two options - "This is Approved" and "Changes Required". If the first radio is selected, three additional fields display below - simple name field and date filed (inline) and the signature field below. These three fields are controlled by conditional logic based on the radio selection.

    On the front end, the signature container does not display and just loads an empty block, and a script debug returns a SCRIPT#5009 error that SuperSignature is undefined. My theme is running jQuery 1.7.2 - from the page source:

    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.1'></script>

    My header also loads jquery-ui-1.8.13.custom.min, jquery.animate-colors-min, jquery.backstretch.min, prettyPhoto, gmap3.min and a custom.js to control mapping and navigation funcitons. Also, I'm currently using Gravity v1.6.4.5.

    I'd like to be able to share a link can't since this is a private client-only portal. Given what I've provided above, does anyone have thoughts or suggestions on implemenitng a fix?

    Thanks in advance!

    Posted 12 years ago on Thursday July 26, 2012 | Permalink
  2. David Peralty

    Are there any JS issues when you inspect the page using Google Chrome or other JS inspector tools? Is your JQuery loading in the header? Can you try Gravity Forms 1.6.5.1? What version of WordPress are you using? What theme are you using?

    Posted 12 years ago on Thursday July 26, 2012 | Permalink
  3. Hi David,

    No, the only JS issue was with SuperSignature - tested in IE9 developer tools and Firebug. I updated to GF 1.6.5 today, but haven't see an auto-update for 1.6.5.1. Is this a maintenance or test release? I'm running WP 3.4.1 with Navigator 1.3 (which I've updated jQuery from 1.5.1 to 1.7.2 and Gmap3 from 3.3 to 4.1).

    I also use this theme for my public site and will try to throw up a quick test page so you can see the behavior.

    Posted 12 years ago on Thursday July 26, 2012 | Permalink
  4. David -

    The good news is that I was able to display the form as intended in both a test page and test post. The bad news is that my site setup requires the form to function on a category/archive page, which is obviously causing havok with the js. Does GF natively hook into archive pages or just pages/posts? I saw another forum post about hardcoding a form to an archive template, but it won't work in my environment. I just need to display the form whenever a signature/approval is needed for documents specific to a particular category.

    Hope this makes sense (and really hope you see something here that I'm missing). Thanks.

    Posted 12 years ago on Friday July 27, 2012 | Permalink
  5. It does not normally work on Archive Pages. I've run into that problem in the past, and on archive pages I usually create an excerpt that has a link to the full post, so that excerpt is seen on the archive page, and there is no temptation to try and submit from the archive page.

    Posted 12 years ago on Friday July 27, 2012 | Permalink
  6. Yup, I was thinking the same thing. I don't want to rule out the archive option completely, so I'm going to play around with a lightbox-embed solution first, and then revert to the post or page method if that doesn't work out. I'll post back with any breakthroughs.

    Posted 12 years ago on Saturday July 28, 2012 | Permalink
  7. OK, please do let us know how you work it out. Thanks.

    Posted 12 years ago on Saturday July 28, 2012 | Permalink
  8. It took a little tinkering but I finally got this working with a slightly different approach. I started with this forum post (see Rob's secon-to-last comment and link with instructions) which got the form to work successfully with the signature add-on in an archive page without making any changes to the template.

    Because I want to be able to use the same form for getting different creative proofs approved on different archive/category pages, I decided to remove the HTML image block from the form itself, and instead just change the image in the Easy Fancybox <div> container to include it in the modal window. Here's the markup that I'm using:

    <div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1"><img src="http://domain.com/images/creative-proof.jpg" width="800"><br />
    [gravityform id="1" name="Creative Proof Approval Form" title="false" description="false" ajax="true"]
    </div></div>
    <a href="#fancyboxID-1" class="fancybox">Click for creative proof</a>

    In order to know which creative proof is approved whenever a form is submitted (remember, using the same form for multiple categories), I just used the {embed_post:post_title} merge-tag in my form notification settings.

    While I'm really pleased that this is working as intended, there is one more item on my wish-list for this form - I'm not sure if it can be done. In it's current state, any of my approved users (my client's marketing team) can view and submit a response to the form without knowing if anyone else has already submitted a response. My plan to control this is to manually delete the markup from each category description whenever a response is received, though in an ideal world the form would just display a default message saying "This has been reviewed by {user:display_name} and approved as of {date_mdy}" if a response has already been submitted. I know this can be added in the form settings under entry limits, but don't think this would work on a form that will be used multiple times (unless there's a way to make the entry limit conditional to the embed url). Any thoughts?

    BTW - for anyone looking to replicate this behavior, I should note that I'm using HTML and shortcodes in my archive pages by adding the markup directly to my individual category descriptions and not my making changes to my template. This is not supported by default in WP, so I'm using the Rich Text Tags plugin to provide this funcitonality. Just FYI that category descriptions need to be shown in order to make additions (go to Posts > Categories > Edit > Screen Options to enable).

    Hope this is helpful for anyone else looking for a similar solution. Thanks.

    Posted 12 years ago on Sunday July 29, 2012 | Permalink
  9. That's a very elaborate solution you've come up with. Thanks for posting how you worked that out.

    Posted 12 years ago on Monday July 30, 2012 | Permalink