(For more resources on ChronoForms, see here.)

Showing a YouTube video

This is the "not really a form" recipe in this article, it just opens a little door to some of the other, more unexpected, capabilities of ChronoForms.

For the most part Joomla! protects the content you can display on your pages; it's easy to show HTML + CSS formatted content, more difficult to show PHP and JavaScript. There are many modules, plug-ins and extensions that can help with this but if you have ChronoForms installed then it may be able to help.

ChronoForms is designed to show pages that use HTML, CSS, PHP, and JavaScript working together. Most often the pages created are forms but nothing actually requires that any form inputs are included so we can add any code that we like.

ChronoForms will wrap our code inside <form>. . .</form> tags which means that we can't embed a form (why would we want to?), but otherwise most things are possible.

Getting ready

You will need the ID of the YouTube video that you want to display. We're going to use a video from a conference at Ashridge Business School, but any video will work in essentially the same way.

This recipe was developed for this particular video to force display of the HD version. At that time HD was a new option on YouTube and was not readily accessible as it is now.

How to do it...

Find the video you want on YouTube and look for the links boxes in the right hand column. Here we've clicked on the "customize" icon—the little gear wheel—to open up the options menu.

When you've set the options you want copy the code from the Embed box. Here is the code from this video with some added line breaks for clarity:

<object width="425" height="344">
<param name="movie"
  value="http://www.youtube.com/v/2Ok1SFnMS4E&hl=en_GB&fs=1&">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/2Ok1SFnMS4E&hl=en_GB&fs=1&"
  type="application/x-shockwave-flash" allowscriptaccess="always"
  allowfullscreen="true" width="425" height="344">
</embed>
</object>

To create a good looking page, we are going to add some HTML before and after this snippet:

<h3>Video Postcards from the Edge</h3>
<div>The video of the 2008 AMOC Conference</div>
<div style='margin:6px; padding:0px; border:6px solid silver;
width:425px;'>
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/2Ok1SFnMS4E&hl
  =en&fs=1&ap=%2526fmt%3D18"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/2Ok1SFnMS4E&hl=en&fs
  =1&ap=%2526fmt%3D18" type="application/x-shockwave-flash"
  allowscriptaccess="always" allowfullscreen="true" width="425"
  height="344"></embed></object>
</div>
<div>Some more text . . .</div>

If you look closely, you'll see that there is also a new parameter in the URL—&ap=%2526fmt%3D18—which is there to force the HD version of the video to be used.

Paste this code into the Form HTML box of a new form, save, and publish it.

Of course, it would be entirely possible to embed the video and to add form inputs in the same page, maybe to ask for comments or reviews.

How it works...

Very simply ChronoForms allows you to embed scripts into the page HTML that are not permitted in standard Joomla! articles.

Adding a barcode to a form e-mail

Sometimes it's important to add a unique identifier to the form response, for example travel or event tickets. In this recipe we will look at generating a "random" identifier and adding it to the form e-mail as a scannable barcode.

Getting ready

We're going to need a simple form. Our newsletter form will be perfect although we'll be adding to the code in the Form HTML box.

We'll need a simple function to create the "random identifier" which we will see shortly.

Lastly we"ll need code to generate a barcode. Rather than taking time reinventing this particular wheel, we're going to use a PHP program created by Charles J Scheffold and made available for use or download from http://www.sid6581.net/cs/php-scripts/barcode/.

How to do it...

First, grab a copy of the barcode.php file from sid6581.net.

We'll need to make this file accessible to our form. So let's create a new folder inside the ChronoForms front-end folder.
You'll probably need to use an FTP client to do this, or install the "exTplorer" Joomla! extension which will allow you to create folders from within the Joomla! Site Admin interface.
- Browse to [root]/components/com_chronocontact and create a new includes folder
- Copy the standard Joomla! index.html file from the com_chronocontact folder into the new folder
- Upload the barcode.php file into the new includes folder

Now, we are going to add the function to create a "random" identifier to the Form HTML. This is a small function that creates an alphanumeric string when it is called.
```
<?php
if ( !$mainframe->isSite() ) { return; }
/*
 function to generate a random alpha-numeric code
 using a specified pattern
 *
 * @param $pattern string
 * @return string
 */
function generateIdent($pattern='AA9999A')
{
  $alpha = array("A","B","C","D","E","F","G","H",
    "J","K","L","M","N","P","Q","R","S","T","U","V","W",
    "X","Y","Z");
  $digit = array("1","2","3","4","5","6","7","8","9");
  $return = "";
  $pattern_array = str_split($pattern, 1);
  foreach ( $pattern_array as $v ) {
    if ( is_numeric($v) ) {
      $return .= $digit[array_rand($digit)];
    } elseif ( in_array(strtoupper($v), $alpha) ) {
      $return .= $alpha[array_rand($alpha)];
    } else {
      $return .= " ";
    }
  }
  return $return;
}
?>
```
We call this function using generateIdent() or generateIdent('pattern') where the pattern is a string of As and 9s that defines the shape of the ident we want. The default is AA9999A, giving idents like KX4629G. This will be perfectly fine for our example here.

