You’ll be able to maintain a separate list of products using custom post types, each with an associated image, as well as some meta-info such as price, rating, specifications – and we’ll finish it all off with a way to display them in a sidebar widget and an index page.Sounds good? Read on.

Requirements:

You’ll need a working WordPress 3.0+ self hosted install, and this will make use of extensive PHP coding. I’ll give you the code, but you’ll need to be relatively comfortable with PHP and XHTML to adjust variable names to your needs or change the style. If you need a quick beginners course on CSS and XHTML, may I suggest our wonderful free beginners guide to download. I’d also suggest you use a cleanly coded but basic theme – the default Twenty-Ten or Twenty-Eleven theme is actually quite complicated to edit, so try this first on something simpler before trying to integrate with that.

Create Post Types

If you read last weeks tutorial, you should be somewhat familiar with creating a custom post type in WordPress. Copy and paste this base code into a new plugin, activate it, and begin adding some new products so we have a dataset to work with. (Note: If you’d rather just download the complete and full code now without trying to add things along the way, use this finished code instead. You can still follow along with the tutorial and customize it as we go)

It’s also wise to decide now what kind of meta-info you want to associate with each product. A database of digital cameras for instance might need:

• Retail Price
• Resolution
• HD Video
• Purchase Link
• Rating

Rather than adding this info directly to the description of the product (the ‘post content’), we’re going to create custom fields to hold this info. On the add product screen, make sure you’ve enabled custom fields, then create a new field for each info set. You’ll only need to create new fields once – the next product you add you’ll be able to select the name of the custom field from the drop down box. Don’t forget to add a featured image, as well be using this to display alongside the info product later on.

Single Product Template

If you try to view one of your products now, you’ll probably get a 404 – Not Found error. To fix that, head into the permalinks settings of WordPress and just hit Save Settings once. Now when you view one of your new product entries, depending on your theme, you might see something a little plain. The title and description text are there, but what about all our custom meta info and the image?

To customize the single product views, we’ll need to customize a new template file called single-products.php – do this by duplicating your existing single.php so we have the groundwork in place and aren’t starting from scratch.

At this point, I’m going to make a very small change to the line that displays “Written by (author) on (date)”, so instead it just reads “Added to the database on (date)”. This is just so I can be sure template is working, and refreshing the single product page should show this change instantly.

Now, to add the featured post image we attached to the product, this one line should do it (I included style info too, in case you need it). I’ve posted the full code to my own single-products.php here, but remember it’s unique to my theme so simply copying that into your own theme directory may produce unexpected results.

The simplest way to add the meta info anywhere is to use:

…but this will only give us a very basic output list of key-value pairs. In order to do anything more complicated with the returned values (such as display a star-rating graphic), you need to grab all the values then iterate over them. [View the code here]:

In the example above, I’m checking each custom field name (the $key) to see if it’s called ‘Level’. If it is called level, instead of just echoing the value of the field back, I’m displaying a different graphical element based on the content. For any other custom fields, I’m echoing the value as it is, along with the name of the field (which is exactly what the_meta() does). Now my single product page looks like this:

I’m going to leave it there for single product views, as it really depends upon your own theme and what you want to achieve with it. For now, let’s move onto a sidebar widget to display… the 3 highest ranked products in the database?

Widget

To do this, I’ve slightly adjusted the code I gave you before in the post How to Write a Basic WordPress Widget, but instead of showing a single random post, I’ve adjusted it with the following [view the full code here]:

This will give me 3 posts laid out similar to the example screenshot below. If you’re not seeing any of your products displayed, check very carefully the section that says &meta_key=Rating to make sure you actually have a meta key of that name. Notice how I also chose to display the meta info associated with that product along with the featured thumbnail, but you can edit that particular code block to show whatever you like.

Product Archives or Listing

Finally, I also wanted to make an index/archives page, so that visiting http://yourdomain.com/products/ would show a simple list of all the products, similar to a blog index. The basic excerpt + post thumbnails style I showed you how to make in the How To Add Post Thumbnails To Your Theme article was mostly sufficient, but in order to customize it I duplicated the archive.php file in my theme and renamed it archive-products.php.

