Shopify + Wufoo: Add a form to your site

Shopify is a fantastic e-commerce solution for small businesses. One thing it doesn’t have? An integrated contact form. But it’s easy to add one to your site using a third-party service like Wufoo (which offers a free account level as well as several paid tiers with ever-increasing levels of fabulosity).

Add a simple form to your site

new form buttonLet’s take a look at adding a contact form to our ‘About Us’ page in Shopify. First, we need to create the form in Wufoo. Log in (or create a new account) and click “New Form.”

building a form in WufooAdd some fields (for a contact form, it’s a good idea to at least ask for an email address and a message, but you can add any fields you think you may need – name, phone number, whatever). Keep in mind, the shorter your form, the more likely it is people will fill it out!

Once you’re happy with the fields in your form, click the “Form Settings” tab and give your form a name and (optionally) a description. In this section you can also decide on your confirmation options: you can have your users redirected to a page on your site once they’ve successfully submitted the form, or replace the form with a message (“Success!” or something similar). You can also opt to send your users a confirmation email.

Wufoo embed codesClick “Save Form” when you’re all done. A pop-up will ask you what you want to do next. Choose the option that returns you to the Form Manager.

In the Form Manager (otherwise known as your Wufoo dashboard), choose the “Code” button and click the tab for “Embed Form Code.” Select the code under “JavaScript Version” and copy it to your clipboard.

Now, log in to your Shopify admin area and click “Blogs & Pages.” Choose your Contact Us page and click “Edit.”

insert script in ShopifyIn the Edit screen, click the “Insert” button and choose “Script.” You will see a box open up with an example of a JavaScript code snippet. Delete the sample snippet and paste the entire JavaScript code you selected from the Code section in Wufoo (it will be two separate JavaScript snippets). Insert the code into your page and click “Save.”

a Wufoo form on a Shopify pageVoilĂ ! You now have a Wufoo contact form on your Contact Us page. User submissions will be saved to your Wufoo account. You can tweak the settings in Wufoo to dictate where submissions are sent (for example, you can opt to have each submission emailed to you or texted to your phone) and whether you want to integrate your form with a third-party add-on like Highrise or Campaign Monitor. Keep in mind, any changes you make to the form in Wufoo will be reflected on your Shopify site!

Tickets still available for WordCamp PDX 2010

Click here to get your tickets! Don’t wait too long; the event sold out last year and it’s almost certain to do the same this time around. I’ll be talking about Business Blogging for Non-Writers & we’ll be giving away copies of our book as well. Hope to see you there!

PHP Tip: styles2array

Today I needed to write a bit of code to take the style attribute off of an HTML tag and convert it into something I could use inside PHP.

My first thought was to use regular expressions, but it occurred to me that there might be a simpler way to do it with just a couple of explodes.

Just in case this might help someone else out there, I thought I’d post it.

So, assuming you will pass something like “width:1090px;left:-340px;top:-144px;” to the function
you should get back the following:


Array
(
    [width] => 1090px
    [left] => -340px
    [top] => -144px
)


function styles2array($styles){
	$styles = rtrim($styles, "; ");
	$arr = explode(";", $styles);
	$return = array();
	for($i=0; $i<sizeof($arr); $i++)
		{
		$split = explode(":", $arr[$i]);
		$return[$split[0]] = $split[1];
		}
	return $return;
	}

Cheers!

-Matt

Looking for WordPress 3.0 tutorials? We’ve got ‘em!

One of the great things about WordPress is that it’s constantly being updated with bigger and better features. The switch from 2.x to 3.0 brought some seriously cool new additions, like custom menus, custom headers, and custom post types.

We’ll be blogging about all the new stuff 3.0 has to offer on the companion site for our book, The WordPress Visual QuickStart Guide site. Pop on over and take a look at the first tutorial, Custom Menus in WordPress 3.0!