B2B Website Design Tips: Embedding vs Integrating Forms

Tips for B2B Website design: Embedding vs Integrating Forms

Forms are a critical part of any B2B website design. Forms make it easier for users to contact you and, depending on how they’re set up, can provide you with more information or context about your users. If you’re using a CRM like Zoho or a marketing automation tool like HubSpot, you’ll eventually decide how to add those forms to your B2B website. Making this decision can be difficult, especially for less technical marketing directors. But Bop Design is here to help!

What Is a Form?

First, let’s make sure we’re all on the same page. A form is a method of allowing your users to contact you without opening an email client or logging into something like Gmail. You can decide what type of information the user provides by adding specific fields and making those fields required (or optional).

Forms are great because they’re often easier for your users. You can also add some spam protection to your forms, which is harder to do if you just display your email address on your website. Depending on how your forms are set up, you can have them notify multiple people, feed into a CRM or another tool, even send a text message!

Defining Embedding vs Integrating

Because it’s easy to get lost in jargon, let’s define our terms. In the context of this blog post, embedding a form means taking form code from a third-party system and adding it directly to your B2B website.

Integrating, in contrast, means hooking up the CRM or marketing automation tool to a form on your B2B website. Integration assumes a form that exists separately from the other system. At Bop Design, 99% of the time the independent form we’re integrating with is a Gravity Form. We really like using the Gravity Forms plugin because it integrates with a lot of different tools. Even if it doesn’t integrate with your tool out of the box, Zapier can usually help with that. But we’ll talk about Zapier a little later.

Pros of Embedding

You still with me? Then let’s talk about the advantages of embedding a form.

While this varies a little from tool to tool, the biggest advantage of embedding a form is functionality. An embedded form can often do things that an integrated form simply cannot do. For example, you can’t use Pardot’s progressive profiling feature unless you embed their forms on your website.

(For those who may not be familiar with progressive profiling, it’s the ability to progressively gather more information about users who are filling out forms. For example, you can ask for someone’s name and email address first. Then, if they go to fill out a second form, then you can ask for their job title. Progressive profiling is helpful because it allows you to collect a lot of information about a person over time without asking for too much upfront.)

Embedding a form is typically a little easier than integrating a form. Embedding a form usually includes these steps:

  1. Create the form in your marketing automation tool or CRM.
  2. Get the embed code.
  3. Login to your website and decide where you want the form to go.
  4. Paste the form into the correct field.

Of course, depending on how your website is built, the last step might be a little more complicated.

Embedding forms also reduces the number of steps a form submission goes through. An embedded form goes directly into your marketing automation or CRM, it doesn’t have to touch anything else first. Fewer steps means fewer potential points of failure and also fewer pieces to troubleshoot if something does go wrong.

When Embedding Works

Let’s talk about a specific situation in which embedding a form might be the best choice for B2B website design. Let’s say you have dozens of valuable gated content pieces on your website. You know from past experience that the same person will download different pieces of content, filling out the form each time.

If you’re using a tool like Pardot, you can use progressive profiling to build a more complete picture of your users. You can set up your forms to first ask for your user’s email address, and their email address only. With progressive profiling, the next form that same user fills out will remember their email address and add a new field—maybe their job title. The third form they fill out can ask them for something else, like company name.

Progressive profiling is particularly helpful because it reduces the number of form fields your user has to complete but provides the opportunity for more information. Typically, shorter forms mean more conversions—if you have too many fields, users are more likely to abandon the form. Fewer fields + still getting information = a win for B2B marketers.

Cons of Embedding

Is there a downside to embedding forms? Definitely.

Sometimes embedded forms look ugly. While there are (usually) styling options available, they may be limited or they may cause other issues. You might also need to have different versions of the same form just to make it look different. For example, if you have a request a demo form that needs to go on a white background, you’ll need to use dark text for the field labels. If that same form also needs to be on a dark background, you’ll probably want white text. Depending on what marketing automation tool or CRM you’re using, that might require two different forms.