If you don’t already have an archives page, just duplicate index.php and rename it to archive-products.php. Again, by adjusting the article meta-info line and adding a call to the the_meta() somewhere, I got this:

Obviously, it looks a bit silly with both the archives and sidebar, and it could do with a bit more style adjustment, but I’ll leave that up to you!

That’s it from me today. You can view the complete full code online here – just copy and paste or download the entire thing into a file called products.php, and place it in your plugins directory. You should be able to potentially expand your WordPress blog into a database of anything now! It’s difficult to answer individual problems you might be having, but do please post in the comments if you’d like some help or would like to show your appreciation – a tweet or Facebook like would very much be appreciated, or even a mention on your blog if you decide to implement this. Thanks for reading, and don’t forget all the other WordPress tutorials we have!

For those of you who have followed my past articles, you will know that I cover WordPress fairly often. In fact, there are a few of us here at MUO that regularly lift the hood to do some tweaking. Aibek covered WordPress backups a few years ago, and James has produced a lot of WordPress tutorials lately.

While it’s true that most people will simply install a theme and only customize the WordPress site to the extent allowed by the control panel, the truth is that with just a little bit of study and practice, you can easily tweak the PHP files within any WordPress template to customize it for your needs.

Customizing Your WordPress Site With User Information

The closest thing I’ve come to this is when I wrote about how to add a dynamic author footer to your WordPress blog posts. In my opinion, that is really a feature that every blog should have – it provides for a much more professional appearance, and it offers more credibility to the reader.

If you read that article, you’ll see that I used several built-in functions that are part of WordPress, including one that obtains the name, email address, number of posts, profile picture and author description from the profile page. You can take all of that data and then string it together into text that dynamically gets published depending on what article is currently on the page and who the author is.

I was really excited when I discovered how to do that, but more recently I came across a situation where the method above didn’t work – a central page, like the website main blog page, where there is no single “author” for the page. In that case, the method above won’t work. If you use the functions I listed in that article, it will always pull the default author.

This makes it really hard when you want to build an box of author bios for all of the writers on your site. I also noticed that there are very few blogs out there that have published how to do this – everyone is writing about the standard “the_author()” functions that look at the author for the current page.

Before you get started using the functions that I’m going to introduce you to, first go to your “Edit User” page in WordPress, and for each of your users, you’ll need to know the email address they’ve signed up with, as well as the User_ID. You can see this when you go to edit their profile, as it’s listed in the URL next to “user_id=“.

Once you have those two pieces of information from the user profile, you’re ready to get started with the “get_userdata” function. Here is a simple script that will extract both the avatar photo and the user_description from the WordPress user profile.

<span style="float:left;margin:0 10px 0 0;">
<?php $author_email = "freewritingcenter@gmail.com";
echo get_avatar($author_email, '80')?></span>
<?php $user_info = get_userdata(4);
echo $user_info->user_description . "\n";
?>

How does this work? It’s pretty simple. The “get_avatar” is not dependent upon the current author of the page, it only cares about the e-mail address to obtain the avatar. But to get the description text, you have no choice but to use “get_userdata()” to pull that information. The only parameter you have to send it is the “user_id” that you just wrote down. Here’s how it looks:

The secret here is that the “get_userdata()” function actually pulls a whole list of parameters that you can obtain. Above, I only did an “echo” of the user_description text from the user profile, but you could also have the script print out the user’s name, email address, their URL/blog, and even an array of what their WordPress editing permissions are.

The coolest thing about using this function rather than the “the_author()” set of functions is that with just the User ID, you can extract information about any single one of your registered users, regardless who authored the page where your script is running. This is ideal for a list of author bios for a website. For example, I placed all of the bios in the sidebar on my site and formatted it all to pull the author descriptions one after the other.

The beauty of this solution is that if you need to make any changes to the WordPress author bios, you don’t have to edit any of the pages. Just go to the profile page and edit the bio there, all content will instantly reflect those changes.

