Tag: Gravity Forms

Gravity forms CSS tricks

http://kevinshoffner.com/wordpress/tipstricks/custom-css-gravity-forms/

Here is a quick list of all of the built-in classes:

Checkboxes and Lists Fields

gf_list_2col

= 2 columned List

gf_list_3col

= 3 columned List

gf_list_4col

= 4 columned

gf_list_5col

= 5 columned

Two Columns of Text Fields side by side

gf_left_half

= The left column

gf_right_half

= The right column

Three Columns side by side

gf_left_third

= Left column

gf_middle_third

= Middle column

gf_right_third

= Right column

Some other miscellaneous styles

gf_scroll_text

= Gets a scroll box into place, for those long sections where you need to give your visitor lots of information
scrolling-text

gf_hide_ampm

= If you want to hide the AM/PM portion of the Time field

gf_list_inline

= Simpliar to the above gf_list classes, but just show up next to each other using the amount of space the content can use on each line, instead of making it fit within 2,3,4,5 columns.

gf_hide_charleft

= Do not display the amount of characters left / character counter

I’ve not found a great use for these, but they are available:

gf_list_height_25

= 25 pixels between list items

gf_list_height_50

= 50 pixels between list items

gf_list_height_75

= 75 pixels between list items

gf_list_height_100

= 100 pixels between list items

gf_list_height_125

= 125 pixels between list items

gf_list_height_150

= 150 pixels between list items

Flawless integration of Gravity Forms with Salesforce

This is trickier than using a plugin, but more flexible and allows for specificity that it’s available otherwise, as far as I can tell.

The original article is at http://www.seobywebmechanix.com/wordpress-salesforce-integration-gravity-forms-web-to-lead

I’m re-blogging the pertinent bits in case something happens to it.

Let’s Get Fancy (In a Sophisticated Way)

Hop into your SalesForce and click “Settings” from the menu that drops down when you click your name from the upper right of the screen.

In the settings menu, under “App Setup” on the left hand side, click “Leads” to drop down another list, and then choose “Web-To-Lead” from there.

You should have a screen that looks like this:

Web To Lead SalesForce CRM Integration

Click “Create Web-To-Lead Form” to get started.  The next screen will ask you which data fields you want to capture.  Choose wisely.

Web To Lead Fields To Capture

The “Return URL” is equivalent to your “Thank You Page” – the page you’d like the user to see after they’ve submitted the form.  Don’t forget to set up a Google Analytics goal for that thank you page.

When you click “Generate”, SalesForce is going to give you some HTML code.  This code generates a contact form on your website that sends its data to SalesForce.

SalesForce Web To Lead Form HTML

I know what you’re thinking: “Wait, I use Gravity Forms to create contact forms on my website but how do I sync or integrate Gravity Forms with SalesForce Web-To-Lead?”

That is a good question; keep reading for the answer.

………

Step 4: Sync Gravity Forms To SalesForce

To do this, click the Gravity Form’s name and find the “Confirmation” tab.  Click into that tab, and then change the “Confirmation Message” to “Redirect”.

After that, click “Pass Field Data Via Query String” – Your screen should look something like this:

Gravity Forms Confirmation Tab

Here’s the hard part… do you still have your SalesForce Web-To-Lead HTML handy?  You need it now.

Let’s dissect the SalesForce HTML:

SalesForce Web-To-Lead Gravity Form Configuration

Note: I removed all the commented HTML code (anything wrapped with <!– –>)

You want to fill out your Gravity Forms as follows:

1 – The URL to “Redirect” your Gravity Forms data to

2 – Hidden field that is your SalesForce company ID (I changed ours to all zeros to prevent spam)

3 – Hidden Field that is the “Return URL” or “Thank you page” that the user will see after filling out the form (remember putting this in when you were creating your Web-To-Lead form?)

4 through 9 – These are the fields you want to pass over to SalesForce.

Put the URL (#1) in the single field directly under the “Redirect” radio button you choose earlier.

Here is where most people make a mistake, so be careful.

Step 5: Build Your “Query String”

IMPORTANT: From the action URL (#1 in picture above) – you must remove “?encoding=UTF-8” and put it as the first variable in your query string (see images below).

There must NOT be a “?” in the REDIRECT URL (because Gravity Forms will automatically append one to the start of the query string).

Starting with oid and retURL (#2 & #3) – let’s start building our “query string” which passes the contact form’s data to SalesForce.

Building Query String to send data to SalesFoce

Here is the general format for building the query string:

field_name=field_value&2nd_field_name=2nd_field_value

field_name – just as it sounds; the name of the data field (ie. “company”)

field_value – again, just like it sounds; this is the value (ie. “WebMechanix”)

Important note: Did you notice that ampersand (&) between field_value and 2nd_field_name? – That “&” separates each field name and value combination.

Now, for the rest of the fields (#4 through #9), use the “Insert Form Field” drop down that Gravity Forms provides.

For the field_name portion of the query string, use the bolded “name” field from the SalesForce Web-To-Lead HTML (ie. #4 would be first_name, #6 would be email, and #9 could be state).

 

Gavity Forms Field Picker Drop Down
Final Query String within Gravity Forms

Here is our final query string:

encoding=UTF-8&oid=0000000000000000&retURL=http://www.seobywebmechanix.com/thank-you&first_name={Name (First):2.3}&last_name={Name (Last):2.6}&email{Email:4}&company={Company:5}&city={Address (City):1.3}&state={Address (State / Province):1.4}

Few things to note:

  1. MAKE SURE you remove the encoding=UTF-8 out of the redirect URL
  2. You have to type the field_name yourself (those that are bolded), which you get by looking at the SalesForce form.
  3. When you use the Gravity Forms “Insert Form Field” picker, it puts {curly brackets} around where the field value is going to be dynamically inserted.
  4. Don’t forget the “&” between field name and value combination, but don’t put one at the very end

Step 6: Save It & TEST!

……..