If you ever move away from the CRM or marketing automation tool you’re currently using, your forms will need to be replaced. If every form comes from Pardot and your Pardot account is closed, all of your forms disappear. This isn’t a problem if you’re happy with whatever tool you’re using. If you think you might move to a different tool before you redesign your site again, you might want to think twice about embedding.

Using only embedded forms means everything has to go into the same system. While this generally isn’t a problem, there are a few specific cases that might not work. For example, if you want users to be able to apply for jobs through your website (as opposed to using an applicant tracking system), then job applicants would have to feed into, say, HubSpot. This could cause some confusion with your sales staff (if the new contacts aren’t labeled properly) or they could cause you to pay more for a tool that charges by number of contacts.

Example of a time not to embed: can’t style ugly pardot forms.

Pros of Integrating

We’ve looked at the pros and cons of embedding forms, so now let’s look at the good and bad of integrating forms. Because we use Gravity Forms at Bop Design for B2B web design, we’ll focus on that plugin. There are ways of integrating other form plugins like Contact Form 7, WP Forms, or Ninja Forms.

The biggest advantage of integrating your CRM or marketing automation tool with a separate form plugin is the control you have over styling. While tools like HubSpot, Pardot, and Marketo give you at least some control over how the form looks, your mileage may vary. Gravity Forms (and most other form plugins), however, pose no problems. While we recommend keeping your froms recognizable as forms, you can do virtually anything with them in terms of how they look.

Are you committed to Pardot? Maybe you’re looking at HubSpot? Or maybe Act-On is calling your name? If you’re considering moving to a new tool, then you probably want to integrate your existing tool with a separate form. If you use a form plugin like Gravity Forms, then those forms live in your website, instead of whatever tool you’re considering ditching.

As a bonus, one of the reasons we love Gravity Forms at Bop Design for B2B websites is that it integrates with so many third-party tools. And even if Gravity Forms doesn’t integrate directly with your tool, it has a great Zapier add-on. Zapier connects with so many apps—it’s almost guaranteed to work with yours.

Example of a time to integrate: using a tool that doesn’t have embeddable forms

Cons of Integrating

If you get complete control over how a form looks, then why not always use Gravity Forms? Because you may lose some functionality in your marketing automation tool or CRM offers. The most common one we see is progressive profiling. If you aren’t sure what functionality you might lose by integrating, it’s always best to talk to your agency partner about what you do want to accomplish so they can help guide you.

For most CRMs and marketing automation tools, integrating with Gravity Forms requires three steps:

  1. Create a form in the tool
  2. Create a form (with the exact same fields) in Gravity Forms
  3. Connect those two forms

While creating a form in Gravity Forms isn’t difficult, it is an extra step. If your form is complicated, it can be time-consuming. The exact method you use to connect your Gravity Form to your tool will vary, but it nearly always means you have to match up each field in each form. In addition, you have to make sure the same fields are required in both versions of the form. If you make the First Name field required in Pardot and someone leaves that field blank when they submit the form on your website, that lead will not feed into Pardot.

Example of a time not to integrate:

While Zapier can be a plus when using Gravity Forms, it’s also another tool to keep track of. Depending on how many form submissions you receive in a month, you might need to pay for Zapier. As of the time this post was written, Zapier allows up to 100 submissions per month under their free account. If your volume is higher than that, then you also need to factor in the Zapier cost.

Ready to chat about your next B2B website design project? Let’s chat.

Want to show your colleagues how smart you are? Get actionable ideas written specifically for B2B marketers – subscribe to the BeBop newsletter today!

Related Posts
B2B Branding | B2B Website Design

B2B Branding Trends for Technology Firms 

B2B Website Design | Web Development

Boost Your B2B Website’s UX: Five Spots to Focus On 

B2B Website Design

Google PageSpeed Insights for B2B Websites