Hopefully you will know how to create the menu in a list format and styled with CSS. If not, please go back and read my earlier post here.

To create the animation, we are going to use the tried and true animated gif. I don’t want to see every website loaded down with gifs like they use to be, but used as a nice accent piece like this is perfect. So create a gif the same size or smaller than your <li>. Keep in mind that we are going to use this gif as the background to the <li>. The text within the <li> will be a separate entity. Let’s call the gif back.gif

Once the gif is ready, let’s get into the code. So if you already have a class assigned to the <li>, great – If not, assign one now. For the sake of this post we will call the class “underlay”. Now we want to say for any list items <li> with the underlay class (.underlay) must have this gif – url(back.gif) – when they are hovered over (:hover). Here is the code to achieve this:

li.underlay:hover {

    background: url(back.gif);

}

If you had already assigned a class to the line items, simply replace the underlay in the code above with the class name you assigned.

Another option is to have the animated gif appear OVER the text. This works if you want the text to appear to shine, or be covered by a logo or arrow, etc. Use your imagination for its applications. This method can also be used to replace JavaScript rollover images making your site more CSS based.

For this example instead of focusing on the list Item <li> we are going to focus on the anchor <a> since we want to cover OVER the text.  If we follow the same thinking as in the underlay, it would simply insert the image behind the anchor. The easiest way to work around this is to have the image appear within a span over the text. So let’s begin by saying that any anchor within the class “overlay” when hovered over will show the span class. We say all that like this:

a.overlay:hover span

We want the Span to display the gif we have named “front.gif”. To make sure the span appears in the proper area we will have to define the position as absolute and display it as a block. We will also need to dictate the size of the span as well – obviously the same size as the gif – let’s say 100px by 50px. If we don’t dictate the span size, since it will be empty nothing will appear.

{

background: url(front.gif);

position: absolute;

display: block;

width: 100px;

height: 50px;

}

Place that within your head section or CSS file. Then, within your code place the following:

<a href=”insert your link here”>

<span></span>

Text for your link

</a>

Hope you have found this useful! As always, comments and questions are welcome.

Need help with your website design? Visit us at www.beloudonline.com

With FBML being deprecated, you are still able to utilize the reveal but it is a little more complicated now. The biggest difference is that your custom tab is not create on Facebook’s server as it was with FBML but instead created and hosted on your server but shown through the Facebook platform. This is done through an iframe. Now Facebook will try to post a “signed request” to your page and your page must be able to accept this.

If you are not going to use the information within the signed request, then you can simply change your extension from HTML to PHP. This will fool the browser into thinking that the page has accepted it, where an HTML file will simply reject anything posted to it.

To use the information within the signed request, we must download a file and load it onto the same server that you are placing your index file. That file is available here:
https://github.com/facebook/php-sdk/zipball/master

Once this downloads, unzip it and look within the “src” folder. Grab the facebook.php file and put that within the same folder as your index file.  Then we must add some code to your index file to load the facebook.php file. This code also gathers the information for you specific application through your app id and app secret (available on your app development page):

<?php require ‘facebook.php’;
$app_id = “enter your app id here”;
$app_secret = “enter your app secret here”;
$facebook = new Facebook(array(
‘appId’ => $app_id,
‘secret’ => $app_secret,
‘cookie’ => true
));

Now that it is set up, you will be able to gather information from the “signed request”.  This includes the page id of the visitor, if they are an admin of the page, their country and local, and if they like your page or not.

So let’s tell the page to accept the signed request so we can gather the info it holds by next adding the following code:

$signed_request = $facebook->getSignedRequest();

$page_id = $signed_request[“page”][“id”];
$page_admin = $signed_request[“page”][“admin”];
$like_status = $signed_request[“page”][“liked”];
$country = $signed_request[“user”][“country”];
$locale = $signed_request[“user”][“locale”];

Now comes the reveal. By entering the following code we are checking to see if the visitor likes the page. If they do we will display youlikeus.html, if they do not we will display youdontlikeus.html. We do this through a refresh. For your code, replace youlikeus.html and youdontlikeus.html with your appropriate pages.

if ($like_status) {
 {echo “<meta http-equiv=\”refresh\” content=\”0;URL=youlikeus.html\”>”;}
}
else {
 {echo “<meta http-equiv=\”refresh\” content=\”0;URL=youdontlikeus.html\”>”;}
}

?>

That is it. I hope you find it useful. If you need help with your social media marketing or website design, please visit www.beloudonline.com

