Talk In Code

Multi pages forms are just as they sound, a single form spread across multiple pages. These are useful in terms of usability as it can break up an otherwise dauntingly big form into smaller chunks. It can also be useful if you want to process some of the results in order to determine what forms the user sees on later steps.

There are two ways in which it is possible to do this using PHP.

The first (and simplest) is just to cycle through the items submitted on a previous form and print them out as hidden fields. Our first page source code will look like this:

<form action="form2.php" method="get">
Name: <input type="text" name="name" />
<br />
<input type="submit" value="Proceed">
</form>

On submitting the form we are taken to form2.php, which asks the user a different question and prints out the hidden fields. Because we used a get request for our first form we need to use the $_GET array.

<form action="end.php" method="get">
Colour: <input type="text" name="colour" />
<br />
<?php
foreach ( $_GET as $key=>$value ) {
    if ( $key!="submit" ) {
        $value = htmlentities(stripslashes(strip_tags($value)));
        echo "t<input type="hidden" name="$key" value="$value">\n";
    }
}
?>
<input type="submit" value="Proceed">
</form>

This same code can be used on the different pages of the form. This method is fine, and works quite well, but it doesn’t account for users going back through the form and resubmitting a previous item. The $_GET array will only contain information about the previous forms.

To make this more user friendly, and robust, we need to employ a session to store our form values as the user goes through the form. Using sessions means that the user can cycle back and forward through the forms with no ill effect on the form data. The following code will take the input of the previous form and save it as a PHP session.

session_start();
foreach ( $_GET as $key=>$value ) {
    if ( $key!="submit" ) {
        $value = htmlentities(stripslashes(strip_tags($value)));
        $_SESSION[$key] = $value;
    }
}

This must be included on every page of our multi page form. If it is not then the data will simply not be saved for that step. Your users can now move back and forward through the forms, saving the information as they go. You need to supply a back button for this to work as using the browser back and forward buttons will also not save the data.

Finally, when testing this code I found that using GET rather than POST was beneficial in terms of usability. This is mainly because if you use POST requests and the user clicks the back on their browser they will be asked if they want to resubmit the information for that form.

Does anyone else have any ideas about how to do this? If so then post a comment and suggest it. You can even put a post in the forum!

I recently talked about adding code to blogs and comments to WordPress and making sure that certain characters are encoded properly. So to simplify things I thought I would create a little set of regular expressions that takes a sample of code and convert it into a Wordress friendly format. It consists of the following function, which takes the value of a text area called tochange and runs some regular expression replace functions on it. I have kept the expressions as simple as possible so they are quite easy to understand. The g argument for each expression means that the replace will be done for all of the text.

<script type="text/javascript">
function changeIt(){
  var text = document.getElementById('tochange').value;
  text = text.replace(/&/g,'&amp;');
  text = text.replace(/"/g,'&quot;');
  text = text.replace(/'/g,'&#39;');
  text = text.replace(/</g,'&lt;');
  text = text.replace(/>/g,'&gt;');
  text = text.replace(/^\s+/mg,'&nbsp;&nbsp;');
  document.getElementById('changed').value = text;
  document.getElementById('preTag').innerHTML = text;
}
</script>

The only one which might cause an issue is the last one with the expression ^\s+. This simply matches for 1 or more white space characters at the beginning of a line. The m argument means that the ^ symbol will be used to mean the start of a line. You can test this function with the following HTML tags.

  <textarea id="tochange" cols="50" rows="10"></textarea>
  <input type="submit" onclick="changeIt()" />
  <textarea id="changed" cols="50" rows="10"></textarea>
  <pre id="preTag"></pre>

The first textarea is what you want to alter, the second is the altered text and the pre tag displays what the altered text will look like in your browser.

Amazingly, this is quite a simple thing to do, and will work as long as the person who clicks on it is logged into their Twitter account. All you need to do is add the following as a link to your site.

http://twitter.com/home/?status=text+to+post

This will add any text that you put into the users What are you doing? box. They get the chance to accept or decline the text so it is a good way to advertise your site without forcing anything on the user. If they like the page they will accept.

Because this is a URL you will need to encode it properly in order for Twitter to understand it. If you are running PHP then you will want to use the urlencode() function.

echo 'http://twitter.com/home/?status='.urlencode('text to post');

You can also put in URLs

echo 'http://twitter.com/home/?status='.urlencode('I read http://www.talkincode.com/');

Remember that you can’t put in more than 140 characters, so if you have a long URL then visit tinyurl.com first and convert it to something a little shorter. Basically, you can turn something like this:

http://www.talkincode.com/how-to-get-people-to-post-your-site-to-their-twitter-account-663.html

Into this.

http://tinyurl.com/62l65b

Which gives you 115 more characters to play with.

The preview mode in WordPress exists to allow you to see how a post will look before you publish it to your site. This is an important feature if you have lots of readers as once your click that publish button your post will be live and your RSS feed will be pinged out to lots of different services. Previewing a post can avoid embarrassing spelling or formatting errors before the post goes live.

Preview uses the same templates files as your blog and so will load all of the same files as if you normally view your site. The only small issue with this mechanism is that any analytics code you might have installed will be run as well and you might see that you most visited pages are you previewing posts before putting them live.

Of course you could just filter out your IP address in your analytics, but if your WordPress blog has lots of different authors writing content from many different locations it is unfeasible to continuously edit your analytics settings.

A better way is to use the function built into WordPress called is_preview() to detect if the page or post you are looking at is in preview mode. Here is an example.

if(!is_preview()){
  // analytics code here
}

An alternative method is to see if the preview parameter is set in your URL string.

if(!isset($_GET['preview'])){
  // analytics code here
}

The use of mod_rewrite on a site can have a powerful effect on search engine positioning, but to do it properly you will need to create a "slug" for each page. A slug is a lowercase alphanumeric version of the page title, with any spaces removed.

To get a slug you will need to use a function to turn a readable page title into a string that can be used as part of a URI.

This function is taken from Bramus and his excellent article about creating a post slug, and it does the job very nicely.

function fixForUri($string){
 $slug = trim($string); // trim the string
 $slug= preg_replace('/[^a-zA-Z0-9 -]/','',$slug ); // only take alphanumerical characters, but keep the spaces and dashes too...
 $slug= str_replace(' ','-', $slug); // replace spaces by dashes
 $slug= strtolower($slug); // make it lowercase
 return $slug;
}

To use the function just pass your page title (and it can be as messy as you like) into the function and capture the output.

$string = '"I\'ve got a lovely *bunch* of coconuts!"';
echo fixForUri($string);

UPDATE:

I recently found a bug in this function where any trailing spaces where converted into hyphens and used as part of the slug. To stop this I have added a call to trim() in order to prevent this from happening.