Add a simple form to your site

Let’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.”

Add 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.

Click “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.”

In 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.”

Voilà! 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!

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

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!

Matt’s list of must-have apps: I work with both Mac and PC for different things. While I definitely prefer the Mac, I haven’t been able to do away with the PCs in my life completely yet. Note: Jessica already summed up all of the collaborative tools that we use, Highrise, Basecamp, Google Docs, etc. So I’ve left those out of my list. They rock, we both use them, let’s just leave it at that.

Mac Software and Web-Apps:

Firefox extensions

My must-have list: firebug (of course), web developer’s toolbar, fireftp, pdf download

Textmate

I’m not going to repeat everything that is on Jessica’s list, but this one is worth it. There just aren’t enough ways to say how much we think it rocks.

Adium

I use Adium instead of iChat. This is hands-down my favorite IM client. It just does everything I want.

Key Fixer

These little tools change the behavior of the home and end keys to what you might be more used to if you also use a PC or have switched from a PC. Since I write code on both platforms, keeping my keyboard working the same way on both is vital.

PC Software:

SQLyog

If you are doing much development with MySQL databases you probably already know about this, if you don’t you should really check it out. A lot of tasks are made easy while still giving you all of the power and flexibility of a command-line. By far my favorite GUI for this sort of work.

Multiple IE

If you are doing web-work, especially anything with UI Design/CSS, you need this. We keep an XP Pro machine on hand just to run this (and, um Netflix streaming movies, shush).

Pidgen

It’s like Adium for PCs. It bundles all of your IM accounts together in one application with minimal fuss. I’ve tried a bunch of them, and used Trillian for a long time, but Pidgen works better for me.

Foxit Reader

If you are old enough you may remember a time when .pdf was not a four-letter word. If you use a Mac, you have probably experienced how lovely it is to see them pop open in Preview almost instantly. Foxit’s reader has made the .pdf a viable document format for me on PC again. It’s fast and lightweight.

A round-up of things we’ve marked in Ma.gnolia today.

No such a thing as free lunch? There will be when Silicon Florist hosts Portland Lunch 2.0 ? Silicon Florist

Tags: portland, web 2.0, lunch 2.0, silicon florist, web design, community, events, business networking, networking, oregon, social, web

Balsamiq Mockups Home | Balsamiq

Tags: business, design, web design, tools

10 Tips for Being a Greener Web Designer [Work Smarter]

Tags: eco, designer, business, business advice

View all my bookmarks on Ma.gnolia

Part 1 of 2 (Matt will post his in the next few days).

Jessica’s list of must-have apps: I work exclusively on a Mac (well, two, actually) so these are all Mac-friendly.

Transmit

I was pretty meh on the subject of FTP clients until I tried Transmit. Now I don’t know what I did without it.

Fluid

See above re: FTP clients and switch for site specific browsers. I finally installed Fluid on a whim and…wow, was I ever wrong. It’s given me a whole new appreciation for my Dock.

TextMate

Can’t rave enough about my love of TextMate. Makes coding a breeze.

Google Docs

We keep the majority of our paperwork (contracts, contract templates, etc.) on Google Docs. We can share amongst ourselves and access files from anywhere – handy when you’re constantly shuttling between office and home office. Also: it’s not Word!

Google Apps

We finally switched our couldbe studios email over to Google Apps, and it’s been great.

Basecamp

For all our project management needs.

Highrise

Keeps track of our contacts.

Ma.gnolia

Social linkage.

Firefox

And, of course, what’s Firefox without extensions? I use Firebug, Foxmarks, 1Password and ColorZilla.

Campaign Monitor

Not only does Campaign Monitor make it easy to send and track email newsletters, it makes setting up managed accounts for clients a breeze.

Reinvigorate

I personally loathe Google Analytics, but none of the other free or low-cost offerings seemed much better. Enter Reinvigorate. They’re in private beta right now, but we were lucky enough to get in. And I do mean lucky: Reinvigorate is a fabulous service, and I can’t imagine switching.

DropSend

When we’ve got to email huge files to clients or printers, DropSend is invaluable.

Blinksale

Simple and easy to use. We looked at FreshBooks, but given our requirements Blinksale is a better fit.

I love twitter, and much of the time the group stream of consciousness that is displayed is great, but… there are times when following a conversation can be a little tough.

I have found myself wishing that there were a way to sort it into easier to follow pieces.

So i figured that would be a good place to start. What I ended up with is TwitterThreads.com.

TwitterThreads.com

The idea here is to connect the dots of the @replies in your twitter stream.

(click)

Above is a screenshot of a threaded conversation I was having with Josh Bancroft this morning that illustrates fairly well what that looks like.

If you’ve somehow never heard of Twitter, check it out.

Twitter rocks.

Cheers,

Matt Beck
Partner, CouldBe Studios

Well, we finally bit the bullet and took a stab at it.

For our first widget, we’ve connected the new Marketplace on Shopify.com directly to you dashboard. Check it out here
.

We’re pretty happy with the results and we hope others will use it too.

Let us know what you think would ya?

Cheers!

Matt Beck
Partner
CouldBe Studios

Could we replicate the effect in Photoshop? Well, sort of, but it wouldn’t be easy or 100% right.

There is also a random element to using the lensbaby that we love. Often we don’t get the picture we thought we were getting, but what we do get is even better.

Things we love about it:
1. The pictures we take with this are like nothing else we’ve done.
2. Craig Strong (President and Co-Founder) of lensbabies is a truly nice guy, as are his crew and the dedicated lensbaby users.
3. They are locally made here in Portland, OR
4. It looks like a cross between a lunar lander and a vaccum hose.

