Wufoo is a form builder that allows for more complex workflows than the built-in Rocketspark forms. You can embed a Wufoo form into your website using the Code Block.
- Sign into your Wufoo account. Please note that this is a third-party integration so there may be a cost associated with using their services.
- You’ll be taken to your Form Manager. Forms that you have created previously will appear here.
- Click on the Share Form option beside the title of the form you want to add to your site.
- Scroll down to the Embed a form on your website section. Select the iframe tab and copy the code.
- Go back to your Rocketspark dashboard, click the Editor button at the top of the page and find the stack where you want to insert the form. Add a new Code block.
- Paste the Wufoo code into the HTML block and click Publish.
- Your Wufoo form should now be successfully embedded, ready for your customers to fill out!
Advanced Tips & Troubleshooting FAQ
Why is my Wufoo form cut off or displaying a scrollbar?
This usually happens because the iFrame has a fixed height. To fix this, look at the code you pasted into the Rocketspark Code Block and locate the height attribute (e.g., height="500px"). Simply increase that number until the entire form is visible without scrolling.
My form isn't loading for some visitors. What’s wrong?
This is often a security issue. Ensure your Rocketspark site has an active SSL certificate (the URL should start with https://). If your site is insecure, many modern browsers will block "mixed content," meaning they won’t display the secure Wufoo iFrame on an insecure page.
Do I need to worry about the form looking good on mobile?
Yes. While Wufoo forms are generally responsive, you should always test the page on a mobile device after publishing. If the form looks cramped, you may need to adjust the width settings in your Wufoo Form Settings or ensure the Rocketspark stack is set to "Full Width."
Is it always better to use Wufoo over the native Rocketspark Form?
Not necessarily. You should only use Wufoo if you need advanced features like conditional logic, file uploads, or complex payment integrations. For simple "Contact Us" or "Newsletter Sign-up" forms, the native Rocketspark Form Block is better because it inherits your website’s fonts and colors automatically.
How do I ensure my form matches my website's branding?
Since the iFrame pulls the design directly from Wufoo, you should use the Wufoo Theme Designer to match your website’s hex colors and fonts before copying the embed code. Rocketspark’s editor cannot change the style of the content inside the Code Block.
Please note that these may change depending on Wufoo. If you do note these instructions are not helping you, please feel free to let support@rocketspark.com know. We will update the guide accordingly.