Shipping a package across country lines usually incurs higher costs. If you’re a business that sells products to an international audience, you probably pass those costs along to those customers by charging a higher shipping and handling fee depending on their location. If this is something you’d like to do on your payment-enabled Wufoo form, read on and we’ll show you how you can conditionally attach an international shipping fee based on their input into an address field.
##1. Build a Payment-enabled Form with an Address Field
You’re all probably old pro’s at this, but just in case, you can learn about building your own forms here and making them payment enabled here. Just make sure your form is collecting an address that’s collecting the Country your user is from–a very easy thing to do with our fancy pants “Address” field.
##2. Add a Checkbox for International Shipping
Don’t worry, your users won’t see it. We just need it there because we are going to attach our fee to this particular checkbox and control it programatically from the back end.
Create a multiple-choice field with **1)** only one option labeled “International Shipping” **2)** No title **3)** Pre-checked (click the checkbox next to where you label it) and **4)** has the CSS Keyword “cloak” (this will keep it invisible).
##3. Add a Field Rule
To make this international shipping charge conditional based on the country they select, we need to add a Field Rule. Back at the Form Manager, click the **Rules** button beneath that form and click the New Rule button to add a new Rule.
What we want to do is HIDE our international shipping checkbox (so it won’t be a part of the payment calculation) in the event that the country dropdown be either **blank** or **our home country**.
##4. Attach a Payment Amount to the Checkbox
The logic is now in place. If a country is selected that isn’t the home country, the checkbox for international shipping is “shown” (still visually hidden, but now can participate in payment calculation). We just need to make sure there is a value attached to it. Head back to the Form Manager and click the Payments button beneath the form.
This screen is where you set up all your payment settings, including assigning prices. In this simple example, there is a base price of $15.00. We then selected the checkbox from the “Assign Prices to Field” dropdown and applied the $5.00 fee.
##5. And You’re Done
That’s all there is to it! If you want to see it in action, see our live example here. You can see it work in the Running Total area of the form. And if you submit the form, you’ll be redirected to PayPal where you can see the correct total passes along.
Comments
It’s not clear to me if you only have 2 options or more ? If you have a list of, say, 45 countries you sell to, can you potentially set 46 different shipping cost levels ? Can you group countries in same-cost groups ?
Posted October 10th, 2011 by chris couck.@chris couck – It’s doable, essentially, it’s just more complicated. You’d create more checkboxes for each different option and attach different price values to them. Then you’d create more Rules which hide/show the appropriate checkboxes when different options are selected from the country dropdown. I’d say 45 countries is probably outside the realm of practicality though, unfortunately. I think you’d run into the limit of 50 field rules before you could get all 46 countries done, because you need two rules for each checkbox – one to hide all others, and one to show the correct one.
Posted October 10th, 2011 by Chris Coyier.We have 2 different shipping regions Europe and Rest of World from here in the UK.
Will it ever be possible to assign a bunch of countries to a region (like Europe) so we can apply alternate shipping rates without setting up individual rules for each country?
Posted October 10th, 2011 by Finn.