SVG in jQuery Accordions

kylemoseby — Fri, 04 May 2012 04:28:49 +0000

If you find yourself nesting SVG elements inside a jQuery accordion, you will notice that your text elements aren’t lining up correct in Safari. You will wonder why, spending half a day recalculating how everything is laid out, and scouring the Internet for a solution.

There is a bug in how Safari renders SVG type, throw the following in a callback function:

if (jQuery.browser.webkit){
   jQuery('#accordionDiv svg text').attr('y', '0');
}

References

Safari not showing dynamic SVG content in accordion

WebToLead Form with reCaptcha

kylemoseby — Wed, 15 Feb 2012 05:30:06 +0000

Overview

Originally this was going to be a simple post, putting Web-to-Lead on a WordPress page but one thing lead to another as my requirements changed. This article could be looked at at the grouping of a couple of “mini-tutorials.” The first one would be building a Web2Lead form in Salesforce, the second adding Captcha to a form using PHP, and the final being adding a Captcha form to a WordPress template. I have laid out the article accordingly.

Web-to-Lead form

Building a Web-to-Lead form in Salesforce

Once you are logged into Salesforce go to Setup – Customize – Leads – Web-to-Lead
Click the button “Create Web-to-Lead Form”
On the Create Web-to-Lead form you can select what information you want your form to collect.
To add a field select a field from the list on the right and click “Add” to move the field to the “Selected Fields” menu
To remove a field, select it from the menu on the left and click “Remove”
The “Return URL” is where users will be sent once they fill out the form. If you are going to add a Capthca image to your form this value is irrelevant.
Click “Generate”
Once the page reloads you should see a box that contains the code for your Web2Lead form. The code should look something like this:
```
First Name


Last Name


Email


Company


City


State/Province
```
Copy this code.

Putting form into WordPress page/widget

Once you have that code you can paste it anywhere that you would like on your site. Keep in mind that this is HTML code and you need to make sure you putting it somewhere where it will be processed as HTML. You can run into problems if you paste that code into WordPress’ (or any other platforms) Rich Text Editor.

Obvious places to embed a Web-to-Lead form:

WordPress Pages/Post – Make sure that when you are copying this code you are using the “HTML” editor and not the Visual editor
WordPress widgets – Just use the “Text” Widget, paste in embed code and place on your site
WordPress Themes – Place code anywhere you would like in your theme.

Adding reCaptcha

Once I got my Web-to-Lead form up on my site, it only took a few days before I started to get bogus spam submissions on my form. Adding reCaptcha was surprisingly easy. The first step is to download the PHP library and sign up for a reCaptcha key. Once you have completed this upload the library to your server.

Building reCaptcha Form

There are only two lines of code needed to load a Capthcha image in a WordPress Theme.

The first is an include statement that loads the Capthca Library, you might have to change the path depending on where you uploaded the lobrary:
```
require_once("recaptchalib.php");
```
And the second that renders the important code, obviously you are gonna pass your Public key to the recaptcha_get_html function:
```
echo recaptcha_get_html("YOUR-PUBLIC-KEY");
```
In your Wed-to-Lead form embed code from above paste those lines where you want the reCaptcha image to show up. You can see an example on my contact page.
You should now have a captcha field on your form.
Now point the form action to the verification page that you uploaded (mine is at http://kylemoseby.com/verify).

Verifying reCaptcha Image and Submitting to SFDC

Once the Captcha input has been verified it is posted to Salesforce cia cURL.

  your_private_key";
  $resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

  if (!$resp->is_valid) {
    // What happens when the CAPTCHA was entered incorrectly
    die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
         "(reCAPTCHA said: " . $resp->error . ")");
  } else {
    // Your code here to handle a successful verification
  }
  ?>

First we have to start the skeleton of what we want to do based upon whether Captcha was submitted correctly
Then you have a setup your cURL statements to submit to Salesforce. These will vary depending on what field you selected above. To get you started mine were as follows;

$fields = array(
'oid'=>"xxxxxxxxxxxxxx",

'first_name'=>urlencode($first_name),
'last_name'=>urlencode($last_name),
'email'=>urlencode($email),
'xxxxxxxxxxxxxx'=>urlencode($message)

);

Customizing

ReCaptcha’s site has good documentation on customizing the look of reCaptcha. This is done by adding the following code with your custom parameters before your form:

References:

reCaptcha Docs

Pu-erh Tea

kylemoseby — Wed, 16 Nov 2011 23:07:51 +0000

Just bought a cake of Pu-erh (???) from Floating Leaves in Ballard, in my opinion the best Chinese tea shop in the Seattle are.

Satsop

kylemoseby — Wed, 26 Oct 2011 21:40:44 +0000

en.wikipedia.org/wiki/WNP-3_and_WNP-5" rel="lightbox">

HOLGA

kylemoseby — Sat, 30 Jan 2010 09:47:05 +0000

Garfunkle & Oates at the Rebar

kylemoseby — Mon, 24 Aug 2009 07:08:21 +0000

Photos from the recent Garfunkle & Oates show in Seattle at the Rebar. Nick Thune opened the sold out show.

This was the song that Garfunkle & Oates closed with.

Junk Yard

kylemoseby — Fri, 03 Jul 2009 09:30:09 +0000

Denver Comedy Works Part 2

kylemoseby — Wed, 01 Jul 2009 09:19:48 +0000

www.natashaleggero.com" rel="lightbox">

Sasquatch 2009

kylemoseby — Fri, 26 Jun 2009 09:15:12 +0000

www.dragcity.com" rel="lightbox">

www.nickthune.com" rel="lightbox">

Recording in Cottage Grove

kylemoseby — Tue, 16 Jun 2009 05:33:18 +0000

Kyle Moseby