Automatic, silent Gravity Forms submission (no confirmation, with multiple entries allowed)

917 views Asked by At

I've got a head scratcher on my hands.

I'm building out a site for a client. They want their social sharing saved in gravity forms. So I have an initial form passing data to the confirmation page which holds all their social share links. It's a "vote for the best..." scenario, and social shares get your candidate an additional vote each.

I have built a second form to store the social shares, with two fields holding the candidate data (passed via query from the initial vote) and the network they shared on.

The whole form is hidden fields (no user input needed), and is submitted when the user clicks the share button for a particular network.

My problem is this: when gravity forms submits, it either removes the form from the page and replaces it with a confirmation text block, or it refreshes the page (preventing the share altogether), or it redirects to a new url altogether (again preventing the share).

I tried an alternate method of saving each network to their own separate form (so the form submit of one doesn't prevent the others) but the form submit removes ALL forms, not just its own, apparently.

Bottom line is this: I need a way to silently submit multiple instances of the same GF form on the same page, without redirecting the user, while also storing their credit for sharing each link once and only once.

The Code

//social share links
<a id="fb" class="share-link" href="javascript:void(0)" 
onclick="javascript:genericSocialShare('http://www.facebook.com/sharer.php?u=http://www.oneupthevote.org', 'facebook')">
[icon name="facebook" class="" unprefixed_class=""] SHARE ON FACEBOOK</a>

<a id="tw" class="share-link" href="javascript:void(0)"
 onclick="javascript:genericSocialShare('http://twitter.com/share?text=One Up The Vote&url=http://www.oneupthevote.org', 'twitter')">
[icon name="twitter" class="" unprefixed_class=""] SHARE ON TWITTER</a>

<a id="li" class="share-link" href="javascript:void(0)"
 onclick="javascript:genericSocialShare('http://www.linkedin.com/shareArticle?mini=true&url=http://www.oneupthevote.org', 'linkedIn')">
[icon name="linkedin" class="" unprefixed_class=""] SHARE ON LINKEDIN</a>

<script>
    // pushes share function and sends social network here for form storage
    function genericSocialShare(url, ref) {
    window.open(url,'sharer','toolbar=0,status=0,width=648,height=395');

    //Pull vote from url query string
    var urlParams = new URLSearchParams(window.location.search);
    var vote = urlParams.get("vote");

    //select form by network, insert value and force form submission
    if(ref == "facebook") {
        document.getElementById("input_2_1").value = vote;
        document.getElementById("gform_submit_button_2").click();
    } else if(ref == "twitter") {
        document.getElementById("input_3_1").value = vote;
        document.getElementById("gform_submit_button_3").click();
    } else {
        document.getElementById("input_4_1").value = vote;
        document.getElementById("gform_submit_button_4").click();
    }
}
</script>

//hidden gravity forms...forms
[gravityform id="2" title="false" description="false" ajax="true"]
[gravityform id="3" title="false" description="false" ajax="true"]
[gravityform id="4" title="false" description="false" ajax="true"]

Any suggestions? If I can offer additional insight, let me know. These are strange requirements, I get it.

0

There are 0 answers