Have you ever run into the problem of people placing multiple orders by mistake? That leads to them getting upset and your customer support team wasting time refunding them and apologizing for the mistake. Well, we got tired of this problem on a launch so we came up with a workaround to solve the problem of an angry customer. Read on and I’ll walk you through what we did!
Tell me, does this sound familiar? Your customer went through your sales page, filled out your order form and then clicked submit… but nothing happens – so they click it again. If the website isn’t set up to prevent duplicate orders, you just entered into a wormhole of problems.
Sometimes form processing has a lot of moving parts. It can take a few seconds for the server to respond and move the visitor forward. Your customer continues to click the Order Now button (and rack up duplicate orders). In our Abundance Campaign, we ran into a few problems with duplicate orders from clicking the Order Now button multiple times (across our entire campaign). Below are a few of the problems we ran into or foresaw occurring if we didn’t fix this problem quickly:
- The customer receives duplicate invoices for the same book. In our campaign, this led to customers thinking they were being scammed and in some cases wanted to refund the entire purchase including previous orders! They suddenly lost interest in our book, whatsoever! You’re left with a customer walking away with a bad taste in their mouth and not the kind of experience we want for our customers.
- If no one catches the duplicate error, it’s possible the duplicate order gets sent to fulfillment and mailed out. The customer obviously didn’t want multiple books and becomes frustrated when they find out they received and paid more than they wanted for duplicate items. They feel like they have been scammed and become frustrated having to deal with the mess of getting their refund and having to return the additional orders.
- Support staff has to straighten out the mess caused by 1. and 2. during a busy launch.
Depending on the server-side order processing, duplicates are usually caught and handled properly in most cases. However, it’s a good idea to minimize these events using some really basic client-side Jquery ( javascript ).
I’m going to walk you through the two-step process you can use to disable your submit button after it is clicked (like we did) – drastically reducing duplicate orders and frustration for everyone. Let’s get started!
Step 1: Set Up Your Jquery Snippet
This Jquery snippet will work for any type of form submit action and has been tested with both images and submit type input tags. We are assuming a recent stable version of Jquery will be included before the snippet. This article uses the 1.9 branch of Jquery because it works for older browsers. The new 2.x branch removes support for IE (6-8) only supporting IE 9+.
In this example we have a very basic form, with an image type input form button:
This Jquery code can be used for any type of form, this example just happens to be a one-click upsell. The form HTML is very standard except for some of the hiddens required for Infusionsoft. Our “submit fade and disable” code is basic HTML5 and Jquery, nothing else is required.
[code language=”html”]<br /><div class=”order-container”><br /><br /><form id=”upsell-form-button” accept-charset=”UTF-8″ action=”path-to-infusionsoft-form-action” class=”infusion-form” method=”POST”><br /> <input name=”inf_form_xid” type=”hidden” value=”form-id”><br /> <input name=”inf_form_name” type=”hidden” value=”Upsell”><br /> <input name=”infusionsoft_version” type=”hidden” value=”form-code”><br /> <input name=”inf_field_FirstName” type=”hidden” value=”clay”><br /> <input name=”inf_field_Email” type=”hidden” value=”[email protected]”><br /> <div class=”infusion-submit”><br /> <!– standard type=image submit input button tag –><br /> <input id=”add-to-your-order-img” type=”image” src=”/ab/wp-content/uploads/2013/05/add-to-your-order.png”><br /> </div><br /></form><br /><p style=”margin:0;”><br /><a id=”declined-upsell-action” href=”https://www.example.com/ab/upsell-thanks/” style=”font-size:15px;color:#444444;text-decoration:underline;”>No thanks – I’m not interested in this one-time only offer.</a></p><br /></div><br />[/code]
Notice that we have added an attribute to the form button of: id=”add-to-your-order-img”. We also added an attribute to the form itself of: id=”upsell-form-button”
This will let us control the button element and form events using Jquery.
Step 2: Fade Your Order Button
(Let users know their order is being processed)
After including the standard Jquery 1.9 package, we add this Jquery for our form submit event. Make sure all your form validation runs before this piece of code, and it only runs if the form validation returns no errors.
[code language=”js”]<br />/**<br />Make sure Jquery, page content and the DOM are ready (loaded)<br />*/<br />$(document).ready(function() {<br /><br />/**<br />Make sure our button exists, no reason to do anything if no button to disable and fade<br />*/<br />if($(‘#add-to-your-order-img’).length > 0){<br /> /**<br /> Listen for the form submit event<br /> */<br /> $(‘#upsell-form-button’).submit(function(e){<br /> /**<br /> Disable the button, so it can’t submit again<br /> */<br /> $(‘#add-to-your-order-img’).prop(‘disabled’, true);<br /> /**<br /> Decrease the button opacity, so its obvious to the visitor the form is processing and the button is disabled<br /> */<br /> $(‘#add-to-your-order-img’).css(‘opacity’, ‘0.3’);<br /><br /> });<br />}<br />});<br />[/code]
The script listens for the first form submit event. When the event fires the button gets disabled using the .prop Jquery method. There are other ways to do this, but this way is the most cross platform/browser method. Then we reduce the opacity using Jquery .css method, to “fade” the button. This lets the visitor know their click worked, and they don’t need to click the button again. Because the button is disabled, even if they try to click it, the form will not submit again.
It’s really easy to modify this code slightly to get different effects. The fade is just a basic example. We could disappear the button completely by calling this instead:
[code language=”js”]<br />$(‘#add-to-your-order-img’).css(‘visibility’, ‘hidden’);<br />[/code]
Or we could replace the submit button with something else entirely, like a progress animation. Of course the more complex the action, the more we have to worry about cross-platform/browser issues, so its best to keep it simple.
That’s it! Let us know what problems and solutions you have used to prevent duplicate orders in your sales funnels in the comments below.
