Friday, July 23, 2010

Simple Contact Form with Recaptcha: Code and How to Install

Let's face it. You want your website or blog visitors to be able to contact you. On the other hand, allowing all of the web to find your email address will only invite emails of the worst kind--spam.  The best way to receive the emails you want and at the same time protect yourself from spam is to use a simple contact form.  Even better, a simple contact form with recaptcha built in. Recaptcha requires the person to type in specific letters and numbers before the email is sent to you. 

This post will tell you where to find a simple contact form and how to install it in several easy steps. 

First of all, I have to give full kudos to Chris Coyier of CSS-Tricks, because he is the one who developed the basic, simple contact form I will describe how to install.  I tweaked the files a bit, to better suit my purposes.  Click to see an example of my simple contact form with recaptcha.  Here's another contact form that is a little bit different. Click here to see Chris's. (If you prefer his, then download the files from his site.)  If you'd prefer mine, click here to download the zip file.  I found it convenient to download the file to the contact folder within my website.

Get Your Recaptcha Key Codes

After you've downloaded the file and unzipped it, go to the Recaptcha website to get the key codes you'll need for your recaptcha to work.  Go to: http://www.google.com/recaptcha/plugins/php  Click on the link sign up for an API key. (Or, go directly to: https://www.google.com/recaptcha/admin/create)  Type in your website address.  If you need a global key, follow their instructions. Then click "Create Key." The page that loads has your Public Key and Private Key. Save this information in a safe place, for you will need to be able to access it to modify the contact form files.

Use your website design software to make the following changes to your new files.

Modify the file:  contactengine.php

1.  Replace the words YOURPRIVATEKEYHERE with your Private Key, supplied by the Recaptcha website.
2. Replace the captilized words below with the email address you want the message sent to (both addresses must be the same, as in the example):

$EmailFrom = "YOURCONTACTNAME@YOURDOMAIN.com";
$EmailTo = "YOURCONTACTNAME@YOURDOMAIN.com";

Modify the file:  style.css

1.  If you'd like, change the background image or color.  The following is the code currently in the file which points to a url for a repeating image in the images folder:

body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: url(images/expnewbg-mainbackground.png) repeat;
}

If you'd like to use your own image, or Chris' pinstriped black image, replace the url above with one in the images folder.

If you'd like to use a solid color instead, replace the background line with the following:

background: #000000;
Only, of course, replace the 000000 (which is black) with your own color code.

2.  Another color you might like to change is the background color under the section #page-wrap. Modify as desired.

Modify the file:  contactthanks.php

This is the file that comes up after someone successfully sends a message to you. 

1.  If you'd like your website banner at the top of the page, copy your own banner into the images file and replace (line 7) "dpbackground.jpg" with your own file name.  Also, change the Cap Letters for the alt section. If you don't want a banner, just delete line 7.

2.  Where would you like to direct your visitor after he has successfully emailed you?  On this contact thank you page, provide a link for him to click so he can return to your main page. Update the link and TEXT (line 22) with the correct information for your website.

Modify the file:  index.php

This is the actual simple contact form with recaptcha that your visitor will see when they email you.

1.  Change line 19 in the same way you changed line 7 under step 1 of "Modify the file: contactthanks.php".
2.  Copy and paste your public and private keys into the following code in the file:

$publickey = "YOURPUBLICKEYHERE";
$privatekey = "YOURPRIVATEKEYHERE";


That's it!  Congratulations!  Now you just need to update your contact links in your website so they hyperlink to your index.php file.  Upload it to your server and test it out.

Hope this helps!


"Many are the plans in a man's heart,
but it is the LORD's purpose that prevails." ~ Proverbs 19:21

Tuesday, July 13, 2010

Search Engine Optimization (SEO) for your Website or Blog

Search Engine Optimization is the holy grail of website designers, website owners and bloggers.  We want to get traffic to our pages so we can communicate to the world, sell a product, or promote a cause. But how do we get noticed?  Specifically, how do we convince Google and other search engines to rank our pages higher than those of another website?  The answer is search engine optimization (SEO).

Search engine optimization, at it's basic level, is fairly simple.  It can also be far more complex than I'll get into here, but these tips are a great way to start, and with a little time and effort, anyone can do them to improve their website or blog's page ranking.