Do you have a WordPress site with multiple writers? Can you think of other creative ways to integrate user information into web page content? Share your own experiences and insight in the comments section below.

Image credit: Henk L

Here at MUO, we’ve covered a lot about creating a mailing list and a newsletter. James described a useful online service called Zotero for using a mailing list. Steve offered two great online services that you could use to distribute a newsletter. However, In all of these cases, you are dependent upon another online service – most of which are not usually free.

Enter PHPList. You’ve heard of PHPList on Directory – at least the hosted option anyway. Once again, this is an online service that you pay for, where you can set up a mailing list on your website. Someone else hosts the service and the list, and you have to pay a monthly fee. But you can actually download PHPList for absolutely free and install it on your own web server. The folks at PHPList will charge hundreds to install and configure the service for you, but in all honesty if you’ve ever installed WordPress or other PHP apps on your server before, this one isn’t a whole lot different. You can do it yourself.

Installing PHPList On Your Own Web Server

What’s the benefit of installing the script on your own server? Well, number one, your entire list and everything associated with the subscriptions and newsletter are stored somewhere that you control. It’s also free.

First, download a free copy of PHPList, and save it to your PC.  Just as when you install WordPress, using phpMyAdmin, or whatever utility your web host uses to create a new SQL Database, add a new database called “phplistdb” and then add a new user “phplist” with password “phplist“, and grant all rights to the phplistdb database.

In the downloaded Zip file, you’ll find a “public_html” folder with an index.html file and a “lists” folder. Upload these to the sub-directory on your web server (in the public folder) where you want to store your PHPLists script.  Before you upload, go in and make sure to edit the config.php file in /lists/config/.

The important settings are toward the top of the config.php file. Just make sure that the database name, user ID and password are the same as the ones you used when you set up the database. Another important setting is $pageroot and $adminpages – make sure those point to the correct directory where you uploaded the “lists” directory.

If you’ve set up the database and the config file correctly, when you open up “http://<your-domain>/subscriptions/lists/” , the script will open up the page where you can run the PHPlist install script. I’ve used “subscriptions” in this case, but you’ll use whatever sub-directory where you uploaded the script.

Click to install PHPList, and you’ll see the script populate all of the tables in the PHPlist database you created.

Once that’s done, click on “main page“, and then click on “Setup phpList” on the next screen.

This next screen makes it ridiculously easy to set up phpList to run on your server. All you have to do is go through each item on the list. The procedure walks you through everything.

On the page configuration pages, you can customize just about everything that the users see during the subscription process.

Customizations include the general formatting of the “subscribe me” page, as well as where people are forwarded after successfully subscribing – allowing you to offer a “thank you for subscribing” page that you’ve built yourself.

As you can see above, nothing is set in stone. Want the header of the subscription page to look just like your own site, go ahead and edit the “header” code to your liking.

Keep in mind that you don’t have to do all of this customization. You can install, set up and run phpList right out of the box without any customization.  All you have to do is create a “subscribe” link on your site, and send visitors to the /lists/ directory – they’ll see the sign-up page where they can enter in their email address to subscribe to your newsletter.

All information gets stored on your server, not some service where everything gets stored out on the “cloud” somewhere. They subscribe and get forwarded directly to the “thank you” page.

There is one caveat to keep in mind – the script needs the ability to send email on your server. It can use SMTP if you configure it in the config file, but it can take some work to get it to send if you don’t use the standard port 25. There are lots of help forums out there that can help with this setup, but just keep it in mind if you hit a brick wall. You may also need to work closely with your web host service so that your account has the appropriate permissions to send out mail. Or you can set up the system on your own web server and open up the right port yourself.

So, give phpList a try and see what it’s like to control your own subscriber list. You’ll never have to worry about losing the list that you worked so hard to build – you can export and save that list so that you’ll always have it. Let us know what you think of the service, and whether you know of any similar newsletter scripts that work as well on a web server.

If you read part 1 and followed along, you’ll know I set some homework to adjust the script to grab images instead of links.