Here is the complete code. Keep in mind that copying and pasting may cause difficulties due to the quotations pasting incorrectly. Please retype yourself:

<?php require ‘facebook.php’;

$app_id = “enter your app id here”;
$app_secret = “enter your app secret here”;
$facebook = new Facebook(array(
‘appId’ => $app_id,
‘secret’ => $app_secret,
‘cookie’ => true
));

$signed_request = $facebook->getSignedRequest();

$page_id = $signed_request[“page”][“id”];
$page_admin = $signed_request[“page”][“admin”];
$like_status = $signed_request[“page”][“liked”];
$country = $signed_request[“user”][“country”];
$locale = $signed_request[“user”][“locale”];

if ($like_status) {
 echo “<meta http-equiv=\”refresh\” content=\”0;URL=youlikeus.html\”>”;
}
else {
 echo “<meta http-equiv=\”refresh\” content=\”0;URL=youdontlikeus.html\”>”;
}

?>

First Thing we need to do is set the look of the menu. Let’s remove bullets from the list, remove margin and padding so we can dictate later, and establish the width of the list. Notice we are not setting the height so that it will automatically fit to what we need.

ul {

                list-style:none;

                margin:0;

                padding:0;

                width:180px;

                border:solid 1px #000;

                background-color:#fbeae4;

}

We also need to set the look of each line item. Again let’s remove all padding and margin so we can dictate later, and set the width and height.

li {

                width:180px;

                height:40px;

                padding:0;

                margin:0;

}

No lets set the look of each item when it is hovered.  Let’s dictate the height and width, as well as removing the margin and padding. I know this is redundant but any misplacing will throw the whole thing off so I like to be safe. Let’s also change the background color and put a border around the item we are hovering.

li:hover {

                width:180px;

                height:40px;

                margin:0;

                padding:0px;

                border:solid 1px #000;

                background-color:#fecdbe;

}

Since each title within our menu will be a text link, let’s control the look of the anchor. We also want to remove the underline and dictate the color. An important step is to set the anchor to display as a block and set the width and height to 100%. If we didn’t do this then the visitor would have to hover directly over the text to activate, where visitors are familiar with hovering over the area as a button. This sets the link to the entire area as if it was a button.

li a {

                margin: 0px;

                display:block;

                width: 100%;

                height: 100%;

                text-decoration:none;

                color:#000;

                font-size:12px;

}

We also want to do the same for the text links when they are hovered. Notice in this example we are not changing text color, but you can do so very easily as well as text size if you so desire. If changing text size, please compensate for width.

li a:hover {

                margin: 0px;

                display:block;

                width: 100%;

                height: 100%;

                text-decoration:none;

                color:#000;

                font-size:12px;

}

Now let’s hide second and third levels until they are needed. We are doing this by setting the display to none for everything after what we are looking at.

ul ul,

ul li:hover ul ul,

ul ul li:hover ul ul

{display: none;}

Now we want to display them as block when the previous li is hovered. Please note earlier reference to displaying as a block to achieve the feel of a button.

ul li:hover ul,

ul ul li:hover ul,

ul ul ul li:hover ul

{display: block;}

Now we have the menu working but the menu items do not align as they should. Let’s dictate that now. To make the menu items align we need to bring them up and out to the right.

ul ul {

                margin-top:-50px;

                margin-left: 180px;         

}

Now, since we removed the margin and padding from all ul and li we need to set a constant for all items. So let’s create a class to achieve this.

.indent {

                padding:10px 0 0 10px;

}

And last but not least, let’s create a containing box for the menu.

.menu {

                height: 450px;

                width: 180px;

                margin-left: 30px;

                margin-top: 20px;

                float:left;

}

That is the CSS side. Now let’s look at the HTML side:

<div>

<ul>

<li><a href=”link”>Level 1</a></li>

<li><a href=”link”>Level 1</a></li>

<li><a href=”#”>Level 1</a>

    <ul><li><a href=”link”>Level 2</a></li>

        <li><a href=”link”>Level 2</a></li>

    </ul></li>

<li><a href=”#”>Level 1</a>

    <ul><li><a href=”#”>Level 2</a>

                <ul><li><a href=”link”>Level 3</a></li>

            <li><a href=”link”>Level 3</a></li>

            <li><a href=”link”>Level 3</a></li>

                </ul></li>

   </ul></li>

</ul></div>