Unlock access to the largest independent learning library in Tech for FREE!

Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.

Renews at €14.99/month. Cancel anytime

We also want to add the ident into the form and we'll use a hidden field to do that, but to make it visible we'll also display the value.
```
<?php
$ident = generateIdent();
echo "<div>Ident is $ident</div>";
?>

<input type='hidden' name='ident' id='ident'
  value='<?php echo $ident; ?>' />
```
In day to day use we probably wouldn't generate the ident until after the form is submitted. There is often no useful value in displaying it on the form and essentially the same code will work in the OnSubmit boxes. However, here it makes the process clearer to generate it in the form HTML.

We can add both these code snippets to our form just before the submit button element. Then apply or save the form and view it in your browser.

The layout may not be very elegant but the Ident is there. Refresh the browser a few times to be sure that it is different each time.

It's simpler and tempting to use serial numbers to identify records. If you are saving data in a table then these are generated for you as record IDs. It does create some problems though; in particular, it can make it very easy to guess what other IDs are valid and if, as we often do, we include the ID in a URL it may well be possible to guess what other URLs will be valid. Using a random string like this makes that kind of security breach more difficult and less likely.

We said though that we'd generate a barcode, so let's develop this form one more step and show the barcode in the form.
If you look at the code in barcode.php, it shows a list of parameters and says what we can use. For example:
```
<img src="barcode.php?barcode=123456&width=320&height=200">
```

We need to modify this a little to link to the new folder for the file and to add our generated ident value:

<img src="/components/com_chronocontact/includes/barcode.
php?barcode=<? php echo $ident;?>&width=320&height=8">

This code can go in place of the "echo" line we used to display the ident value:

<?php
$ident = generateIdent();
echo "<img src='".JURI::base()
."components/com_chronocontact/includes/barcode.php?barcode="
.$ident."&width=320&height=80' />";
?>

Apply or save the form and view it in your browser.

There we have it—a bar code in our form showing the random ident that we have created.

If you don't see any graphic and the code appears to be correct then you may not have the PHP GD graphics library installed. Check on the AntiSpam tab for any of your forms and you will see a GD Info box. The GD library is now included in the vast majority of PHP installations. If you don't have it then check with your ISP to see if the library can be enabled.

Now that's actually not of much use except to show that it works, you can't scan a bar code off the screen. Where we want it is in our Email template.
The code to add to the template is:
```
<div>Your code: {ident}</div>
<img src="<?php echo JURI::base().'components/com_chronocontact/
  includes/'; ?>barcode.php?barcode={ident}&width=280&height=100"
  />
```

As this includes some PHP, we can't add it using the Rich Text Editor. First we need to go to the Email Setup | Properties box and set Use Template Editor to No, apply the Properties, then apply the form and go to the Email Template tab.
To avoid an "oddity" in the current release of ChronoForms it may be necessary to comment out the generateIdent() function code block in the Form HTML, while you create an Email Setup. Just put /* & */ before and after the block if you get a blank page or see a PHP Error message about re-declaring the function.

Now click on the Email Template tab and paste the code at the end of the textarea.

Submit the form to test.

We now have a printable e-mail complete with a barcode showing our random ident.

How it works...

In this recipe we did a couple of things. We added some more complex PHP to the Form HTML that we had before and we imported a PHP script found on the internet and successfully used that in combination with ChronoForms.

There are many hundreds of useful scripts available for almost any conceivable function. Not all are of good quality and not all will work in this way but, with a little work, a surprising number will function perfectly well.

There's more...

We said earlier that it might be better to generate the ident after the form is submitted. Here's the code to use in the OnSubmit Before code box to get the same result in the e-mail:

<?php
if ( ! $mainframe->isSite() ) { return; }
JRequest::setVar('ident', generateIdent());

/*
 function to generate a random alpha-numeric code
 using a specified pattern
  *
 * @param $pattern string
 * @return string
 */
function generateIdent($pattern='AA9999A')
{
  $alpha = array("A","B","C","D","E","F","G","H",
    "J","K","L","M","N","P","Q","R","S","T","U","V","W",
    "X","Y","Z");
  $digit = array("1","2","3","4","5","6","7","8","9");
  $return = "";
  $pattern_array = str_split($pattern, 1);
  foreach ( $pattern_array as $v ) {
    if ( is_numeric($v) ) {
      $return .= $digit[array_rand($digit)];
    } elseif ( in_array(strtoupper($v), $alpha) ) {
      $return .= $alpha[array_rand($alpha)];
    } else {
      $return .= " ";
    }
  }
  return $return;
}
?>

If you use this, then you can remove all of the additional code from the Form HTML box leaving just the basic HTML generated by the Form Wizard. The Email template code remains as we created it previously.