These things definitely have a bit of a learning curve, but classes and workshops are available (I took one and had a wonderful time). If you get a chance we recommend you try one out, they’re just too fun to miss out on.

We are nothing if not accommodating. Here’s a super easy, super simple guide to getting started with your own Shopify site.

Shopify Tutorial

Log in to your Shopify admin account (yoursite.myshopify.com/admin)

The first thing you’ll see is the Home screen, which shows you at a glance how many visitors your site has had, how many orders you’ve received, the last login of your staff members and your out of stock items (if any).

The green navigation strip shows you what options are available for your shop.

Orders:

Click Orders to see the details of your orders.

In this screen, you can manage orders, contact your customers, or download a spreadsheet of your orders for offline use. Since there are no orders here, we’ll move on to the next screen.

Products:

Click the Products tab. You will see a list of all the products which have been added to your shop.

To add a new product, click the “Add New Product” button (it’s red, and at the top of your screen).

Give your product a title (this can be purely descriptive; inventory control information is later) and a description.

Under “Product type” you can choose from one of your existing product types or enter a new one. Keep these categories pretty broad; you don’t want to create a new product type for each item you enter. These categories will be used later to create things like Smart Collections.

Under “Product vendor” add the name of the product’s creator. For example, if you are selling items from a third-party vendor you will enter that name here, but if you create the products yourself you will enter your own company name.

Set the price and weight (weight is used for calculating shipping costs). You can also add a “Compare at” price, which is useful if you’re having a sale and want people to know how much money they’re saving.

Under “Inventory” you can enter a product ID or SKU (this is optional) and decide whether you want Shopify to track your stock level. If you choose to have your stock level tracked, you will need to add the quantity you have on-hand and choose whether customers can still place orders when you run out (useful if you will be re-ordering based on customer orders) or if your item will show “SOLD OUT” when you run out of stock.

Add tags so that people can easily find what they’re looking for. You can add as many tags as you want. Try to be very descriptive.

You must upload an image before your product will show up on your site. You can upload several images for each product; the first one in the list will be the “featured image” and will show up on your product and collection pages. Once you’ve uploaded all your images, you can change the order they display by dragging and dropping the thumbnails.

Don’t forget to SAVE your product!

Collections:

Click on the Collections tab to see your collections.

By default, your shop starts out with the “Frontpage” collection. Don’t delete this! It keeps track of which products are featured on the front page of your shop. You can change your featured products at any time by going into the product page and checking or un-checking the “Frontpage” ticky box.

Collections organize your products into groups, which you can then link to from your shop. Create collections for all your groups of products. For example, if you sell a lot of shirts and pants, you might want to create a “Shirts” collection and a “Pants” collection as well as an “Outfits” collection, in which you can group together things that would go well in a set. You can add the same product to more than one collection.

Standard Collections are collections of items you choose as you go (like the Frontpage collection, above); Smart Collections use pre-defined values to organize your stock.

Create a new Smart Collection by clicking “Create new Collection” and choosing “Smart Collection.”

Next, set the conditions for your Smart Collection. They can be anything you want, and you can add more using the green button on the right.

You can play around with this to find the combination that works best for your shop. Once the Smart Collection is set up, the products that meet the criteria will automatically be added.

Blogs & Pages:

When you click the Blogs & Pages tab, you will see all of the blogs and pages you have created. A blog is like a collection of articles; you can create a blog and then update it, and your most recent update will be at the top of the blog’s page. Pages, on the other hand, are static; you can make a page for your shipping information, for example, or to talk about who you are and what you do. Blogs are best for information you will need to add to on a continual basis, like a news page or a list of articles.

Click “Create Blog or Page” and then choose which one you’d like to create. For this example, we’re creating a page. Give your page a title and add some text. Shopify uses Textile for its markup; you can see the examples on the left to figure out how to format your text.

Save your page. In the next step, you will add your page to your navigation so visitors to your site will be able to find it.

Navigation:

Click the Navigation tab. You will see a list of your existing navigation menus.

For this example, we are adding a link to the footer menu, but you can always add or re-order your navigation menus to fit your site’s needs. Be aware that some menus (like the footer) will show up in different places on your site, so be aware of which menu you’re adding to.

To add a link to the Footer menu, click “Add Link.” Type in the name of the link (this doesn’t have to be the same as what you named the page, but it does simplify things if it’s similar) and choose what you’re linking to. We linked to the Royalty-Free License page here, but you can link to anything from an external website to an individual product. You can also link to a collection.

This is a screenshot of our example site, in which you can see the Royalty-Free Images page on the site and listed in the footer menu.

Marketing:

This is a new section that allows you to enter coupon codes and keep track of your marketing efforts.

Next, look at the right side of the green navigation bar to find the nuts and bolts of your site.

Look & Feel:

Look & Feel is where the site’s theme information lives. You probably won’t want to change that, but you certainly can! We recommend saving a copy of your existing theme before making any changes.

Preferences:

This is where you can set up the inner workings of your store. You will see a sub-menu on the right that lists your options. Click around to see which options are appropriate to your store.

The most important section to set up is the Checkout & Payment section, in which you will specify which payment service(s) your store will use. There is also a “Bogus Gateway” for testing purposes; if you activate it, you can place a sample order without sending any actual payment information.

Account:

The Account screen is where you will go when you want to check to see how much storage space you have left on your site or, if you’re the account owner, to add a staff member to your lineup or view or change the credit card information for the shop. (Note: only the account owner can add staff members or view or alter the credit card information for the shop.)

The account owner MUST enter credit card information before the shop will accept orders!

That’s it!

If you have any further questions, check out the Shopify forums or contact jessica at couldbestudios dot com.