Below, you’ll find a detailed guide on how to add the Wufoo Shortcode Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Wufoo Shortcode Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Wufoo Shortcode Plugin and the shortcodes it provides:
"Wufoo Shortcode is a handy WordPress plugin that allows you to seamlessly integrate Wufoo forms into your posts or pages using simplified shortcodes."
- [wufoo]
Wufoo Shortcode [wufoo] Shortcode
The Wufoo shortcode is a powerful tool that embeds a Wufoo form into your WordPress site. It extracts attributes, validates them, and creates an iframe or JS embed.
Shortcode: [wufoo]
Parameters
Here is a list of all possible wufoo shortcode parameters and attributes:
username
– alphanumeric identifier for the Wufoo accountformhash
– alphanumeric identifier for the specific Wufoo formheight
– numerical value determining the form’s heightheader
– alphanumeric value controlling form’s header visibilityssl
– boolean value enabling secure form submissionentsource
– alphanumeric value indicating form submission sourcedefaultv
– encoded string setting default values in the formautoresize
– boolean value enabling automatic resizing of the form
Examples and Usage
Basic example – Embed a Wufoo form using the username and form hash parameters.
[wufoo username="yourusername" formhash="yourformhash" /]
Advanced examples
Embed a Wufoo form with a specified height and a hidden header. The form will also automatically resize based on its content.
[wufoo username="yourusername" formhash="yourformhash" height="600" header="hide" autoresize="true" /]
Embed a Wufoo form with default values. The form will use SSL for secure data transmission.
[wufoo username="yourusername" formhash="yourformhash" defaultv="Default Value" ssl="true" /]
Embed a Wufoo form with a specific entry source and SSL disabled.
[wufoo username="yourusername" formhash="yourformhash" entsource="wordpress" ssl="false" /]
PHP Function Code
In case you have difficulties debugging what causing issues with [wufoo]
shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('wufoo', 'createWufooEmbedJS');
Shortcode PHP function:
function createWufooEmbedJS($atts, $content = null) {
extract($atts);
$username = ctype_alnum($username) ? $username : false;
$formhash = ctype_alnum($formhash) ? $formhash : false;
$height = isset($height) && is_numeric($height) ? intval($height) : 500;
$header = isset($header) && ctype_alnum($header) ? $header : 'show';
$ssl = !isset($ssl) || $ssl;
$entsource = isset($entsource) && ctype_alnum($entsource) ? $entsource : 'wordpress';
$defaultv = isset($defaultv) ? htmlentities($defaultv, ENT_QUOTES) : '';
$autoresize = isset($autoresize) ? filter_var($autoresize, FILTER_VALIDATE_BOOLEAN) : true;
if (!$username || !$formhash) {
return "
<div style='border: 20px solid red; border-radius: 40px; padding: 40px; margin: 50px 0 70px;'>
<h3>Uh oh!</h3>
<p style='margin: 0;'>Something is wrong with your Wufoo shortcode. If you copy and paste it from the <a href='https://wufoo.com/docs/code-manager/'>Wufoo Code Manager</a>, you should be golden.</p>
</div>";
} else {
$JSEmbed = "<div id='wufoo-$formhash'>\n";
$JSEmbed .= "Fill out my <a href='https://$username.wufoo.com/forms/$formhash'>online form</a>.\n";
$JSEmbed .= "</div>\n";
$JSEmbed .= "<script type='text/javascript'>var $formhash;(function(d, t) {\n";
$JSEmbed .= "var s = d.createElement(t), options = {\n";
$JSEmbed .= "'userName' : '$username', \n";
$JSEmbed .= "'formHash' : '$formhash', \n";
$JSEmbed .= "'autoResize' : " . var_export($autoresize, true) . ", \n";
$JSEmbed .= "'height' : '$height', \n";
$JSEmbed .= "'async' : true, \n";
$JSEmbed .= "'header' : '$header', \n";
$JSEmbed .= "'host' : 'wufoo.com', \n";
$JSEmbed .= "'entSource' : '$entsource', \n";
$JSEmbed .= "'defaultValues' : '$defaultv' \n";
// Only output SSL value if passes as param
// Gratis and Ad Hoc plans don't show that param (don't offer SSL)
if ($ssl) {
$JSEmbed .= ",'ssl' : $ssl ";
}
$JSEmbed .= "};\n";
$JSEmbed .= "s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'secure.wufoo.com/scripts/embed/form.js';\n";
$JSEmbed .= "s.onload = s.onreadystatechange = function() {\n";
$JSEmbed .= "var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;\n";
$JSEmbed .= "try { $formhash = new WufooForm();$formhash.initialize(options);$formhash.display(); } catch (e) {}}\n";
$JSEmbed .= "var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);\n";
$JSEmbed .= "})(document, 'script');</script>";
/**
* iframe embed, loaded inside <noscript> tags
*/
$iframe_embed = '<iframe ';
$iframe_embed .= 'height="'. (int) $height .'" ';
$iframe_embed .= 'allowTransparency="true" sandbox="allow-top-navigation allow-scripts allow-popups allow-forms allow-same-origin allow-popups-to-escape-sandbox" frameborder="0" scrolling="no" style="width:100%;border:none;"';
$iframe_embed .= 'src="https://'. $username .'.wufoo.com/embed/'. $formhash . '?';
if (isset($defaultv) && $defaultv != ''){
$iframe_embed .= "$defaultv&entsource=wordpress\">";
}
else{
$iframe_embed .= "entsource=wordpress\">";
}
$iframe_embed .= '<a href="https://'. $username .'.wufoo.com/forms/'. $formhash .'?';
if (isset($defaultv) && $defaultv != ''){
$iframe_embed .= "$defaultv&entsource=wordpress\" ";
}
else{
$iframe_embed .= "entsource=wordpress\" ";
}
$iframe_embed .= 'rel="nofollow">Fill out my Wufoo form!</a></iframe>';
/**
* Return embed in JS and iframe
*/
return "$JSEmbed <noscript> $iframe_embed </noscript>";
}
}
Code file location:
wufoo-shortcode/wufoo-shortcode/wufoo.php
Conclusion
Now that you’ve learned how to embed the Wufoo Shortcode Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply