“Mad Libs” Style Form Increases Conversion 25-40%

Posted on February 27, 2010

I don’t usually like to re-blog – I prefer original content and a list of links. But I’m making an exception for this – firstly, it’s really cool, and secondly, I’ve been too busy to post anything for a while.

http://www.lukew.com/ff/entry.asp?1007

Ron and his team ran some A/B testing online that compared a traditional Web form layout with a narrative “Mad Libs” format. In Vast.com’s testing, Mad Libs style forms increased conversion across the board by 25-40%.

I think forms are a crucial part of any website. The web is mostly one-way, and only via forms can you get feedback. You need forms to do anything interesting. Yet they’re SO boring.

They’re boring to fill out, they’re boring to code. I think anything that makes them a little bit interesting helps a whole lot. I hope to code some forms like this in the future and I hope this turns into a real trend on the web.

Using PHP variables that contain hyphens

Posted on November 25, 2009

This took me a little while to work out. I’m using PHP5′s SimpleXML to parse XML into a PHP object. The XML has entries like <HELLO-THERE>.

But you can’t use $xml->HELLO-THERE because it reads the hyphen as a minus.

Instead, use $xml->{“HELLO-THERE”}

Easy!

Reset Silverstripe admin password

Posted on October 6, 2009

It seems like every time I deploy a Silverstripe site I either lose the admin password, or it changes somehow. Then I have to search for ‘lost silverstripe password’ or something to work out how to reset it. This is basically for my own reference:

1. edit /mysite/_config.php
2. add Security::setDefaultAdmin('admin','password'); to the bottom
3. profit!

Duplicate WordPress site for local development and testing environment

Posted on August 6, 2009

1. Download all files from eg http://example.com, upload to eg http://localhost/example/.
2. Export mysql database from example.com
3. Create a local mysql database with the same user, password and database name. These can be found in wp-config.php
4. Import the database into your new local account
5. Log in to the database, and do:

update wp_options set option_value='http://localhost/example/' where option_id=1

You’ll now be able to log in at http://localhost/example/wp-admin, using the same username and password as http://example.com/wp-admin.
5. In WordPress, click ‘Settings’ and change the blog address to your local address.
6. Profit!

HTML syntax highlighting for Silverstripe .ss template files in vim

Posted on August 4, 2009

By default vim opens .ss files with some other file format syntax highlighting.

To enable HTML (actually XHTML) syntax highlighting on your .SS Silverstripe template files, create (or edit) your ~/.vim/filetype.vim file. Then enter this:

au BufNewFile,BufRead *.ss      setf xhtml

Then open a .ss file and it’ll give you nice HTML syntax highlighting. And because it’s in your home directory, it’ll keep working even after you upgrade vim.

Silverstripe – Configure TinyMCE

Posted on July 8, 2009

Edit cms/javascript/tinymce.template.js – you can use any configuration options you find at http://wiki.moxiecode.com/index.php/TinyMCE:Configuration

I was trying to use this to enable force_br_newlines but with no luck – although the other settings seem to work okay.

Pixel Perfect Firefox Extension

Posted on June 30, 2009

When I write HTML and CSS I’ll usually create a mockup – I take a high quality JPG of the design and put it into a very simple page that shows the JPG, centered on the screen. Then in Firefox I switch back and forth between the page I’m working on and the mockup so that I can get the design pixel-perfect.

Well today all that will change. I’ve discovered the Pixel Perfect Firefox Extension which allows me to overlay the mockup over what I’m designing.  You can set the opacity and quickly toggle the overlay on and off.

I’m not sure about centering – it doesn’t seem to do that automatically. But I think I could use the MeasureIt extension to get the width of the main column, set it in CSS with ‘margin: 0 auto’ to centre it, and then drag the overlay to match and base everything off that.

My job just got slightly easier again.

Awesome!

Quickly replace the header image in the default WordPress 2.7 Kubrick theme

Posted on May 6, 2009

I was asked to do some quick mods to client’s WordPress blog. He wanted to replace the banner image. He’s using WordPress 2.7 and has the default Kubrick theme.

This isn’t as easy as you would think as it’s generated by PHP so that the colours can be dynamically set.

Here’s what I did:

1. Download wp-content/themes/default/images/kubrickheader.jpg
2. Modify it, save and upload as wp-content/themes/default/images/kubrickheader_NEW.jpg
3. Edit wp-content/themes/default/header.php. On line 42 you should see <div id=”headerimg”>
4. Modify this so it reads:

<div id="headerimg" style="background: url(<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader_NEW.jpg) no-repeat -1px 0">

Upload header.php and it should now be using your new header. I used the “-1px 0″ because the header was out of horizontal  alignment by 1 pixel. I don’t know if that’s because of the header image he sent or if that’s the way WordPress’s dynamic banner image works. You might need to remove that part.

This probably isn’t the best way to do it but it’s a quick and easy solution.

Remove empty LEGEND tags in Silverstripe search form

Posted on May 1, 2009

I’m pretty obsessive about my HTML validating with no errors and no warnings. It bugs me that when I use Silverstripe’s incredibly convenient $Searchform in the template that it outputs an empty legend tag inside the fieldset.

There’s an easy way to fix this:

1. Create a templates directory inside mysite.
2. Copy sapphire/templates/SearchForm.ss to mysite/templates/SearchForm.ss
3. Edit your copy of the file and remove that pesky <legend></legend> line
4. Refresh your page that uses the searchform and bathe in the warm glow of a error and warning free page!

Thanks to Maksfeltrin in the Silverstripe forums for pointing this out.

Strip <span> tags from HTML in vim

Posted on April 6, 2009

When upgrading a website you might see source code like this:

<span style="font-family: Arial; color: #0000ff; font-size: small;">Some text goes here</span>

You’re using CSS now and all those <span> tags are ruining it. In gvim, do this search and substitute:

%s/<span.\{-}>//g

Then to get rid of the </span> tags, do this:

:%s/<\/span>//g