FWPolice V 3.1

Today we have begun work on a series of updates to our website. This set of updates will take place for the next few weeks to help improve the user interface and experience of our visitors. Unlike our previous updates, we chose to go with a progressive update method to allow our visitors feedback as we go ahead and consistently improve FWPolice.com. Read below for notes on our updates.

Version 3.1.1

  • Improvement to the header
    • New header framework
    • New background style
    • Logo has been updated
    • Navigation has been updated (fixed the hover bug)
  • Improvement to footer
    • New background style
    • Switched to 3 column system
    • Switched to ThemeBeans Twitter feed plugin

Please share your feedbacks on portions of our site we can improve on.

Basic Contact Form

For any website having a decent contact form is very important. With hundreds of structured contact forms out there, we barely get a chance to really make the form the way we want. As a designer or a developer, having that freedom is very important because we want to make masterpieces that define who we are and leave traces of ourselves. To help you with that, here is an idiots guide (I’m not calling you an idiot, just describing how simple this tutorial is) to creating a simple php contact form.

Getting Started

Before we even begin, we need to first decide what we want in the contact form. A general contact form has an input field for the senders name, e-mail, website, subject and a text area. Some even have drop-down options for subject field or even to select the priority level of the message you are sending. Once you decide what you want, we can get started.

The PHP processing file

This is a very important file. This php file will be the mastermind in sending/submitting the forms. Let’s call this file process.php. Many would call this the mail.php but why really? The main purpose of this file is to process the submitted information right? So why not name it properly. But if you really like, you can call it whatever you wish.

Now let’s start with the must have for any php file <?php and ?>. In this we will enter the information for all form fields we will have

<?php
//Collecting Basic Information
$name = $_POST['name'];
$email = $_POST['email'];
$website= $_POST['website'];
$subject= $_POST['subject'];
$message= $_POST['message'];

//The Form Content
$formcontent = "From: $name n E-Mail: $email n Web-Site: $website n Subject: $subject n Message: $message";

//Who is this going to
$recipient = "you@domain.com";

//Mail Subject
$mailheader = "A Message From $name rn";
mail($recipient,$subject,$formcontent,$mailheader) or die ("Error Processing Mail!");

//Message Sent Notice
echo "Thank you for contacting me. Your Message has been submitted successfully";
?>

The content is quite self explanatory but for those that do not understand here’s a brief explanation. At first what we did was get the data from the input field (in this case the posted data). Like I mentioned before, you can always have dropdown options. Dropdowns, luckily, are processed the same way as any input field:

$dropdown = $_POST['dropdown'];

You can also have radio buttons and check buttons for “I agree to the terms and conditions” fields. Next we took that data and compiled it in a format that we would like to see when we receive the email. Next we decided who the recipient is. So please do replace you@domain.com with your correct email. Next we went ahead and assigned a custom message header respectively named $mailheader. We always want a message header that is friendly, so why not make it our self right? For those who have more than website in which they have a contact form, I would recommend you put the web-site’s name at the beginning instead of “A Message From.” It makes it a lot easier to keep track of where the message is coming from. The $mailis the main process that handles sending the information. Now for the grand finale, the thank you message. When a guest doesn’t know that their message has been submitted, they will 87% of the time re-submit the form (87 is a number from the top of my head that I think more than likely fits this case). You can always use javascirpt re-direct or place a small link to take the visitor back to the previous page.

The Form

Here is the part where you have actual freedom to customize. Thanks to the invention of CSS and (I hate to admit it) Tables, we have been able to customize the look and feel of forms for years. Now primarily using CSS, forms come in many styles, colors and even shapes. Yes I said it shapes. You can check out the styles by simply searching our best friend: Google. I’m not going to waste your time explaining how you can customize your fields, so instead I’ll link you to HTMLForums. Here is a basic look at non-styled form for our simple contact form.

<form action="process.php" method="POST">
<label for="name">Your Name:</label>

<input id="name" title="Type you name" type="text" name="name" />

<label for="email">Your E-Mail:</label>

<input id="email" title="Type in you website" type="text" name="email" />

<label for="website">Your Website:</label>

<input id="website" title="Type in you website" type="text" name="website" />

<label for="subject">Your Website:</label>

<input id="subject" title="Type in you website" type="text" name="subject" />

<label for="dropdown">DropDown</label>
<select name="dropdown"> <option value="Support">Support Department</option></select>
<select name="dropdown"><option value="HTML">HTML Help</option></select>
<select name="dropdown"><option value="Beer">Buy Me Beer</option></select>

<label for="message">Your Message</label>

<textarea name="message" rows="6" cols="25"></textarea>

<input type="submit" value="Send" /><input type="reset" value="Clear" />

</form>

Template Contact Form

There are a number of you that requested a php processor file for the contact form. Here is a simple contact form that you can easily integrate to with the Catharsis theme.

<?php

//Retrieve form data. 
//GET - user submitted data using AJAX
//POST - in case user does not support javascript, we'll use POST instead
$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
$message= ($_GET['message']) ?$_GET['message'] : $_POST['message'];

//flag to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;

//Simple server side validation for POST data, of course, you should validate the email
if (!$name) $errors[count($errors)] = 'Please enter your name.';
if (!$email) $errors[count($errors)] = 'Please enter your email.'; 
if (!$message) $errors[count($errors)] = 'Please enter your comment.'; 

