Bronto Email Sign-Up Forms in WordPress

OIT Design staff wear many hats over the course of a typical day. We write WordPress themes and plugins; manage multisite and cPanel configurations; teach training classes; provide content management/strategy consultations; write communications out to campus about changes in technology or policy; and more. If there’s web work that needs to be done by OIT, we’re often involved somewhere in the process.

I have one extra role as a member of the university’s Google Service Team, which oversees Google Apps at NC State. Thanks to some changes in our email infrastructure coming over the next year, I managed to add yet another hat with campus master agreement with Bronto.

Bronto is a Durham, NC-based company that specializes in mass email. Many of their clients are retail or other email marketing, but universities generate a surprisingly amount of “large” mailings—larger than the 2,000-message per day limit set by Gmail. And when you’re sending bulk mailings like this, it’s helpful to have the tools you need to analyze your message and its effectiveness.

You can read more about the campus agreement with Bronto if you’re not already using it. But if you’re already using Bronto, you may have wondered: How do I set up an email sign-up form on my NC State-hosted WordPress website to populate my Bronto email list?

This is a question I’ve gotten a couple of times since the campus agreement began this summer, and there are two equally-valid options.

Option One: Using Bronto Webforms and Text Widgets

The Bronto application includes a form-building tool (under Content > Webforms), along with a collection of default webforms available for you to use. Choose a webform and click the “Preview” icon to view what your form will look like.

Screenshot of the list of available forms in Bronto

On the preview page, scroll down to view the form embed code.

Screenshot of form embed HTML code

You can copy and paste this block of HTML into any Text Widget and display that form in your sidebar or other widgetized area. Note that Bronto also provides CSS styling rules as well. You may need to add those rules to your theme (or use a custom CSS plugin if you’re in one of OIT’s managed environments.)

Note that this option works best when adding forms to Text Widgets, which support HTML. In many WordPress installations, webform code will be filtered out of pages and posts.

Option Two: Bronto Direct Add and Gravity Forms

You can also build your sign-up form natively in WordPress and then connect it to Bronto using their direct add feature. If adding an email sign-up form in the content of your page or post is important, then this is likely going to be your best option. It requires a little more set-up, but it’s incredibly flexible.

Bronto Direct Add

The Direct Add feature can be enabled on your account under Home > Settings > Data Exchange. (If you don’t have permission to change these settings, you may need to contact your subaccount administrator.) Bronto will give you code for an image tag, eg.

Hold onto this code snippet.

WordPress Gravity Forms

All OIT Design clients have the option of using Gravity Forms on their websites. (If it’s not enabled on your site, contact us.) Build your email sign-up form in Gravity Forms. Note that any data you want to collect in your form should have a corresponding field in Bronto. After you’ve finished building your form, go to your form settings and your confirmations, and edit the default confirmation.

Set your confirmation type to Text, and switch from the Visual editor to the Text editor. Add any confirmation message you’d like, as normal. Then paste the image tag code you got from Bronto earlier into the confirmation message.

Building Your Direct Add URL

At this point, you have all of the pieces you need to connect your Gravity Form to Bronto, but you still need to tell it what data needs to go where. You will do that by adding parameters to the source URL for the image tag in your confirmation message.

Bronto has a blog post explaining how to construct your URL with field and list parameters, eg.

You can insert Gravity Form “merge tags” into this URL to map the data collected in each form field in WordPress to the appropriate Bronto field.

For example, here’s the URL structure for the “5 Years of Google” information list sign-up form:

When the image loads—that is, when your user sees the confirmation message—their sign-up data is passed to Bronto.