View the Questionnaire Demo

View the Quiz Demo (Scoring: one correct answer)

View the Health Survey Demo (Scoring: answers weighted from 0 to 3)

Questionnaire Instructions: No Scoring

1. Create a Form in CformsII. Add the form to a WordPress page or post. Click for more information on creating a CFormsII form.
   
   Here’s what the demo Questionnaire looks like in the CForms Designer:
2. The survey results will be sent to the admin’s email account and the user’s email with the CC option.

Quiz Instructions: Scoring is Involved

1. Create a Form in CformsII. Add the form to a WordPress page or post. Click for more information.
   
   Remember the form number and field numbers.

   This form below is form #8 and the quiz includes fields 4 through 8.

   Each of the radio button answers are set up with a value = 1 for the correct answer and a value = 0 for the incorrect answer.

   

2. Edit my-functions.php .
   • Use the editor of your choice to edit wp-content/plugins/cforms/my-functions.php.
     OR
     Go into Plugins->Editor. Select plugin to edit: cforms. Click the cforms/my-functions.php file near the bottom of the long list of files.
   • The my-functions.php file has sample code for numerous actions. For example setting the redirection link, or changing an email address. By default, these functions are commented out.
   • Define my_cforms_logic to change the success message. In this example, the values for fields 4, 5, 6, 7, 8 are totaled. Correct answers have a value of 1 and incorrect answers have a value of 0 so the total represents the score.
   • Within the my_cforms_logic function, there are several ways to access the field data. In this example, the field value is referenced using it’s field number when combined with $$$.
   • To see the variables that hold field data use the @email function. The results will be sent to email.
3. Save Changes to the server
4. Run the form.

Here’s the code:

 
function my_cforms_logic($cformsdata,$oldvalue,$setting) {
 
   // Form number 7 is the Health Quiz:  the radio button value is weighted from 0 to 3.  This value gets added for a total score.
    if (( $cformsdata['id']==7 ) && ( $setting == "successMessage" )) {
         ### note: '$$$mypick' references the ID of the HTML element and has been assigned
         ### to the drop down field in the form configuration, with [id:mypick] !
	 $form   = $cformsdata['data'];
 
	 $total = $max = 0;
         $ptsPossible = 3;
 
	 for ($i = 4; $i <= 8; $i++) {
	 	$curField = '$$$' . $i;
	 	$total += $form[$form[$curField]];
                $max += $ptsPossible;
	 }
 
         $yourScore = "<p>You scored " . $total . " out of " . $max . "</p>";
	 if ( $total >= 12 )
	        return $yourScore . ' <p>Good Work!  Keep up your healthy eating habits</p> ' . $oldvalue ;
         else if ($total >=8)
                return $yourScore . ' <p>Your score indicates a need for improvement.  Try adding some healthier elements to your diet.</p> ' . $oldvalue ;
         else 
               return $yourScore . ' <p>Your score shows a need for improvement.  Try adding some healthier elements to your diet:  Whole wheat cereals and breads are found to reduce heart disease.  Fish such as salmon and halibut have large quantities of omega-3 fatty acids.  These can reduce cholesterol.  USDA recommends 20% of your total daily intake of fat.  Especially the unsaturated fats found in plants.</p> ' . $oldvalue;
 
//@mail('your@email.com', 'cforms my_filter_nonAjax test', 'Form data array (nonAjax):'.print_r($cformsdata,1), 'From: your@email.com');
	}
 
         // Form number 8 is the TV Questionnaire:  the radio button value: 0 = wrong, 1 = correct.  This value gets added for a total score.
         if (( $cformsdata['id']==8 ) && ( $setting == "successMessage" )) {
 
		### note: '$$$mypick' references the ID of the HTML element and has been assigned
                ### to the drop down field in the form configuration, with [id:mypick] !
		$form   = $cformsdata['data'];
 
		$totalCorrect = 0;
		$total = 0;
 		for ($i = 4; $i <= 8; $i++) {
		         $curField = '$$$' . $i;
		         $totalCorrect += $form[$form[$curField]];
                         $total++;
 		}
 
                $percent = ($totalCorrect / $total) * 100;
                $yourScore = "<p>You scored " . $totalCorrect . " out of " . $total . ".  That's " . $percent . "%!</p>";
		if ( $total >= 4 )
	               return $yourScore . ' <p>Good Work!</p>' . $oldvalue ;
		else
		      return $yourScore . ' <p>Better Luck Next Time!</p>';
 
		//@mail('your@email.com', 'cforms my_filter_nonAjax test', 'Form data array (nonAjax):'.print_r($cformsdata,1), 'From: your@email.com');
	}
	return $oldvalue;
}

View a Photo Gallery Demo

1. CREATE A WEB ALBUM IN PICASA
   Use the Picasa application to create an album, or choose an existing album. Make sure the album is selected before you start the export. You can select individual photos or the entire album for export.
2. INSTALL THE TEMPLATES
   • Search the internet for Picasa Templates.
   • Download and unzip the template onto your computer in the folder:
     ProgramFiles/Google/Picasa3/web/templates

     [Mac Users: Use the Finder window to locate Picasa in the applications folder. Right Mouse Click on Picasa Application. Select Show Package Contents Copy the template folder into Contents->Resources->web->templates].

     (I used the DarkGallery template. Click here for template download.)

3. EXPORT THE ALBUM
   • Bring up the Picasa Application.
   • Make sure you have an album selected.
   • Select menu: Album -> Export as HTML page
     Mac Users: Folder-> Export as HTML page
   • The new window “Export as HTML Page” will appear. Once the desired export options are selected, choose a location for your photo gallery and press the Next button.
   • The window “Select a Web Page Template” will appear. Choose your template. Now press the finish button. Picasa exports files into the location above. Transfer these files to the sever and your slideshow is ready to view!