Hope that works for you as well as it has worked for me. If you require any help or are looking for effective custom website design, please visit us at www.beloudonline.com.

In addition to Spam filters, there are many different email service providers that all render your email differently. A beautifully designed email can look like garbage if the email service provider renders it incorrectly. By following a few simple steps, you can ensure that your email is received and displayed the way it was intended.

1 – Use Tables

I know it is counter intuitive as the web design world moves away from tables towards CSS, but emails are different than websites. Also, make sure to define the width and height of each cell. Email service preview panes are different sizes than the actual viewing area so by defining the dimensions you control the layout. Not to mention that different email services will render differently unless you define the dimensions.

2 – Newsletter dimensions

When most people receive your email, they will see the first 600 pixels wide from the top left corner, and the top 200 to 300 pixels of the newsletter. This is what will be displayed in their preview pane. It is based on this that they will decide to read on or not. Put the punch where they can see it. 

3 – Stay away from CSS – especially external style sheets.

Many email services are moving away from CSS support, especially external style sheets, and cut everything above the body tag – essentially leaving your email un-styled. To avoid this you should layout your email directly within each appropriate tag.

4 – Don’t use JavaScript in a newsletter – Ever!

There is no better way to get caught and blocked by a SPAM filter than by using JavaScript in an email.

5 – Minimal Graphics

Most email clients have their default settings to turn the graphics off, and most people do not spend the time to figure out how to turn them back on. Further, too many pictures (especially in ratio to actual text) in an email can be caught and blocked by spam filters. Why waste the time creating an email if it is just going to be blocked and not seen anyway?  Only use graphics that add to the content, not just for content.

6 – Define your images

Images are treated differently by different email services so by strictly defining all aspects of the image, you will ensure that if it is seen it is seen properly. With this in mind, do not use images for important content such as headers or links, and always use a descriptive alt tag. It is important to define both width and height as some email services default to 0 for either which aren’t defined.  For white space around your images use hspace and vspace as padding and margin are not reliably supported.

By following these 6 simple steps, your email is more likely to be received and viewed by the recipient as you intended.

If you require help with your email marketing, or if you would like us to set it all up for you to manage, please visit us at www.beloudonline.com or visit us at www.facebook.com/BeLoudOnline

If you are going to engage in email marketing that are a couple of best practices that will increase the effectiveness. Following are the top 5 concerns that should be addressed in the creation of your email:

1 – Make it informative or give the reader an added benefit OTHER than just promotional material.

If the reader begins to see your email as just another advertising piece, they will view it as spam and unsubscribe. Sell, but don’t be too “salesman” about it. There is a fine line between creating desire by informing people so they can make an educated purchase, and pitching them as if you were selling used cars (no offence to used car salesmen!) If you have trouble walking this fine line, let us help you by visiting www.beloudonline.com – see what we mean?

2 – Call to action, Ask for the sale.

Sometimes you just need to tip the scale – to help people make the decision to purchase. Other times all you need to do is ask. In either case, if you don’t try, they won’t buy. Even a small promotion may be enough to entice them. Offer a coupon or discount. Just give them a reason…

3 – Give them a way to purchase.

What you do with any email marketing campaign is build the desire. You build it and build it to the point of action, and then if you don’t give them a way to take action, it was all a waste. You have them foaming at the mouth to purchase your product or service – let them! Add a link to a site that they can make the purchase, a link to a site that shows them where they can go to purchase it, or a phone number they can call to purchase.

4 – Keep it short

Keep your email to about 300 words. If it starts getting any more than that, you may want to think about linking to a blog or your website. An email isn’t the right media or venue for large format articles, but a blog is perfect for it!

5 – Be consistent in layout and design

Readers will begin to expect your email to look a certain way, to be able to recognize it at a glance. By sticking to a familiar layout, number of articles, location of links, etc… your email will be easier for the reader to scan and find what they are looking for. In addition, by being consistent you will be defining your brand identity.

By reviewing these 5 points during the creation of your email marketing campaign you will increase its effectiveness. Our next post How To Code Your Email So It Gets Seen addresses the technical code aspects of the email. Did you know that the type of coding (JavaScript for example) and the number of graphics used can determine whether your email even makes it to the recipient!

If you require help with your email marketing, or if you would like us to set it all up for you to manage, please visit us at www.beloudonline.com or visit us at www.facebook.com/BeLoudOnline

First let’s deal with those considerations and then we will discuss how to place the picture and make it static. The number one concern should be how much of the picture will be seen. People have their screens set to different resolutions and widths. Typically, when designing a website you should aim to stay within an 800 pixel width to ensure your entire site is seen. Otherwise it risks being off screen to the side out of view. The problem with this is that some people have their monitors set to 1200px width leaving lots of “white space” around our site. This is easily remedied by the left and right margins being set to auto, causing the site to center in the screen. We can achieve the same as this by centering our picture. Keep In mind that if your picture is 1200px wide but the screen is only 800px, then it is the 800 pixels from the left side of the picture that will be viewed.

The other option to centering your picture is to have the focus of the picture in the top left corner or left side with extra or unnecessary portions possibly off screen to the right and bottom.

Another consideration to keep in mind is what will be over the background picture you are setting up. Obviously you are not going to want black text over a black picture. Also, you will not want to have a white box containing your text sitting over the focal point of your picture.

The last consideration that we will bring up before we get into the code is the file size and resolution of the picture. The larger the file size the longer it will take to load. Don’t ruin your great design by setting an unnecessary high resolution picture as the background to slow the page load. Screen resolution is only 72dpi so setting your picture to anything higher is a waste. File type is important as well. IF your back ground picture is a logo or drawing with few colors, then the best file type would be gif or png. For pictures with lots of color or gradients, such as photos, then stick with jpeg.

Alright, let’s get to the code! It is actually quite simple. In the opening body tag set your background image and its properties to “fixed”. It should look like this:

<body background =”yourimage.gif” bgproperties=”fixed”>

Now within our head section we need to tell the browser where the picture is located { background-image: url(yourimage.jpg) }. We also want just one picture placed, not repeated over and over { background-repeat: no-repeat }. As we discussed earlier, we also want to center the picture in the background { background-position: center }. We do all of this by placing the following code between the head tags:
<style type=”text/css” >
<! – -
body { background-image: url(yourimage.jpg) }
body { background-repeat: no-repeat }
body { background-position: center }
- ->
</style>

And that is it!

Need some help? Visit our website at www.beloudonline.com and contact us. We look forward to hearing from you.

**Please do not copy and paste code. I have tried to work around using escape characters in the writing of the post, but quotation marks often appear wrong and therefore render incorrectly.

**Please note that quotations used in this article may pose a problem when copying and pasting code. Please make sure you check all quotations before posting comments. Thanks.

The menu or “nav bar” is perhaps one of the most overlooked and misunderstood parts of the website. Designers have made it very eye catching using Flash or roll-over images and it LOOKS great to the human eye, BUT for search engine optimization purposes it is near invisible.

Now please do not start commenting on how important the design is the Website. With over a decade of Graphic Design experience I know of its value, but what is the point of a great looking website if no one can find it?

The nav bar may not be the deciding factor in the Search Page Ranking, but it definitely is a part of the on page optimization. So for those who want to maximize their on page optimization, this article is for you…

As mentioned previously, both Flash and images are not “read” by search engines. You can fill in the “alt” attributes, but these are not given the same weight as actual text. With this in mind, and a little extra effort during the wording of your nav bar selections, you can really improve your on page optimization.

So lets begin by working on a website for the Tire Shop – as an example. They sell tires and their website has four pages: Home, Products, About Us and Contact Us. First, lets optimize the selections on the nav bar to read: Home, Tires, About The Tire Shop and Contact The Tire Shop. This increases the frequency of the keyword “Tire” by three and will also increase its density.

Lets put these selections in a list.
<ul>
<li>Home</li>
<li>Tires</li>
<li>About The Tire Shop</li>
<li>Contact The Tire Shop</li>
</ul>

At this point lets name each page (except home) the same as the selection with hyphens instead of spaces between words. So home will link to index.html, About The Tire Shop to about-the-tire-shop.html, etc… Lets establish each selection as a link to these pages using <a href=”">:
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”tires.html”>Tires</a></li>
<li><a href=”about-the-tire-shop.html”>About The Tire Shop</a></li>
<li><a href=” contact-the-tire-shop.html “>Contact The Tire Shop</a></li>
</ul>

Your list is done and you now have a working nav bar. Now we just need to style it.
So lets define the “navbar” class (we will apply it to the list later). Class is designated by a period followed by the class name. So the navbar class would read as .navbar with all attributes associated with the class between two curly brackets following, like this:
.navbar {enter attributes here}