//if the errors array is empty, send the mail
if (!$errors) {

	//recipient
	$to = 'sampleperson@gmail.com';	 // <--------- change your email here
	//sender
	$from = $name . ' <' . $email . '>';

	//subject and the html message
	$subject = 'Message from ' . $name;	
	$message = '
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head></head>
	<body>
	<table>
		<tr><td>Name</td><td>' . $name . '</td></tr>
		<tr><td>Email</td><td>' . $email . '</td></tr>
		<tr><td>Message</td><td>' . nl2br($comment) . '</td></tr>
	</table>
	</body>
	</html>';

	//send the mail
	$result = sendmail($to, $subject, $message, $from);

	//if POST was used, display the message straight away
	if ($_POST) {
		if ($result) echo 'Thank you! I have received your message.';
		else echo 'Sorry, unexpected error. Please try again later';

	//else if GET was used, return the boolean value so that 
	//ajax script can react accordingly
	//1 means success, 0 means failed
	} else {
		echo $result;	
	}

//if the errors array has values
} else {
	//display the errors message
	for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
	echo '<a href="contact.html">Back</a>';
	exit;
}

//Simple mail function with HTML header
function sendmail($to, $subject, $message, $from) {
	$headers = "MIME-Version: 1.0" . "\r\n";
	$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
	$headers .= 'From: ' . $from . "\r\n";

	$result = mail($to,$subject,$message,$headers);

	if ($result) return 1;
	else return 0;
}

?>

Call this template comment.php or processor.php

Next open up the contact page. Find

<form action="#" method="post" name="contact_form">

Change this to:

<form action="#"  method="post" action="contact.php" name="contact_form">

Note that the contact.php must match the name and path of the php processor file. Also make sure that all fields are properly named as in the processor file.

Sticker Icons

A great feature of Adobe Fireworks is the ability of being able to create complex shapes with ease. With most graphics software, you can either do basic shapes, and need to open a separate program to do high quality complex shapes. But Fireworks eased that burden by bringing such feature to a all-in-one web mockup tool. Here is a set of three icons created using Fireworks path tool. Using shadows and additional layer, we are able to convert a standard icon to have a hovering sticker/coaster effect.

Farewell Fireworks

It’s a very sad day for the Adobe Fireworks community. As today Adobe has announced that it will no longer be creating a new version of the software. Here is a copy of the announcement in case any of you missed it:

Today at the MAX conference we announced the latest generation of our creative tools now known as CC including Photoshop CC, Dreamweaver CC, Flash Professional CC, Edge Animate CC, and many others. As you may have noticed this announcement did not include updates to Fireworks CS6.

Over the last couple of years, there has been an increasing amount of overlap in the functionality between Fireworks and both existing and new programs like Photoshop, Illustrator, and Edge Reflow. At the same time we have shifted to focus our engineering teams on building smaller, more modular, tools and services for specific tasks in web design. Due to this overlap and as well as our change in our product development focus, we have decided not to update Fireworks to CC and instead will focus on developing new tools to meet our customers needs.

While we are not planning further feature development for Fireworks, we will continue to sell Fireworks CS6 as well as make it available as part of the Creative Cloud. We will provide security updates as necessary and may provide bug fixes. We plan to update Fireworks to support the next major releases of both Mac OS X and Windows. As more specific details on the next version of Windows and Mac OS X are made available, we may adjust these plans.

We understand that Fireworks has one of the most passionate communities on the web, and that this change will be difficult to accept. Our goal in refocusing our development efforts is to build a new-generation of task focused tools that enable our customers to create great web content.

My major question to Adobe is, will you make this an Open Source software, so that we the community can continue to create updates?

Just because Adobe quit, doesn’t mean we wont be around.

We will continue to provide tutorials and tweeting about cool things you can do with Fireworks. In fact, we might even expand our horizons with more Codes and teach you how to go beyond the mock-up.

 

Are you willing to call quits on Fireworks just because Adobe has? Share your feedback below.

 

Update May 6, 2013

There is a petition to make Adobe Fireworks open source. You can sign the petition by clicking the button below.

[button color="white" url="http://www.change.org/en-GB/petitions/adobe-com-release-adobe-fireworks-to-open-source"]Sign the Petition[/button]

 

Simply.Me Personal Portfolio

Introduction

Simply.Me is a single-page style personal template designed to provide the user with a simple, elegant and up-to modern standard personal website. Built on Twitter Bootstrap, Simply.Me comes with all the framework’s features customized for this specific template.

Key Features

Simply.Me is designed to provide you with a personal porfolio website. Here is a list of all the key features:

• Bootstrap
• Responsive layout
• Resume Template (http://demo.fwpolice.com/simplyme/resume.html)
• Easy to customize
• WordPress Ready
• Large collection of background patterns
• Flex Slider
• Customized Bootstrap Carousel slider
• Adaptive Thumbnail portfolio
• Font-Awesome Icons Collection
• Animate.css Animations
• Social Sprites Icons

File Support

If you require any support, please post in the comment section or look in the “Thank You.pdf” file included in the archive.

Demo Images

This template uses the beautiful FontAwesome font and Animate.CSS. The font comes with its own terms that states:

“The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0. A mention of Font Awesome – http://fortawesome.github.com/Font-Awesome in human-readable source code is considered acceptable attribution (most common on the web). If human readable source code is not available to the end user, a mention in an ‘About’ or ‘Credits’ screen is considered acceptable (most common in desktop or mobile software).”

File Update

Version 1.0 – 04/13/2013
• Initial release