I dropped some pretty big hints, but if you didn’t get it or if you couldn’t get your code to run right, then here is the solution. I added an additional line to output the actual images themselves as well, rather than just the source address of the image.

<?php
include_once('simple_html_dom.php');
$target_url = "http://www.tokyobit.com";
$html = new simple_html_dom();
$html->load_file($target_url);
foreach($html->find('img') as $img)
{
echo $img->src."<br />";
echo $img."<br/>";
}
?>

This should output something like this:

Of course, the results are far from elegant, but it does work. Notice that the script is only capable of grabbing images that are on the content of the page in the form of <img> tags – a lot of the page design elements are hard-coded into the CSS, so our script can’t grab those. Again, you can run this through my server and if you wish at this URL, but to enter your own target site you’ll have to edit the code and run on your own server as I explained in part 1. At this point, you should bear in mind that downloading images from a website is significantly more stress on the server than simply grabbing text links, so do only try the script on your own blog or mine and try not to refresh lots of times.

Let’s move on and be a little more adventurous. We’re going to build upon our original file, and instead of just grabbing all the links randomly, we’re going to make it do something more useful by getting the post content instead. We can do this quite easily because standard WordPress wraps the post content within a <div class=”post”> tag, so all we need to do is grab any “div” with that class type, and output them – effectively stripping everything except the main content out of the original site. Here is our initial code:

<?php
include_once('simple_html_dom.php');
$target_url = "http://www.tokyobit.com";

You can see the output by running the script from here (forgive the slowness, my site is hosted at GoDaddy and they don’t scale very well at all), but it doesn’t contain any of the original design – it is literally just the content.

Let me show you another cool feature now – the ability to delete elements of the page that we don’t like. For instance, I find the meta data quite annoying – like the date and author name – so I’ve added some more code that finds those bits (identified by various classes of div such as post-date, post-info, and meta). I’ve also added a simple CSS style-sheet to format the output a little. Daniel covered a number of great places to learn CSS online if you’re not familiar with it.

As I mentioned in part 1, even though the file contains PHP code, we can still add standard HTML or CSS to the page and the browser will understand it just fine – the PHP code is run on the server, then everything is sent to the browser, to you, as standard HTML. Anyway, here’s the whole final code:

You can check out the results here. Pretty impressive, huh? We’ve taken the content of the original page, got rid of a few bits we didn’t want, and completely reformatted it in the style we like! And more than that, the process is now automated, so if new content were to be published, it would automatically display on our script.

That’s only a fraction of the power available to you though, you can read the full manual online here if you’d like to explore it a little more of the PHP Simple DOM helper and how it greatly aids and simplifies the web crawling process. It’s a great way to take your knowledge of basic HTML and take it up to the next dynamic level.

What could you use this for though? Well, let’s say you own lots of websites and wanted to gather all the contents onto a single site. You could copy and paste the contents every time you update each site, or you could just do it all automatically with this script. Personally, even though I may never use it, I found the script to be a useful exercise in understanding the underlying structure of modern internet documents. It also exposes how simple it is to re-use content when everything is published on a similar system using the same semantics.

What do you think? Again, do let me know in the comments if you’d like to learn some more basic web programming, as I feel like I’ve started you off on level 5 and skipped the first 4! Did you follow along and try yourself, or did you find it a little too confusing? Would you like to learn more about some of the other technologies behind the modern internet browsing experience?

If you’d prefer learning to program on the desktop side of things, Bakari covered some great beginner resources for learning Cocoa Mac OSX desktop programming at the start of the year, and our featured directory app CodeFetch is useful for any programming language. Remember, skills you develop programming in any language can be used across the board.

The Google web crawler will enter your domain and scan every page of your website, extracting page titles, descriptions, keywords, and links  – then report back to Google HQ and add the information to their huge database.

Today, I’d like to teach you how to make your own basic crawler – not one that scans the whole Internet, though, but one that is able to extract all the links from a given webpage.

