Morning Copy » Tutorials

How to style Google Forms: Redux

Dillon — Fri, 23 Apr 2010 05:16:15 +0000

It’s been over a year since we posted our original How to style Google Forms post – how time flies!

Our solution for embedding and styling Google’s Form app has garnered interest from all over the world and we are continually bowled over by how many questions, queries and messages of gratitude we get about this post on a weekly basis!

In this Redux edition of the How to style Google Forms post we:

Revisit the original Google Forms post [Skip]
Update our Google Forms and jQuery validation demo [Skip]
Show you how to create multi-page Google Forms! [Skip]

How to style Google Forms

Our original post laid out step by step instructions for embedding a Google Form in your website, re-styling the form’s elements and redirecting the user to a confirmation page of your choosing.

Check out the original post and our new, improved version below!

Original Post: How to style Google Forms
Updated Demo: Styled Google Form with confirmation redirect

Adding jQuery validation to Google Forms

Our original form had one major flaw. It didn’t support Google’s in-built form validation. We solved that problem by throwing jQuery form validation into the mix.

Original Post: Google Forms and jQuery Validation
Updated Demo: Styled Google Form with confirmation redirect and form validation

Multi-page functionality!

Last year Google added a page break option to their forms and ever since we’ve been asked by visitors when we will update our solution to incorporate this new functionality. Well, the time has finally come!

Unfortunately for numerous head-scratchingly boring technical reasons our solution won’t work with Google’s page breaks, BUT we have come up with a way to build multi-page forms by taking a single page form and putting it into a jQuery wizard.

The jQuery wizard we use in this tutorial was written by The Codemine. Please visit their site for more info and jQuery Wizard resources.

DEMO: Google Form jQuery Wizard
DOWNLOAD: Demo Pack

Step 1: Setup and embed your Google Form

Go to our How to style Google Forms post for full instructions on how to setup, embed and style your Google Form.

Step 2: Add validation to your required fields

Go to our Google Forms and jQuery Validation post and find out to add required classes to your required fields.

Step 3: Add your jQuery scripts

Add these jQuery scripts between your tags. You’ll find all the scripts in our downloadable Demo Pack.

Step 4: Separate your pages

In our demo we have made each question a separate step but you can have as many or as little questions per page as you like. Each page needs to be wrapped in a span with a unique id. In the example below the span is in bold.


Step 1 of 4



How blue is the Sky?

Step 5: Replace the Submit button with wizard navigation

The last step is an easy one.

Simply replace the original Submit button…

With the new jQuery Wizard navigation.

That’s it, we hope you enjoyed this tutorial!

As always if you have any questions or want to say Hi, please leave a comment or email via our Contact Form.

Morning Copy is more than a Google Form building company!

We specialize in Copywriting, Email Marketing and Web Design so please drop us a line if you are in need of any assistance.

Build a bigger email marketing database

Dillon — Wed, 31 Mar 2010 03:00:20 +0000

At Morning Copy we always say that building a bigger email database should be at the top of every business’ to-do list.

Why is growing your email marketing database so important?

That’s easy! Every new reader is also a new potential customer, and at the end of the day who doesn’t want new customers?

Here are 3 easy ways that you can build up your email database in an organic, ethical manner.

It’s important for the ‘health’ of your email database that your readers voluntarily opt-in to your newsletters because if your messages are forced upon them they will report you to spam filters and your message will not get through to the people who really want to read it.

1. Give your subscription form pride of place on your website.

Don’t hide your subscription form away on a low-traffic section of your site. You should give your email subscription form pride of place on your homepage so that it gets the most exposure possible.

2. Simplify your subscription form

We’d love to know everything about our database but most people don’t want to tell you their age/marriage status/phone number just for the privilege of reading your newsletter. Simplify your subscription form down to the need to know stuff like email address, first name and company name.

3. Incentivise sign ups with giveaways

There’s no shame in bribing your way to a bigger email marketing database!

A timely prize like a free iPad can generate a lot of viral interest on social networks like Twitter and Facebook.

If you decide to incentivise sign ups, you have to follow up with strong newsletter content because an incentivised member has less reason to stay subscribed after your promotion has ended.

Click here to read about Morning Copy’s Email Marketing services!

How to solve Apple WIFI IP address conflicts

Dillon — Thu, 25 Mar 2010 02:10:31 +0000

In the Morning Copy office we all use Apple Macs. We’ve found our Macs to be mostly hassle-free bits of kit, but there is one problem that seems to pop up on a semi-regular basis: Apple WIFI drop outs.

Drop outs don’t happen every day but they do happen regularly enough to annoy; especially when so much of our work requires us to be online.