Since everything in the navbar class is an anchor <a href=”">, lets specify that these attributes apply to all anchors within the navbar class. We do this by putting an a after the class name but before the opening curly bracket like this:
.navbar a {enter attributes here}

Lets specify the font family, size and color to begin with as Arial, 10px and black (Hexidecimal color code #000). This is what people will see initially. We enter these attributes like this:
.navbar {
font-family: Arial;
font-size: 10px;
color: #000;
}

Lets also get rid of the underline beneath the link by entering the text-decoration: none attribute. This will complete the styling for the initial nav bar:
.navbar a {
font-family: Arial;
font-size: 10px;
color: #000;
text-decoration: none;
}

Now we have to cause it to change when a visitor hovers over it. We do this by simply adding the :hover after the a like this:
.navbar a:hover { }

When someone hovers over the link, we want the font family to stay the same, but we want the size and color to change. So lets take the attributes form the original class and just modify, changing the font size to 14px and the color to Red (Hexidecimal color code #ff0000).
.navbar a:hover {
font-family: Arial;
font-size: 14px;
color: #ff0000;
text-decoration: none;
}

Take both of these and place them right above the closing head tag. It should look like this:
.navbar a {
font-family: Arial;
font-size: 10px;
color: #000;
text-decoration: none;
}
.navbar a:hover {
font-family: Arial;
font-size: 14px;
color: #ff0000;
text-decoration: none;
}

Now we just need to apply the navbar class to the list by entering class=”navbar” after the opening ul. The final code in the body looks like this:

<ul class=”navbar”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”tires.html”>Tires</a></li>
<li><a href=”about-the-tire-shop.html”>About The Tire Shop</a></li>
<li><a href=”contact-the-tire-shop.html”>Contact The Tire Shop</a></li>
</ul>

And that is it. Your On Page Optimized nav bar!

If you want to get rid of the bullets before every list item, enter this code within the head tags:
ul {list-style:none}

Need some help? Visit our website at www.beloudonline.com and contact us. We look forward to hearing from you.

The iFrame app can be a little intimidating, but it really does not need to be as long as you know some basic HTML. So lets go through how YOU can create YOUR own custom iFrame app for your Facebook page. May I suggest either printing of this post or keeping it open in another window as reference as you go through it. It will make much more sense with a visual reference than on it’s own.

First thing is to create the page that you want displayed on Facebook. To display it on your page as a tab, it must be no wider than 520 pixels. Scroll bars will appear if your page is wider than 520px or taller than the screen. In this case of the height, I have found that a width of 480 pixels fit without anything being covered by the vertical scroll bar. Post this page in a directory on your server and note the URL address for the directory. For example, lets create a file called index.php and put it in a new directory we named Facebook. So the url for the directory which contains the index.php file would be http://www.yoursite.com/facebook/

If your page is an html page (index.html for instance) than you will need to save it as a PHP. Facebook will try to Post to your page and many servers will not allow anything to be Posted to an html file. Your page doesn’t need to do anything with this Post, as long as it is a file type that can accept Posts. Simply changing the .html to .php will work fine. If your file is already a PHP, it should work no problem.

Next, install the Developer app. Once it is installed, simply click the “Set up new App” button in the top right corner. You will be brought to a page with 6 options in the nav bar to the left. About, Web Site, Facebook Integration, Mobile Devices, Credits and Advanced. There are many options and customizations but we are just creating a simple app in this post and in so doing will be only working with 2 of these options, About and Facebook Integration.

In the About section, fill in the name of your app and the Description. Upload an icon or logo, or keep the defaults that are there. Now move on to the Facebook Integration.

In the Facebook Integration area you will notice mention of canvas. Think of the canvas as if you were an artist about to create a masterpiece. It is a blank slate for you to work upon.

First thing you need to do is give your canvas page a name up to 20 characters following the preset http://apps.facebook.com/ . If the name is already being used it will let you know and prompt you for a different name.

Next is the Canvas URL – this is the url for the directory that holds the page that you want displayed in your new Facebook iFrame. Referring to the example from earlier: http://www.yoursite.com/facebook/

Make sure you choose the iFrame Canvas Type, and you have the option to show scroll bars or auto-resize the page to fit the screen.

Lower on the page you will have the option to name your tab with a 16 character limit. Choose the iFrame Page Tab Type. Next is the Tab URL. This is the name of the file in the directory that you want to be your app landing page. Referring to the example from earlier, the file name would be index.php (which is the file inside the Facebook directory).

Click “Save Changes” at the bottom of the page and that is it! You now have your own iFrame app to display on your page. Now we need to add it to your page.

In roughly the middle of the page that you were brought to by clicking save changes, you will notice the options to Edit Savings, Application Profile Page, Insights, Translations, Advertise, and Reset App Secret.  If you navigated away from this page, you can get there by going back to your apps page and re-launching the Developer app. This time when it launches you will notice your app listed on the right side under My Apps. Simply click the name of your app.

Click on the Application Profile Page and on the left hand side under the app profile pic you will notice the nav bar started with Edit App. 5th option down is “Add to my page”. Click this option and a window will pop up asking which page to add it to. Choose your page and you are done.

This post will help you create a simple iFrame tab for your Facebook page. There are lots of customizations and tweaking that you can do, but this will get you started. I hope that you have found this useful as it took me many hours of research and playing to get it working for me. Hopefully I have saved you the headaches!

Need some help? Visit our website at www.beloudonline.com and contact us. We look forward to hearing from you.

Which search engine comes in second though? Many still say Yahoo followed by Bing in third place, but they would be incorrect. The second largest search engine on the internet today is YouTube and has been that way since 2008.

Think about it for a second, if you were trying to figure out how to do something – changing a flat tire for instance – would you prefer someone to show you or read it from a book? Most people would learn quicker from someone showing them.

Now think about something a little more complex, lets say installing a new DVD drive into your computer. Not only would it be easier to do if you had someone to show you, but think of how much faster it would be.

It starts to make a little more sense that YouTube is the second largest search engine.

In researching this article I came across a promising theme. It seems (according to the other articles I found) the majority of “YouTube as a Search Engine” users are younger. There were references to children and teens using YouTube to help them succeed at their video games, research homework, or for entertainment.

What is promising about this is that these younger users are becoming more comfortable with this medium and as they age they will use it more and more. The topics of the searches may switch from Video Game Cheats to Best Vacation Beaches, but their level of use and comfort will remain.

While currently the videos on YouTube may tend towards topics of entertainment, it is not to say that it is not a reference source. There may be limitations to the complexity of the subjects of the videos, but most subjects can get broken into smaller comprehensible parts.

Google and text on the internet are never going to be replaced, but YouTube as a search engine is definitely going to keep growing. The questions is, growing at who’s expense?

Another interesting tidbit is that YouTube is owned by Google. Kinda makes it seem an uneven playing field for Yahoo and Bing…

For Internet Marketing, Social Media Marketing or Graphic and Website Design, visit our website at www.beloudonline.com and contact us. We look forward to hearing from you.

The good thing about PHP is that it reads through the code. So we are going to tell it that if the submit button was pressed, then please prepare the email, let the visitor know by printing “Your Message Was Sent” to the screen, and then send the email. We tell it to print to the screen like this:
echo “Your Message Was Sent!”;

and to send the email to you like this:
mail($to, $subject, $body);

So the entire “if the submit button was pressed”, gathering info, preparing email, notifying the visitor, and mailing is written like this:
if(isset($_POST['submit'])) {
$to = “your@email.com”;
$subject = “Email from website form”;
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
$body = “From: $name_field\n E-Mail: $email_field\n Message:\n $message”;
echo “Your Message Was Sent!”;
mail($to, $subject, $body);
}

If the submit button was not pressed, or there was an error, then you will want to say something like “Error, please return and fill out the form again.” As we stated already, the way to print to the screen is with echo “” so we would say this as:
else {
echo “Error, please return and fill out the form again.”;
}

The last touch is to let the browser know that when it is encountered, that this is PHP code. We do this by surrounding all of this code with PHP tags. So at the beginning you place an opening tag <?p and at the end you place the closing tag ?>

That is all there is to it. Hopefully this is explained in a way that you understand the code and what each line achieves. Again, this is a simple code and there are alot of areas to be improved upon such as empty fields or email verification, but this code will give your visitors a means to email you directly from your website.

Here is the complete PHP code:

<?php
if(isset($_POST['submit'])) {
$to = “your@email.com”;
$subject = “Email from website form”;
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
$body = “From: $name_field\n E-Mail: $email_field\n Message:\n $message”;
echo “Your Message Was Sent!”;
mail($to, $subject, $body);
} else {
echo “Error, please return and fill out the form again”;
}
?>

Need some help? Visit our website at www.beloudonline.com and contact us. We look forward to hearing from you.