Generally, you should make sure you have permission before scraping random websites, as most people consider it to be a very grey legal area. Still, as I say, the web wouldn’t function without these kind of crawlers, so it’s important you understand how they work and how easy they are to make.

To make a simple crawler, we’ll be using the most common programming language of the internet – PHP. Don’t worry if you’ve never programmed in PHP – I’ll be taking you through each step and explaining what each part does. I am going to assume an absolute basic knowledge of HTML though, enough that you understand how a link or image is added to an HTML document.

Before we start, you will need a server to run PHP. You have a number of options here:

• If you host your own blog using WordPress, you already have one, so upload the files you write via FTP and run them from there. Matt showed us some free FTP clients for Windows you could use.
• If you don’t have a web server but do have an old PC sitting around, then you could follow Dave’s tutorial here to turn an old PC into a web server.
• Just one computer? Don’t worry – Jeffry showed us how we can run a local server inside of Windows or Mac.

Getting Started

We’ll be using a helper class called Simple HTML DOM. Download this zip file, unzip it, and upload the simple_html_dom.php file contained within to your website first (in the same directory you’ll be running your programs from). It contains functions we will be using to traverse the elements of a webpage more easily. That zip file also contains today’s example code.

First, let’s write a simple program that will check if PHP is working or not. We’ll also import the helper file we’ll be using later. Make a new file in your web directory, and call it example1.php – the actual name isn’t important, but the .php ending is. Copy and paste this code into it:

 
<?php
include_once('simple_html_dom.php');
phpinfo();
?>

Access the file through your internet browser. If you don’t have a server set up, you can still run the program from my server if you want. If everything has gone right, you should see a big page of random debug and server information printed out like below – all from the little line of code! It’s not really what we’re after, but at least we know everything is working.

The first and last lines simply tell the server we are going to be using PHP code. This is important because we can actually include standard HTML on the page too, and it will render just fine. The second line pulls in the Simple HTML DOM helper we will be using. The phpinfo(); line is the one that printed out all that debug info, but you can go ahead and delete that now. Notice that in PHP, any commands we have must be finished with a colon (;). The most common mistake of any PHP beginner is to forget that little bit of punctuation.

One typical task that Google performs is to pull all the links from a page and see which sites they are endorsing. Try the following code next, in a new file if you like.

<?php
include_once('simple_html_dom.php');

$target_url = “http://www.tokyobit.com/”;
$html = new simple_html_dom();
$html->load_file($target_url);
foreach($html->find(‘a’) as $link){
echo $link->href.”<br />”;
}
?>

Again, you can run that from my server too if you don't have your own set up. You should get a page full of URLs! Wonderful. Most of them will be internal links, of course. In a real world situation, Google would ignore internal links and simply look at what other websites you're linking to, but that's outside the scope of this tutorial.

If you're running on your own server, go ahead and change the target_URL variable to your own webpage or any other website you'd like to examine.

That code was quite a jump from the last example, so let's go through in pseudo-code to make sure you understand what's going on.

That's it for today, but if you'd like a bit of challenge - try to modify to the second example so that instead of searching for links (<a> elements), it grabs images instead (<img>). Remember, the src attribute of an image specifies the URL for that image, not HREF.

Would you like learn more? Let me know in the comments if you're interested in reading a part 2 (complete with homework solution!), or even if you'd like a back-basics PHP tutorial - and I'll rustle one up next time for you. I warn you though - once you get started with programming in PHP, you'll start making plans to create the next Facebook, and all those latent desires for world domination will soon consume you. Programming is fun.

Your WordPress profile doesn’t display a cool picture, so you’ve got to sign up for a Gravatar account. Your post doesn’t display comments where you want them to on each post, so the next thing you know you find yourself trying to tweak the PHP code to get things just right.

I’ve been in the “need-to-customize” boat enough times to know that it’s nice to have a carefully laid out set of instructions that will accomplish a specific task on your blog. In this case, I’m going to lay out how you can create a very convenient and dynamic biography footer at the end of every post, depending on which user wrote the blog entry.

