Last updated March 31, 2016

Craig Grella

Turn Your WordPress Website Into a Lead Generating Machine

Your fantastic website runs on WordPress and your CRM of choice is Salesforce, but you just can’t seem to get the two applications to play nice together.

Fret no more, in this daily tip we’re going to show you how to integrate WordPress and Salesforce, and turn your website into a lead generating machine!

A note before we start: We’ll be using the Web-to-Lead feature of Salesforce, which requires you to be using their Group Edition platform, or higher.

Why Integrate WordPress with Salesforce?

The benefits of using a CRM to track potential leads and customers are numerous – too numerous to list in this article, but it is safe to say that businesses which track and analyze sales perform much better than businesses which do not.

There are a few plugins out there which connect the two platforms, and even a few applications on the Salesforce side of things, but they are usually premium offerings sold at ridiculously high prices. Effectively, this puts them out of reach for the person just starting an e-commerce site.

WordPress is a fantastic web platform, and it is probably used for most of your front-end sales process. And because WordPress is not exactly the smoothest running CRM, your customer data is either ignored completely, or kept solely on Salesforce (and then ignored).

And that’s exactly why Salesforce makes the Web-to-Lead form available to us.

Salesforce Web-to-Leads

Your Salesforce account includes a feature called Web-to-Leads, which lets you design a form with contact fields you wish to track, and then gives you the HTML code to install that form on nearly any website – including your WordPress powered blog.

Creating a Web-to-Lead Form

Log into your Salesforce account and locate the SETUP menu. It will be located in the drop down menu that is your name in the top right corner of the site.

Once there, on the left sidebar admin panel, navigate to APP SETUP, underneath the “Customize” option choose “Leads” and then **Web-to-Lead.**

In your Web-to-Lead settings, make sure Web-to-Lead is enabled. If not, click the edit button and enable it. Save your changes and return to the Web-to-Lead settings area.

Click the “Create Web-to-Lead Form” button to create a new form for usage in your website.

In the box on the left you’ll see all the fields available for usage. The box on the right shows the fields you’ve selected for the actual form.

Underneath the boxes you’ll see space to enter a URL. This is the page to which you’ll be redirecting users after they fill out the form on your site. It’s not required, but it’s a nice touch to bring users to a page that lets them know the form has been submitted successfully and that you’ve received their info. Of course, this requires you to already have that page operating on your site.

When you’re happy with the fields and have filled out the redirect URL, click the “Generate” button.

Copying the Web-to-Lead Form Code

Salesforce automatically generates the required HTML code to produce the web-to-lead form. Highlight the code in the window, copy it, and visit the WordPress post or page on which you’d like that form to appear.

Editing the Web-to-Lead Form in WordPress

Take the code from Salesforce and paste it into the HTML code area of your post or page editor. In WP 3.5, that area of the post / page editor was named “text” and its tab can be found at the top right of the editing area.

Unfortunately, Salesforce gives us some extra code that is not needed. These are commented lines and a definition of character set, which WordPress already defines.

Therefore, you can delete everything before (but not including) this line:
{code type=php}

{/code}
You’ll also want to delete the commented section, which looks like this:{code type=php}

{/code}This is optional code to help developers debug the form, but we wont be needing that here.

Viewing the Web-to-Lead Form On a WordPress Page

What you’re left with is clean form code in HTML. When you’re done editing your page, you can publish and view it.

Web form on page - no css — Web-to-Lead form without styling

The form input boxes are placed just to the right of our form labels. These two field columns are way too close together, so we’re going to make some css changes to make our form more pleasing to the eye.

But first, we’ll need to add some classes to the Web-to-Lead form code, which will make styling much easier, and make sure that changes we make here don’t affect other forms that might be on our site already.

Adding Classes to the Salesforce Web-to-Lead Form Code

Return to your WordPress page HTML tab. We’re going to add some classes to these form elements.

Find the first line of the form code. It should look like this:
{code type=php}

{/code}
We’re going to add a class by inserting the words id=“sfwtlform” right after the word “form”. Your edited line should then be as follows:
{code type=php}

{/code}
Now, find the last line of the form code, before the closing line for the form. This is the code that renders the form button.
{code type=php}{/code}
We’re going to add an id to this code as well: id=”sfwtlbutton”. This will allow us to style the button separate from the other form input fields. The edited line of code should look like this:{code type=php}{/code}Save your changes and re-publish the page. This wont change the look of your front-end form…yet. We’ll do that in a moment with some CSS.

A note regarding pasting code: sometimes when you copy and paste code from a browser into an editor straight double quotes copy over as curly quotes. This will throw an error, so we recommend actually typing the id=“sfwtlform” straight into the form code, rather than copying it from this article and pasting it in.

Cleaning Up Your Web-to-Lead Form with CSS

The idea of editing your CSS is to make this web-to-lead form more closely match the look and feel of your site. To do that, we’ll be editing the style.css file.

In my example, I’m using a stock installation of the Twenty Twelve theme on WordPress 3.5. That style sheet is located in the theme directory. Your file will likely be in a similar place, and that path will look something like this:
http://YOURSITE.com/wp-content/themes/YOURTHEMENAME/style.css

You’ll need to use a custom code editor or edit the theme file directly in the WordPress code editor (not recommended). Once you have that file opened, you can create a new section at the bottom of the file and enter the following code:
{code type=php}
/* Salesforce Web to Lead Styling */
#sfwtlform label {width: 150px; display: inline-block;}
#sfwtlform input {width: 200px;}
#sfwtlform #sfwtlbutton {width: 100px;}
{/code}

Don’t worry, we’ll break it down line by line for you.

The fist line of code is a comment. It’s not actually required, but it helps keep our code organized:
{code type=php}
/* Salesforce Web to Lead Styling */
{/code}

The second line tells our browser to target the form with an id = sfwtlform, and only that form.
{code type=php}#sfwtlform label {width: 150px; display: inline-block;}{/code}
That will make sure any styling we do here applies only to this form and no other forms that might already exist on your site, like email newsletter forms.

Here, we are setting the label to display as an inline block element, which makes setting a width of 150 pixels possible too. That gives us even separation between the label and the input field as shown.

input fields separated — Custom CSS can help separate form fields, making them easier to read and fill out

The third line tells the browser that the input fields should be 200 pixels wide.
{code type=php}#sfwtlform input {width: 200px;}{/code}
This gives our visitors a bit more room to enter their information.

The fourth and final line tells the browser to make the submit button only 100 pixels wide.
{code type=php}#sfwtlform #sfwtlbutton {width: 100px;}{/code}
The submit button is also an input button, so without this line, the submit button at the bottom of the form will be as long as the input text fields, which would look horrible.

The Finished Product

When you’re all done, the finished product should look something like this:

The finished form is much cleaner and easier for your users to read and fill out. The labels are lined up correctly, and the space before the input field is uniform. The input fields are of uniform length, giving the user more room to enter longer lines of text without having to worry about scrolling.

Of course, you can change the pixel widths, and even the colors, of these form fields to more closely match your site design.

Your New Lead in Salesforce

When a visitor fills out the Web-to-Lead form, his or her information will automatically be sent to your Salesforce application, and placed in the LEADS section. That makes following up with your potential customers much easier than searching the member/user fields when trying to use WordPress as a CMS.