Last month we put our heads together and decided to get to the bottom of the WIFI drop outs. After a few hours of detective work we found a solution that worked for us. That’s right, no more Apple WIFI drop outs!

Very important!

Morning Copy is an Online Media agency that specialises in Copywriting and Email Marketing. We are not IT professionals!

We provide this tutorial to help people who experience the same issue with Airport WIFI.

Please read over this tutorial before you change any settings on your computer or router and refer your problem to a real techy if you think it is above your knowledge level.

The problem.

When a new Mac logged onto the local WIFI network it would kick off the other Macs on the network. Navigating to the Network System Preferences would give you a message like:

Airport has a self assigned IP address and may not be able to connect to the internet.
AirPort does not have an IP address and cannot connect to the Internet.
Another device on the network is using your computer’s IP address.

We realised that the new Mac was ‘stealing’ the IP address of the other Macs connected to the network. Our solution was to lock down the IP address so it couldn’t be stolen again!

The solution.

Quick temporary fix. Manually enter your IP address.

Open System Preferences and choose Network. Select your Airport network from the left hand menu and click the Advanced button in the bottom right.

Select TCP/IP from the top navigation menu, then select Using DHCP with manual address from the top drop down menu.

Find out what range of IP addresses (eg. 10.1.1.1 – 10.1.1.99) that your WIFI router uses, then enter your chosen IP address into the iPv4 Address field.

Click OK to return to the Network section and then click Apply to apply your changes.

We’ve listed this as a temporary fix because manually assigning the IP address could cause problems for the user when they try to log onto other WIFI networks.

Permanent fix. Assign an IP address for each computer on the network through your WIFI router.

Log into your WIFI router and assign a unique IP address to every computer on the network. This is a permanent fix because it means each user will not have to update their settings when they try to log onto other networks.

Note: You will need to find the MAC address of each computer before you can assign an IP address to it.

What should I tweet about?

Christie — Sun, 21 Mar 2010 06:34:24 +0000

Working in online marketing makes it easy for me to communicate and promote myself online. Yet, I’m always surprised when ‘normal people’ (those who don’t work online), ask me about how to do it.

When I tell people I have a twitter account, or they see the feed coming through on my food blog, the first thing they ask is ‘What do you tweet about?‘.

Good question people. What comes naturally to me, other people find excruciating and frightening: ‘You really just tell complete strangers everything about your life?’ they say. Well, no. I’m not that stupid!

I barely ever tweet about the exact location I’m in unless I’m with other people I know can look after me should any internet weirdos be lurking about.

‘But my life’s boring!’ is another classic thing people say. Then don’t tweet about your life. Twitter is more than just telling people where you are and what you’re doing, it’s a way to share articles you find online, stuff you buy in real life or give opinions on issues that concern you.

When the people you follow use it correctly it’s an invaluable source of information and breaking news all in one convenient location. That’s why you should regularly contribute links, ideas and replies rather than just say what you ate for breakfast.

OK, so what exactly do I tweet about? I’m more than a little bit obsessed with food, nutrition and cooking so my personal twitter handle is @figandcherry, the name of my food blog.

I tweet about flavour combinations I’m currently loving, restaurants I visit, promotion for my blog posts and recipes I’m dreaming up. Because I don’t want to be a one-track pony (and I also have followers that aren’t into food) I mix it up with tweets about marketing, gadgets and running a small business.

I also re-tweet @morningcopy and promote posts from the Morning Copy news blog, just like this one.

Lastly, and perhaps most importantly, I try to make my communication really varied so there’s tweets with links, replies, plain text, re-tweets or pictures that don’t double up too often. Even though I’m trying to promote Fig & Cherry or Morning Copy, I don’t want to come across as a spammer.

For live examples of all the things I’ve been blabbing about, check my twitter stream. Follow me, I won’t bite, but you might get really hungry.

Shopify Tutorial: How to add a ‘Recent Posts’ list

Dillon — Thu, 04 Mar 2010 04:54:15 +0000

Shopify is the e-commerce platform that we recommend to 9 out of 10 of our clients. We recommend Shopify to small businesses because it’s cheap, simple to use and easy to maintain.

Check out the Shopify website for more details and contact Morning Copy if you would like our help designing your Shopify website.

That being said, this tutorial has nothing to with the e-commerce side of Shopify!

Instead, in this tutorial we’ll show you how to create a Recent Posts list for your Shopify website.

After all, you can have the best products in the world but you won’t sell any if your customers can’t find you. By creating great content and making it easy for users (and search bots) to navigate your site, you’ll generate more search engine traffic and bring more customers to your online store.