This “tweak” will basically pull the bio information entered into the user profile screen in the admin panel, and it will publish the Gravatar photo associated with the email of that user using the bio info to change the footer credit on WordPress.

Understanding The PHP Tags

You only have to edit one PHP file in your theme to accomplish this. That is the single.php file. This file handles the display of individual posts. You’re going to insert dynamic PHP tags to create a footer in every post. The PHP functions that you’re going to use are as follows.

• get_the_author_email() - This pulls the email address from the current user’s profile page.
• the_author_description() - This pulls the description text from the profile page.
• the_author() – This will extract the user’s name.
• the_user_posts() – This provides an accumulated total of posts the user has written.

All of this information is entered into the profile page by the users that you have writing on your blog.

So long as your users use the same email in the “E-mail” field as they’ve used on their Gravatar account, their profile picture will load correctly into this WordPress blog. The author name comes from the “Nickname field”, and the description comes from the “Biographical Info” field. So long as these fields are filled out, your footer bio in each post will work perfectly.

Writing The Code

Even if you’ve never edited a line of PHP code in your life, you can do this. Go into your hosting account and browse the PHP files in your theme directory until you find single.php. It should be in WP-content/themes, and then the directory of your theme. Open up single.php, and search for “php the_content“. It should look like the code below.

Go to the end of that line, and press enter so that you’ll be entering the following code directly after that line. This will ensure that your footer information is always printed directly after the content of your post. It really is that simple.

Next, what you’re going to do is create the bio footer one element at a time, starting with the avatar picture and ending with the number of posts.  Just copy and paste the following code and you are all set.

<?php $author_email = get_the_author_email () ;
echo  get_avatar ($author_email,  ’80′) ;   ?></span>
<br><p><i><?php the_author_description () ;   ?>
<?php the_author() ;  ?> has  <?php the_author_posts () ;   ?>
post(s) at NAME OF WEBSITE</i></p>
<div style=”clear:both;”></div>

I like to have a line to divide the content from the bio, so I inserted “*****” with a line break. If you follow the code from top to bottom, you can see exactly how the bio footer is created. First, the email address is pulled from the user profile, then it’s used to obtain the bio photo from the gravatar image. Next, the description is pulled from the profile and printed, followed by the number of posts.

You can also add any formatting (bold or italics) and any additional text that you like. Here’s the footer after I’ve published a post.

The arrows point to the elements represented by variables – the photo, description, number of posts and the name. Using these variables, you can make the footer bio look however you like, and the information gets pulled from the appropriate profile and automatically filled in based on which user created the post.

It’s fully automated and works on just about any WordPress blog running any theme. Go ahead and give it a shot (just remember to save your original single.php file in case of any errors) and let us know how it went! Do you know of any other ways to list bio information in the post footer?  If so, let us know in the comments below.

If you just need to get feedback through text fields, or to record a visit – take a look at Abhigyan’s article on different ways to get a guestbook on your site. If you just need a form with text fields so your visitors can provide feedback or send in requests and comments, take a look at the article I wrote on free contact form generators that should do the trick.

However, if you need the added functionality of a “file” field where your visitors can attach a file – then you’re going to need to pull out a different bag of tricks. In this article I’m going to explain which approach to doing this that I feel is the most secure, and then I’m going to show you how to use a very cool free tool on your website which lets you embed this feature on your own website.

Methods To Send A File Via Email HTML Form

There are plenty of reasons why you may need your website visitors to send you a file. Maybe you’re accepting job applications and resumes. Maybe you are a publisher and want to provide a fast way for authors to submit their short stories. Regardless of the reason, instantly transmitting files is both a convenience and a security hazard, so it has to be handled the right way.

There is an element of the FORM tag that lets you upload a file to your server through the POST method. You will need a script (ACTION) to process it and store it in a directory on your server. W3Schools provides a really useful example of how to do this using PHP, which I thought was well laid out and easy enough to follow if this approach suits you.

