I’m a huge fan of Wufoo. They made the annoying form-building/validation/emailing of confirmation/reports super easy. Anyone can build a form in a matter of minutes and run with it! Their system also supports payment integration with Paypal, Authorize.net and even Stripe. So it’s a no-brainer: use Wufoo and save yourself a ton of time.

I had to build a form for friend’s website (running hosted WordPress), where users can order items without the actual shopping cart functionality. So I went ahead, setup the Wufoo forms, customized the fields and design, and embedded the form via Javascript. All seemed good.

However, the order process turned out to be actually very custom (and some of the requirements changed), and as much as I tried to bend this form within Wufoo to do what I needed, it just wasn’t enough: there were a lot of custom calculations with Javascript and that required re-building the form using the API. So I wanted to share some tips on customizing a Wufoo form within WordPress.

First, set up a new page template in WordPress as you normally do.

Then, create your form in Wufoo, so all the form and field information is captured and saved within the Wufoo system. You will be using the API to pull field names and such.

Next, in the Wufoo dashboard, click on “Code” link which will take you to the code manager screen. In the top right corner you’ll see the “API information” button, clicking on which will give you the API key. Copy it.

In your WordPress template, include links to the Wufoo CSS and Javascript files, which should look play australian pokies online like Online Pokies this:

<link href=“https://[your_account_name].wufoo.com/stylesheets/public/
forms/css/index.XXX.css” rel="stylesheet">
<script src=“https://[your_account_name].wufoo.com/scripts/public/
dynamic.XXX.js?language=english"></script>

Wufoo API will give you form/field data as either XML or JSON, I prefer JSON and conveniently enough, PHP has encode_json() and decode_json() functions, which basically will do parsing for you.

Here’s a snippet of code that will get you form data, such as form name, ID, description:

<?php
// Get form data from the Wufoo API
$url = ‘https://[your_account_name].wufoo.com/api/v3/forms.json’;

$ch = curl_init($url);

curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_USERPWD, ‘YOUR_API_KEY:footastic’);  
//keep ‘footastic’ - it’s actually what the API expects, hehe

$json = curl_exec($ch);

// Setting 2nd parameter to ‘true’ will create an assoc. array.  
// If you omit it - result will be returned as an object
$result = json_decode($json,true); 

// You can use this to check what results you’re getting
//var_dump($result);  

//now you’re ready to move through your array and get values
$form_name = $result["Forms"][0]["Name"];
$form_desc = $result["Forms"][0]["Description"];
?>

To get fields, you will perform a similar operation:

 <?php
//Get field data from the Wufoo API
$url = ‘https://[your_account_name].wufoo.com/api/v3/forms/[form_id]/fields.json’;
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_USERPWD, ‘YOUR_API_KEY:footastic’);
$json = curl_exec($ch);
$result = json_decode($json,true);
$fields = $result['Fields'];
curl_close($ch);
?>

Now that you have fields, you can create your page output as you desire, add custom functionality, and don’t forget to test.

This seems like still coding a good chunk of functionality, right? Well, yes, but you don’t actually need to do validation, reporting, payment processing and such, so it’s still less that you normally would do, if you coded everything from scratch. Also, admins will be making updates right in the Wufoo dashboard, so they won’t be touching the code or asking you to change copy for fields. As long as they save their changes, they will be dynamically pulled into the form on WordPress.