How to add a Recent Posts list to your Shopify store

Step 1.

Log into the Shopify backend and create a blog and some placeholder articles.

Click the Blogs & Pages button in the top menu, then click the Create a New Blog link.

For the purposes of this tutorial we are using the default News blog that Shopify uses as an example in every fresh installation.

Step 2.

Most people will want to see the most recent posts on the Blog archive and Article pages but might also like to see the list on the Homepage or even the Product page. For this reason, we suggest you create a code Snippet that can be placed on multiple templates.

To create a code Snippet, navigate to the Theme Editor section of the backend and click the Add a new Snippet link. Name the Snippet and click on the template to open the code window.

Add this code and click Save.

Latest Posts



{% for article in blogs.news.articles limit: 5 %}

{{ article.title }}

{% endfor %}

My blog is called News. You must replace news with your blog’s name in the first line of code.

Step 3.

Now you’re ready to add your Recent Posts list to your Shopify templates. For the purposes of this tutorial I am going to place a list on the Blog template, the Article template and Index template.

UPDATE Step 4.

We’ve been asked how to add ‘posted dates’ onto the Recent Posts list via email. It’s only one more step. Simply add the date.created_at code to your existing list.

{{ article.created_at | date: "%d.%m.%Y" }}

Here’s what your final code should look like.

Recent Posts

{% for article in blogs.news.articles limit: 5 %}
{{ article.title }} {{ article.created_at | date: "%d.%m.%Y" }}
{% endfor %}

All you have to do now is add your code snippet to each template. I’ve called my snippet Recent_Posts so this is the code that I will add to each template.

{% include 'Recent_Posts' %}

For this tutorial, we have put the code in the sidebar but you can place it anywhere you like.

Check out our examples:

That’s it! If you have any questions please leave a comment and we’ll do our best to help.

If you need a Shopify Designer please don’t hesitate to contact Morning Copy.

Writing for web and SEO

Christie — Sun, 10 Jan 2010 02:00:14 +0000

There has been countless posts on writing for the web, but it generally seems that copywriters (and designers, for that matter) know very little about SEO.

We’ve seen it many times: a company writes their own content or hires a copywriter. They might also hire a designer for a new site. Both the copywriter and the designer completely ignore SEO (or aren’t aware of it to begin with), and the client ends up with an incomplete product that will need to be optimised later.

At Morning Copy we offer SEO services for clients in all industries. However: onsite SEO is included in every design and copywriting project we complete – because there really is no point doing something twice!

We’ll revisit designing for SEO in the future, so here are some thoughts on SEO and copywriting.

1. Use headers just like these

Anyone that knows about writing for web knows to break up pages using subheadings but very often the writer will simply make the font bold and larger. Why not use a header tag? Your page title should be a h1 and the page should follow a tree format as below:

h1 Page Header
h2 Sub Head 1
h3 Point 1
h3 Point 2
h2 Sub Head 2

And so on. Basically, search engines place extra emphasis on header tags, bold and italic markup. Don’t go over the top, but certainly use each of these elements on your keywords.

2. Interlink

Keep them clicking! Interlinking your own content and providing external resources is essential on the web but it’s important to optimise each link. If we were going to promote our article on styling Google Forms, we’d link using the anchor text Google Forms, not like this: read the article here. I mean, who wants to rank for “here“?

This is a very common mistake and one of the things we often fix first when optimising onsite.

3. Use images correctly

Images are great, but get the most out of them! Firstly, host the image on your own site, if you can. That means the Google image bot can crawl your images.

Name the images with your keyword. DSC0097.jpg is useless. Morning-Copy.jpg is much better.

Then use the alt tag to describe the image again:

img src="Morning-Copy.jpg" alt="Morning Copy"

If every alt tag is unique you’ll get a double thumbs up from Google!

Google Forms Update

Dillon — Sun, 16 Aug 2009 06:03:23 +0000

Last Friday, Google made a slight change to its Google Forms.

The code change affects all forms that use the Google Forms Confirmation redirect solution in our popular How To Style Google Forms tutorial.

Don’t worry if your form is broken because it should take you just a minute to fix it.

Simply go into your form code and replace the:

with:

That’s it! I have fully tested this new version of the form and updated all the styled Google Form examples on our site.

Styled Google Form with Confirmation redirect

Styled Google Form with jQuery validation

Style Google Form with jQuery radio buttons validation

Still stuck?

If you’re having trouble getting your styled Google Form to work we recommend you try out an easy web form maker like Form Expers.

Optimise your site for search engines: the basics

Christie — Thu, 06 Aug 2009 17:54:50 +0000