Get quality links coming into your site. It is a fantastic way to improve your site's search engine optimization. 

The best links are from websites that are similar to yours in subject.  For example, if you are selling sculptures, links from other art related sites will help you in two ways:

1) You may get clicks from their site to yours, since their customers are looking for art, and you offer sculptures, and

2) When a search engine assesses the keywords in the linking site, it takes several factors into consideration to determine the quality of the link.  In the art example we're talking about, Google will look at the site's key words, determine that it is an art site, and when it follows the link and discovers yours is an art site also, it concludes that yours is a relevant site. It will reward the link accordingly.  It helps if key words relating to your site are imbedded in the host link.  Such as Stainless Steel Sculptures in this example. 

By the way, the worst links are those coming from link farms.  Google places no value on these links, and in fact, it is now believed by SEO experts that if the linking page/site is being penalized in some way by Google, that can negatively affect your own page ranking.  Get quality links!!!

Keywords are "key" to improving your site's SEO. Choose appropriate keywords to incorporate into your web pages.

Choosing the correct keywords for your web pages or blog is vital.  It may help to first answer the following questions:

1.  Who will visit your page and why?
2.  What information are they looking for?
3.  How does your web page meet their need?

You'll notice I'm saying web page, not website.  This is because it is likely each page of your site will have a different purpose.  For example, you may have a contact page, or a faq page.  These pages will require different keywords, because their purpose is different than your main page or your product page.

Let's go back to the art example.  If you are selling sculptures, determine which page you would like your visitor to land on.  The first page?  The sculpture product page?  After you have decided, then it is time to determine the best keywords for that particular page.  Once you have found those keywords, sprinkle them liberally on the page (in context please, and not enough to be annoying, of course), and include them in your page title, description and meta tags.  More on this later.

Think about the product you want to sell.  Say you have several stainless steel art sculptures to sell.  Brainstorm keyword ideas and write them down.  Imagine you are an art connoisseur, looking for that perfect sculpture for your garden. What keywords would you type into Google to find that perfect art piece? Stainless steel sculpture?  Garden Art? You get the idea.  (And let's not forget about Google images.  Later, I'll tell you how to use keywords with images, too.)

Now let's get a few more keyword ideas.  Two wonderful sites for this are:

Google Insights for Searchhttp://www.google.com/insights/search/
Type in your keyword(s), and hit "Search." The keywords' popularity will be listed on the right side of the page (a blue bar under the word TOTALS). Related keywords are listed at the bottom of the page.  These are additional ideas to add to your keyword brainstorming sheet.

Google Adwords: Keyword Tool: http://adwords.google.com/select/KeywordToolExternal 
At the top of the page, under "Find Keywords," type in the keywords you would like to research, and hit "Search." A table will load up, full of information about your keywords, plus additional, related keywords.  (You can delete any irrelevant words, if you wish.) 

You can customize these columns by clicking on the tab "Columns." I like to look at the "Estimated Average CPC," "Competition" and "Global Monthly Searches."  The local search columns can be helpful, too, depending upon your purposes.  These columns convey a wealth of information.  The "Competition" column tells you how popular that search term is.  If the bar is completely green, the competition is high.  By correlation, the "Global Monthly Search" level is also high (lots of people are searching for this term), and the "Estimated Ave. CPC" (CPC stands for cost per click in an Adwords campaign) is high, also.

While these highly competitive keywords might relate perfectly to your site, the competition is clearly fierce for those words.  It will be easy to get lost in the crowd.  While you can certainly use those keywords in your web page, you might want to focus more closely on different keywords--keywords with high relevance to your page, and less competition.  The book "Search Engine Optimization: An Hour a Day," by Jennifer Grappone and Gradiva Couzin, (an excellent book, by the way--I highly recommend it), advises website designers to choose keywords with the following attributes:

1.  Lower Popularity and Higher Relevance (meaning the keywords are very relevant to your page)
2.  Higher Competition along with Higher Relevance

If you'd like an Excel spreadsheet of the data you've found on the Adwords site, you'll want to click the button at the top of the page that says "Previous Interface."  It will allow you to export your findings to an Excel file, and download it to your computer.

By now you have a good number of possible keywords to use.  I recommend using one last tool to narrow down your best keywords to a manageable handful of five to ten.  To further determine your competition for keywords, go to http://www.google.com/.  In the search box type:  allintitle: YOUR SEARCH TERMS  and click "search." 

