{"id":106101,"date":"2012-12-24T09:00:31","date_gmt":"2012-12-24T14:00:31","guid":{"rendered":"http:\/\/wpmu.org\/?p=106101"},"modified":"2016-03-31T01:46:58","modified_gmt":"2016-03-31T05:46:58","slug":"turn-your-wordpress-website-into-a-lead-generating-machine","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/turn-your-wordpress-website-into-a-lead-generating-machine\/","title":{"rendered":"Turn Your WordPress Website Into a Lead Generating Machine"},"content":{"rendered":"

Your fantastic website runs on WordPress and your CRM of choice is Salesforce, but you just can\u2019t seem to get the two applications to play nice together.<\/p>\n

Fret no more, in this daily tip we\u2019re going to show you how to integrate WordPress and Salesforce, and turn your website into a lead generating machine!<\/p>\n

A note before we start: We\u2019ll be using the Web-to-Lead<\/em><\/strong> feature of Salesforce, which requires you to be using their Group Edition platform, or higher.
\n <\/p>\n

Why Integrate WordPress with Salesforce?<\/h2>\n

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.<\/p>\n

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.<\/p>\n

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). <\/p>\n

And that\u2019s exactly why Salesforce makes the Web-to-Lead form available to us.
\n <\/p>\n

Salesforce Web-to-Leads<\/h2>\n

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.<\/p>\n

Creating a Web-to-Lead Form<\/h3>\n

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.<\/p>\n

\"Post<\/a>
Salesforce Setup Menu located under your name in the top right of the application<\/figcaption><\/figure>\n

Once there, on the left sidebar admin panel, navigate to APP SETUP, underneath the \u201cCustomize\u201d option choose \u201cLeads\u201d and then **Web-to-Lead.**<\/p>\n

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.<\/p>\n

\"Post<\/a>
Enable your Salesforce Web-to-Lead form in the customize app setup area<\/figcaption><\/figure>\n

Click the \u201cCreate Web-to-Lead Form\u201d button to create a new form for usage in your website.<\/p>\n

In the box on the left you\u2019ll see all the fields available for usage. The box on the right shows the fields you\u2019ve selected for the actual form.<\/p>\n

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

When you\u2019re happy with the fields and have filled out the redirect URL, click the \u201cGenerate\u201d button.<\/p>\n

Copying the Web-to-Lead Form Code<\/h3>\n

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\u2019d like that form to appear.
\n <\/p>\n

Editing the Web-to-Lead Form in WordPress<\/h2>\n

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 \u201ctext\u201d and its tab can be found at the top right of the editing area.<\/p>\n

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.<\/p>\n

Therefore, you can delete everything before (but not including) this line:
\n{code type=php}<\/p>\n

<\/code>
\nYou\u2019ll also want to delete the commented section, which looks like this:{code type=php}
\n
\n
\n
\n
\n
\n
\n<\/code>This is optional code to help developers debug the form, but we wont be needing that here.<\/p>\n

Viewing the Web-to-Lead Form On a WordPress Page<\/h3>\n

What you\u2019re left with is clean form code in HTML. When you\u2019re done editing your page, you can publish and view it.<\/p>\n

\"Post<\/a>
Web-to-Lead form without styling<\/figcaption><\/figure>\n

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\u2019re going to make some css changes to make our form more pleasing to the eye.<\/p>\n

But first, we\u2019ll 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\u2019t affect other forms that might be on our site already.<\/p>\n

Adding Classes to the Salesforce Web-to-Lead Form Code<\/h3>\n

Return to your WordPress page HTML tab. We\u2019re going to add some classes to these form elements.<\/p>\n

Find the first line of the form code. It should look like this:
\n{code type=php}<\/p>\n<\/code>
\nWe\u2019re going to add a class by inserting the words id=\u201csfwtlform\u201d right after the word \u201cform\u201d. Your edited line should then be as follows:
\n{code type=php}<\/p>\n<\/code>
\nNow, find the last line of the form code, before the closing line for the form. This is the code that renders the form button.
\n{code type=php}<\/code>
\nWe\u2019re going to add an id to this code as well: id=”sfwtlbutton\u201d. 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\u2019ll do that in a moment with some CSS.<\/p>\n

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=\u201csfwtlform\u201d straight into the form code, rather than copying it from this article and pasting it in. <\/p>\n <\/p>\n

Cleaning Up Your Web-to-Lead Form with CSS<\/h3>\n

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\u2019ll be editing the style.css file.<\/p>\n

In my example, I\u2019m 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:
\nhttp:\/\/YOURSITE.com\/wp-content\/themes\/YOURTHEMENAME\/style.css<\/p>\n

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:
\n{code type=php}
\n\/* Salesforce Web to Lead Styling *\/
\n#sfwtlform label {width: 150px; display: inline-block;}
\n#sfwtlform input {width: 200px;}
\n#sfwtlform #sfwtlbutton {width: 100px;}
\n<\/code><\/p>\n

Don\u2019t worry, we\u2019ll break it down line by line for you.<\/p>\n

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

The second line tells our browser to target the form with an id = sfwtlform, and only that form.
\n{code type=php}#sfwtlform label {width: 150px; display: inline-block;}<\/code>
\nThat 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.<\/p>\n

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.<\/p>\n

\"Post<\/a>
Custom CSS can help separate form fields, making them easier to read and fill out<\/figcaption><\/figure>\n

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

The fourth and final line tells the browser to make the submit button only 100 pixels wide.
\n{code type=php}#sfwtlform #sfwtlbutton {width: 100px;}<\/code>
\nThe 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.
\n <\/p>\n

The Finished Product<\/h2>\n

When you\u2019re all done, the finished product should look something like this:<\/p>\n

\"Post<\/a>
The finished form with custom CSS changes made<\/figcaption><\/figure>\n

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.<\/p>\n

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

Your New Lead in Salesforce<\/h2>\n

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.<\/p>\n

\"Post<\/a>
Contact view inside the Lead dashboard of the Salesforce CRM<\/figcaption><\/figure>
\n <\/p>\n

Summary<\/h2>\n

Without any fancy plugins and just a few lines of custom code you\u2019ve added a form that integrates your WordPress website with your Salesforce CRM.<\/p>\n

Now, all that\u2019s left to do is sit back and watch the leads pile up!<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn how to integrate Salesforce CRM with your WordPress site and turn it into a lead generating machine!<\/p>\n","protected":false},"author":70852,"featured_media":106160,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[],"tutorials_categories":[],"class_list":["post-106101","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/106101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/70852"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=106101"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/106101\/revisions"}],"predecessor-version":[{"id":153641,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/106101\/revisions\/153641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/106160"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=106101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=106101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=106101"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=106101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}