Sites typically spend most of their time developing off-site SEO strategies such as building backlinks through exchanges and social media. While this is one of the most important aspects of SEO, it’s crucial not to overlook optimising through on-site practices.

As we’ve seen with numerous clients, a site can still suffer in the search engines if it’s not well optimised; despite having a large number of backlinks. Typically, they’ve spent all their time building links and forgotten the basics!

Below is a quick check list of how you can optimise your site for search engines. This is just a starting point – there are far more things to consider. Once your site is optimised as below, start link building!

1. Keywords

This is the most obvious element of on-site optimisation, but often overlooked. The keyword you are targeting should account for about 5-7% of the total copy. While many webmasters include keywords in the copy, they often forget to include them in the URL, in the page title and in the alt and title tags of images.

Remember: it isn’t 1995 – don’t hide keywords behind images, in the same colour as your background, or by using display: none in your CSS!

2. Markup

Use header tags in a clear tree format – beginning with h1 at the top of your page, then following with h2 tags for subheaders, then h3 and so on. Search engines place more emphasis on header tags, as well as bold, italic and underlined text. It is also gives your pages a high level of readability.

3. Avoid duplicate content

While it’s obvious that you can’t use the same content on more than one page (or at least it should be!), duplicate content issues don’t end there. You may be displaying duplicate content if you can access your website, without the URL redirecting, at any of the following:

http://www.mysite.com
http://mysite.com
http://www.mysite.com/index.php
http://mysite.com/index.php

The same applies for sites in html. Basically, the search engine bots access your site at the above locations and deem them all to be unique sites. To work around this you need to install some rewrite rules using .htaccess. This can be tricky, and you can potentially pull down your whole site if you make a mistake.

Don’t know what a .htaccess file is or how to make one? The below probably isn’t for you! Check back for a dedicated .htaccess tutorial shortly!

Here are the two common .htaccess rewrites you require:

Redirect http:// to http://www.


RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !^www.domain.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [L,R=301]

Redirect /index.html or /index.php to http://www.mysite.com

Don’t use both, only that which applies to your site (html or php!).


Options +FollowSymLinks
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://www.yoursite.com/$1 [R=301,L]

Options +FollowSymLinks
RewriteCond %{THE_REQUEST} ^.*/index.php
RewriteRule ^(.*)index.php$ http://www.yoursite.com/$1 [R=301,L]

4. Interlink your content

Interlinking your site makes it easily accessible; meaning the search engines find and index more of your content and they do so more often. Link relevant articles or pages to others using the anchor text that you want to rank for. You can also make links bold to give them more relevance!

5. Funnel Page Rank

If you imagine page rank as water in the bucket that is your site, each link is a hole in that bucket! That means, you’re losing (or sharing) water – page rank! If you are linking to a site or resource that you do not want to share your page rank with, simply make the link NoFollow. Just as it sounds, it means that the search engine bots will not follow your link, and so will not pass on any page rank.

You can apply the same to your internal links also; a practice known as funneling page rank. Select the least important pages on your menu and make the links NoFollow by adding rel=”nofollow” in the link code. See below for an example -

a rel="nofollow" href="http://www.mysite.com/unimportant-page/">
Unimportant Page

You should still have some links to these pages without a NoFollow attribute, but employing this on your main navigation can greatly improve the page rank on pages that you do deem important. Basically, if the unimportant holes in your bucket are plugged, more page rank flows to your other pages. Great!

Go forth, optimise!

Remember, this is just the beginning – the absolute basics of your site’s on-site optimisation, though still crucial to your campaign.

If you’ve noticed your rankings improving but you require more, call the pros! The Morning Copy team has years of experience working with sites in some of the most difficult niches online and consistently gain top results.

Google Forms and jQuery Validation

Dillon — Sun, 29 Mar 2009 22:32:39 +0000

We got a great response to our How to style Google Forms but there was one question that kept coming up in the comments: “How do I get my newly styled Google Form to validate?”

Well, we’ve gone back to the drawing board and come up with a solution! This short tutorial will show you how to get your Google Forms to validate using snippets from the jQuery javascript library.

At the end of this tutorial your Google Form will be able to show unique error messages without losing any of the functionality that we built into our original Google Form styling tutorial.

Step 1. Download the Bassistance plugin

We’ll be using the brilliant Bassistance jQuery plugin for this tutorial.

Click here to go to the Bassistance website, then download the jQuery plugin pack from their website.

Note: The Bassistance pack is an excellent resource. It’s chock full of great demos of the plugin so do take the time to check it out in full.

For this tutorial you will only need one file. It’s called jquery-validate.js and you will find it in the pack you download from Bassistance.