RELATED POSTS

• What’s Next: Add Headers and Menus to a Picasa Gallery
• Picasa Template Downloads
• Embed a Picasa Slide Show Into Your Website

View a Slide Show Demo

View a Slide Show Demo in a WordPress Post

1. CREATE A WEB ALBUM IN PICASA
   Use the Picasa application to create an album, or choose an existing Picasa album. Make sure your album is synced to the web. I set the Visibility to Public so anyone can view the photos.
2. RETRIEVE THE SLIDESHOW LINK FROM PICASA
   • Open the Web Album in your favorite browser. (You can use the link “view online… ” from within the Picasa application.)
   • Select “Link to this album “. (Found on the right column of the Web Album page.)
   • Select: “Embed Slideshow “.

   

   • The new window “Create a portable slideshow for your website…” will appear. Once the desired slideshow options are selected, copy the HTML text at the bottom of the window.
   • Paste the HTML code into your webpage. [I use Dreamweaver to edit my web pages but something as simple as NotePad will do.]

     For Dreamweaver users: Bring up your web page in the Design tab. Click to mark the insertion point. Change to the Code tab. Paste the HTML code (Ctrl V). Save File.
     Now save these changes to the sever and your slideshow is ready to view!

     For WordPress: Log into WordPress administration. Create a new post or edit an existing post. Paste the HTML code from Picasa into the editor and save the changes.
     [If you created your website through a web hosting service like GoDaddy, you may need to use their web site editting services. Make sure you go into HTML mode before pasting.]

RELATED POSTS:

• Create a Photo Gallery From Your Picasa Album
• Picasa Template Downloads

The JAlbum website (www.jalbum.net) promotes its web hosting feature – JAlbum will provide users with web space for their photo gallery. I really prefer to let JAlbum publish photos on my own site. The JAlbum application installs and runs from a local drive, similar to Picasa. There are versions for Windows and Mac based operating systems.

VIEW A JALBUM GALLERY RUNNING ON MY WEBSITE

Here’s how to get started with JAlbum:
1. Install JAlbum onto your computer.
2. Open JAlbum and Create a New Album.
3. Add Photographs and Images to the Album.
4. Select a Skin (I choose FotoPlayer); or find skin from the internet: click on the “more skins” link to look on the jalbum site. Once you’ve selected a skin, the download and installation is done for you.
5. ADD WEB HOST INFORMATION FOR PHOTO ALBUM
Select Tools -> Publish/Manage from the menubar

• Step 1: FTP ACCOUNT LOGIN (These FTP settings can be obtained through your web host provider.)
  Server Name: (host / URL) eg. www.janbthomas.com
  User Name: (FTP account name)
  Password: (FTP password)
• Step 2: Navigate to Host Subdirectory
• Select the Close Button

6. Make the Album.
7. Click on the “Publish/Manage” Button to send your new album to your web server using JAlbum’s FTP utility.

This application is free and developers provide some really nice skins that can include both slide show and gallery features in one nice Flash package.

Next Step: Adding Headers and Menus to a JAlbum Gallery

RELATED POSTS:

Create a Photo Gallery From Your Picasa Album
Embed a Picasa Slideshow into Your Website

1. Install the CFormsII Plugin.

2. Bring up CFormsII in the WordPress administrator. CFormsII link is in the main WordPress menu. Look for the icon:


3. Label fields: (Add fields as needed.)
Add any fields needed. Dropdown fields, edit fields, etc.
For Select Box separate options with a # for example: Type of Contact#Website#Blog#Flash.

VIEW THE CONTACT FORM WITH SELECT BOX

How to use the “Multiple form mail recipients” dropdown option:
Select field type Multiple Recipients. Click the Edit button. Enter the option name to be displayed in the drop down, then beside the name add the email address into the optional value field.

4. Create a new Page (or Post) to hold the Contact Form

• Bring up the Pages menu on the main WordPress menubar.
• Click the “Add New” Link.
• Label the page something like “Contact Information”.
• Add the Contact form by clicking in the page content area and press CForms button then insert. A string of code will be added to your page that looks something like this: <– cforms name=”contactpage”–>

The CForms button isn’t necessary. There are times I don’t see the CForms button in Edit Page and Edit Post. Just add this line of code into your page or post:

<!--cforms name="contactpage"-->

Where “contactpage” is the name of the CFormsII form you created.

• Call this page to bring up the Contact Form. Here’s how I bring up my new Contact Form: www.janbthomas.com/jansblog/defaultcontact/

5. Create a Success Page for the Contact Form: (optional)
Core Form Admin -> Redirect
Select: Enable alternative success page.
URL: Create an html file to display a Thank you message. Add it to the themes directory.
[This step isn't required. This option is used to hide the contact form on success and replace it with a simple "Success" page.]

VIEW DEMO OF CONTACT WITH REDIRECT

6. As an alternative, create a template customized for the Content Form. For example, a template could be created without the menus and banners. Once created, add this template into the themes directory, and into the Content Information Page.

7. Here’s another option: bring up the contact form in a popup window. Use this HTML code to create a link to the new Contact Form:

<a class="postLink" href="#" 
onClick="window.open('http://www.janbthomas.com/jansblog/contact/', 'Contact Us','toolbar=yes,location=yes,directories=no,status=no, menubar=yes,scrollbars=no,width=500,height=500,top=100,left=250');"/> 
Contact Jan </a>

Here’s the final result: Contact Jan

For a more detailed description: View Popup Window Post