However, while I’ve always preferred PHP over other scripts, I don’t really feel safe letting my visitors upload a file to my server. There are ways that you can make the process more secure and block spammers, but I still get a bit uneasy about the potential for viruses or other nasty files. For this reason, I really prefer having the form submission get packaged up in an email and sent off to me.

My email system has an excellent virus scanner for file attachments, so I know I can carefully handle files using this approach. This is why I turned to the free solution called PHPMailer-FE. This is one product that’s part of a larger open source project (please donate if you use the form!)

I decided to go with a pre-developed solution, because in all honesty, even though I know how to create a form and pass it to a script that I could write to process the information – why reinvent the wheel when there are such well developed packages already out there, and PHPMailer is absolutely one of them.

Download & Configure PHPMailer

When you download the Zip file, you’ll discover 3 folders – _lib, DOCS and sample_forms. Now, the developers offer an amazing amount of documentation on their site and in the developer forums. But, to be honest, you don’t really have to change a whole lot to get a simple form working on your site.

In the “sample_forms” directory, you’ll find a few examples that the developers already created for you. In this article I’ll install the sample form.html and get it working with just a very few minor configurations. If you don’t have the ability to edit files on your web hosting account, then skip below to the edits before uploading the files. Otherwise, you can upload the files first.

Keep the same directory structure, and make sure that the HTML file with the form is only one directory up. If you want otherwise, you’ll have to change how the form references the PHP script (see below). Actually – I messed up when I uploaded, you really only need the _lib folder and the HTML file – the DOCS folder is simply for your information.

Go into the _lib folder and edit the form.config.php file. This is where you can really fine-tune how your form behaves. The only required edit is to configure where the post is going to go. I’ve also added the “subject” field, because I want to use this form on multiple websites, and when it arrives in my mailbox I want to know where it came from – the Subject line will tell you that.

To enable any of these features, all you have to do is remove the comment code “//” and you’re good to go.

An Example Of The Form In Action

To demonstrate the form, I’ve copied the example form.html onto my website. This is what it looks like.

I love this…look how simple the form is, and you can embed it anywhere you want on your webpage. It has “required” field functionality so the user can’t submit the form without at least offering their name and email address, and of course it has exactly what we’re looking for – two upload fields where the visitor can attach up to two files.  Here’s what the sample FORM code looks like (this is the form you’ll embed into your own web page).

There are two ways you can take this. Either copy all of the code in the form.html sample file from the <style> tag down, or you can pluck out just the FORM elements and insert them into your own customized form, formatted the way you want. This is most likely the approach I will take.

The only critical part of this is that the “action” should point to the location of the “phpmailer-fe.php” script. Now that I’ve got the form.html ready to go, and the form configuration file customized to send to my email address and include a subject, it’s time to test and see what happens. I went to the form and submitted just my name, email, and attached a picture of a wolf. A second or two after submitting the form, this is what arrived in my Inbox.

You’ll notice that the email header has the sender as the email address entered in the form, and the subject line tells you which website sent the form. Best of all, take a look at what’s attached to the email.

Sweet! So, with just a couple very minor configuration file edits, you can now allow your visitors to send a file via email HTML form – and you didn’t have to write a single line of code.

Customizing The Behavior Of Your Form

Before concluding, there is one little thing that’s important to modify if you want the form to appear professional. Currently, upon successful submission, it refers the visitor to this funny-looking web page by default.

That animated “Processing…” bit is actually just an animated GIF – there’s no magic behind it. This page is defined in the form.config.php file I referenced above. To customize the response pages, just open up that file again, remove the comment slashes “//” for those fields and replace the”replyemailfailed.html” entry and the “replyemailsuccess.html” entry with your own customized success or failure webpages.

I would definitely suggest going through that config file and exploring all of the ways that you can tweak how this form behaves. PHPMailer is a very versatile and useful pre-packaged form processing script that you can use for a wide variety of purposes on your website. Why reinvent the wheel when someone has already invented such a well-made and powerful car? All you have to do is get in and drive!

Do you have a use for PHPMailer on your website? Do you use your own tools or techniques to easily add forms to your site where visitors can attach files? Share your insight in the comments section below.