Step 2. Upload the jQuery validation plugin

Upload jquery-validate.js to your server. For the purposes of this tutorial I’m going to upload the file to http://www.morningcopy.com.au/js/jquery-validate.js.

Step 3. Start with a styled form

Open up your styled Google Form in a html editor. I’ll take the form we created in our original Google Form tutorial as a starting point: http://www.morningcopy.com.au/tutorial/step-9.html

Step 4. Add jQuery code

Add this code between the header tags on your form page.

Note: You will notice that one of the jQuery scripts links directly to the Google Code library. You can download the jquery script and host it on your own server but I think you’re safe leaving it on Google.

Step 5. Add the ‘commentForm’ id

Add the commentForm id to the form action. eg.

id="commentForm" onsubmit="submitted=true;">

Step 6. Add a ‘required’ class

Add the required class to your Google Form input fields eg.

class="required" id="entry_1">

Note for newbies: If you form already has class you need to replace it with with required rather than add an additional class.

Step 7. Add a ‘title’

Add a title to your Google Form input fields. The title will be the error message that appears when a user fails to type in a required field. You can make it whatever you like. eg.

 title="Please tell me how how blue the sky is dammit!"  id="entry_1">

Step 8. Repeat

Repeat this process for each of your required input fields.

Step 9. Style the error messages

If you’ve maintained Google’s CSS naming convention you can style errors by adding a new style to your stylesheet called label.error. Here’s the style we used on the example form.

label.error {
display: list-item;
color: #ff0600;
font-size: 12px;
list-style-position: inside;
padding: 5px 0 0;}

Click here to see our updated form.

Step 10. Adding Email Verification.

Most people will be happy with these required fields but if you also need email verification in your form here’s a little more code that will help you do that.

Add this email address verification class to your email input field eg.

class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"/>

Click here to see our updated form with email verification!

I hope this tutorial helps you get the most out of Google Forms.

If you have any questions about this tutorial please don’t hesitate to ask them in the comments.

Still stuck?

If you’re having trouble getting your styled Google Form to work we recommend you try out an easy web form maker like Form Experts.

How to style Google Forms

Dillon — Mon, 01 Dec 2008 02:16:02 +0000

Google Forms are amazing – so functional and flexible!

At Morning Copy we regularly use Google forms to run online promotions or surveys for our clients. Google forms are reliable, simple to use and, best of all, easy to share with all the stakeholders in an online project.

The one problem with Google Forms is that they look, well, like Google.

In this tutorial I’ll show you how to:

Style Google Forms so that they fit into your site’s look and feel.
Replace that dull Google confirmation page with your own custom ‘Thank you’ page.

Don’t be scared of all the steps. I’ve broken it all down into bite size pieces so it is easier to follow. If you’ve already got a Google form ready to style you can skip straight to Step 6.

Step 1.

Step 2.

Log into your new Google Docs account.

Step 3.

Click New and choose Form from the drop down menu.

Step 4.

Create your form using Google’s straight forward tools.

Step 5.

When you have finished compiling your form, click the link at the bottom of the page titled: ‘You can view the published form here’

Here’s an example of what it should look like:

http://spreadsheets.google.com/viewform?key=pqbhTz7PIHum_4qKEdbUWVg

Step 6.

Right click anywhere on the page and click View Source to look at the code behind the form.

Step 7.

Copy all the code between and tags and paste it into the new form page on your web site.

Click here for an example

Step 8.

Now you’re ready to style your form!

Insert your own stylesheet between the tags. I’ve prepared a version which takes Morning Copy website as it’s starting point.

Click here for an example

Step 9.

Now you have a beautifully styled form but it still sends users to an ugly Google confirmation page.

Add a bit of javascript* to redirect the completed page to a confirmation page** of your choosing:

REPLACE:

WITH:


YOUR-THANK-YOU-PAGE-URL';}">

* I found this last bit of code a few months back. I can’t for the life of me find the site so I can attribute it. If this is your code please contact me so I can give you the credit!

** The re-direct script will not work if you have required fields in your form.

Click here for our finished form!

Tutorial Updates

We’ve published 3 updates to this tutorial.

Learn how to add form validation and email verification to your styled Google Forms with our Google Forms and jQuery Validation tutorial.

Has your Google Form stopped working because of updates to the Google Forms source code? Check out our Google Forms Update post and find out how to fix this issue in seconds.

Third and final update. Our How to style Google Forms Redux post updates the original tutorials and adds a multi page Google Form.

Still stuck?

If you’re having trouble getting your styled Google Form to work we recommend you try out an easy web form maker like Form Experts.