Google will tell you (in the line directly below the search box), exactly how many results (web pages) have your search terms in their title.  Once again, a large number means you're competing against a whole lot of people.  Keep in mind when choosing your keywords that while there are millions of fish in the sea, it's easy to drown in deep waters.  On the other hand, a tidal pool may have only a few fish, but they are easier to catch.

After you've decided on your keywords, it's time to implement them into your site.  Finally!

Plug your Keywords into Your Site in order to Improve your Website's Search Engine Optimization.

1.  Put your best keywords into the html of your site.  Put the best phrase(s) in your title (place them between the two Title tags). Add your keywords to your Meta tags, and include them in your Meta description.  NOTE:  If you put the keywords in your title, meta tags and meta description, be sure those exact keywords are located in the actual text of your page.  Title tags and Meta tags matter little if the search engines don't find the keywords in the actual content of your page.

2. Use your keywords as often as possible in your page content (without being obnoxious about it). Especially include your keywords in headers.  Search engines pay attention to bold or other emphasized text, and draw the conclusion that the content on your page is about the headlined text.

3. Remember I said I'd explain how to optimize your images for SEO?  It's easy.  Include keywords within the alt tags of the photo's html.  I like to put relevant keywords in both the short and long descriptions.  This way when people search Google images and type in your keywords, your pictures can come up.  Easy!

As I said in the beginning, search engine optimization is not hard, although it can be time consuming.  In addition, many more steps can be taken to further optimize your website for the search engines, but the steps I've outlined are a great way to start. With a little time and effort, you can begin to make your website into the popular site you would like it to be.


"For the LORD God is a sun and shield; the LORD bestows favor and honor;
no good thing does He withhold from those whose walk is blameless."
Psalm 84:11

Thursday, July 8, 2010

Basic Gimp - Scale (Resize) a Picture

Gimp is a free, open source program, which allows you to edit photos and images. It's available at the following website: http://www.gimp.org/

The Gimp website does contain extensive intructions, but I found it difficult to find answers to my beginning, basic questions about Gimp. As a consequence, I spent a great deal of time researching the internet and watching YouTube videos of how to do basic Gimp functions.  By the way, there are some fantastic YouTube videos out there, and I highly recommend them. GimpKnowHow does a particularly fine job.

Here is how to do the most basic functions in Gimp:

Undo Last Command - Ctrl Z
Redo Last Command - Ctrl Y

Scale/Resize a Photo or Picture Image to a Smaller size:

1.  Open the picture or image you would like to resize.
2.  In the Toolbox, click on the Crop tool.  (It looks like a square with a little square flying out of it.)
3.  Click on the picture or photo you would like to resize. A dialogue box will appear. To make the image scale proportionately, click the chain links object (next to the width and height boxes) so they link together. Type in the width or height dimension you need. Press "Enter," and the other measurement box will change accordingly.
4.  To actually scale the picture, click the "Scale" button.
5.  Now your picture is resized.   Only now you will see a lot of checkered gray area surrounding your picture. How to get rid of it?
6.  At the top of the Gimp task pane, click "Image," and then "Fit Canvas to Layers." Now all of the checkered gray is gone.

To Save Your File:

To save as a native Gimp file (and keep all layers separated), click "File," "Save As," and then type your new file name in the pop up dialogue box and add the extension .xcf.  For example, yourfilename.xcf

To save as a JPEG or TIFF File, you will first need to flatten the image before you can save it.
1.  In the layers panel, 'right click' in the white area below the tiny thumbnail of your picture
2.  Click "Flatten Image."
3.  Now you can save.  Go to "File," "Save As," and in the pop up box type in your new file name with either the extension .jpg or .tiff   Click "Save" (my version of Gimp requires me to click "Save" twice. I'm not sure why). In the pop up box you can choose the quality (or compression, if it's a TIFF file) of the final file. After this, click "Save," and you are done!

Check back for more tutorials for learning basic Gimp. Other areas we will cover include:

1. Cropping a picture
2. Cut with transparency
3. Layers
4. Cloning
5. Delete bits of a picture and make them transparent

Have a great day!

"Fear of man will prove to be a snare,
but whoever trusts in the LORD is kept safe." ~ Proverbs 29:25