This is Gallery image

Researchers have shown that the swipe-to-unlock action can be replaced with useful data collection or micro-tasks.

Rather than swiping the screen or entering a passcode to unlock the smartphone in my hand, I have to tell it how energetic the people around me are feeling by tapping one of four icons. I’m the only one here, and the one that best fits my actual energy level, to be honest, is a figure lying down and emitting a trail of z’s.

Newest Cyber Incubator Company, IntrusionOnline, Interview on Cyber Attack

A common feature of many websites is a contact form. Standard contact forms work just fine, but you can make them nicer by using AJAX to submit the form data in the background.

In this blog post, you’re going to learn how to create a website contact form that submits the form data using AJAX. We’ll be using jQuery to help simplify the JavaScript code and a simple PHP mailer script to handle sending the form data via email.

Let’s get started.

Building the HTML Form

Your first task is to set up the HTML form that will collect data from the user. Give your <form> element the ID ajax-contact, set the method attribute to post, and the action attribute to mailer.php.

<form id="ajax-contact" method="post" action="mailer.php">
        <div class="field">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </div>
    
        <div class="field">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>
    
        <div class="field">
            <label for="message">Message:</label>
            <textarea id="message" name="message" required></textarea>
        </div>
    
        <div class="field">
            <button type="submit">Send</button>
        </div>
    </form>

Here you’ve set up a simple form that has fields to collect the user’s name, email address, and message. Notice that each of the form fields has a required attribute. In browsers that support HTML5 form validation, this will prevent the form from being submitted until all the fields have been completed.

Next you need to create a <div> element that will be used to display success and error messages to the user. Create this element above the <form> in your HTML markup and give it the ID form-messages.

<div id="form-messages"></div>

Now you need to download the code resources and copy the style.css file into your project directory. You’ll also need to add a <link> element that tells the browser to load the stylesheet.

<link rel="stylesheet" href="style.css">

Finally you need to create two <script> elements that reference the jquery-2.1.0.min.js and app.js files. Add these just before the closing </body> tag.

<script src="jquery-2.1.0.min.js"></script>
    <script src="app.js"></script>

It’s important that you load the jquery-2.1.0.min.js file first as the code within app.js requires jQuery.

That’s all the HTML you’re going to need in this post. Next up, let’s take a look at the JavaScript.

Submitting the Form Using AJAX

Create a new file in your project directory called app.js. This is going to contain all of the code responsible for submitting the form data using AJAX.

Copy the following code into the app.js file.

$(function() {
        // Get the form.
        var form = $('#ajax-contact');
    
        // Get the messages div.
        var formMessages = $('#form-messages');
    
        // TODO: The rest of the code will go here...
    });

Here you’ve created two new variables, form and formMessages, that reference the corresponding elements in your HTML markup.

Next you need to create an event listener that will intercept submit events on the form. You can do this using the jQuery submit method.

// Set up an event listener for the contact form.
    $(form).submit(function(event) {
        // Stop the browser from submitting the form.
        event.preventDefault();
    
        // TODO
    });

Here you’ve passed a function to the submit method that will be executed when the user submits the contact form. You’ve also told the browser not to submit the form as it would normally by calling the preventDefault method on the event.

Next you need to serialize the form data. This will convert the data the user has entered into the form into a key/value string that can be sent with the AJAX request. Use the jQuery serialize method to serialize the form data and then store the result in a variable called formData.

// Serialize the form data.
    var formData = $(form).serialize();

Now you’re ready to write the code that’s responsible for sending the form data to the server and processing the response. Copy the following code into your app.js file.

// Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    })

Here you’re using jQuery’s ajax method to create a new AJAX request. You’ve passed an object to the ajax method that contains a number of properties used to configure the request. The type property specifies the HTTP method that will be used for the request, in our case POST. The url property is the location of the script that the form data will be sent to. You’ve populated this property by fetching the action attribute from the form. Finally, the data property has been populated using the formData variable that you created earlier.

Next you need to handle a successful response from the server. Copy the following code directly after the closing bracket of the ajax call. Note that I’ve deliberatly left out the semi-colon.

.done(function(response) {
        // Make sure that the formMessages div has the 'success' class.
        $(formMessages).removeClass('error');
        $(formMessages).addClass('success');
    
        // Set the message text.
        $(formMessages).text(response);
    
        // Clear the form.
        $('#name').val('');
        $('#email').val('');
        $('#message').val('');
    })

This done method will be called if the request completes successfully. Here you first make sure that the formMessages element has the success class and then set the text content of this element using the data returned by the mailer script. To finish, you clear out the values from each of the form fields.

The last bit of JavaScript you need to write handles what should happen if an error occurs. Copy the following into app.js.

.fail(function(data) {
        // Make sure that the formMessages div has the 'error' class.
        $(formMessages).removeClass('success');
        $(formMessages).addClass('error');
    
        // Set the message text.
        if (data.responseText !== '') {
            $(formMessages).text(data.responseText);
        } else {
            $(formMessages).text('Oops! An error occured and your message could not be sent.');
        }
    });

This fail method is called if the mailer script returns an error. Here you first make sure that the formMessages element has the error class. You then check to see if the AJAX request returned any responseText. If it did, you use this text to set the content for the formMessages element; otherwise use a generic error message.

That completes the HTML and JavaScript code that’s needed to build an AJAX contact form. In the next section you’re going to learn about the mailer script that is responsible for processing the form data and sending out an email.

Creating the PHP Mailer Script

Now it’s time to write the PHP mailer script that will process the form data. This simple script is responsible for checking that the form data is valid and then sending out the email. If an error occurs, the mailer script will respond with an appropriate status code so that the JavaScript within the fail callback you wrote earlier will be executed.

Create a new file called mailer.php and copy into it the following code.

<?php
    
        // Only process POST reqeusts.
        if ($_SERVER["REQUEST_METHOD"] == "POST") {
            // Get the form fields and remove whitespace.
            $name = strip_tags(trim($_POST["name"]));
    				$name = str_replace(array("\r","\n"),array(" "," "),$name);
            $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
            $message = trim($_POST["message"]);
    
            // Check that data was sent to the mailer.
            if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
                // Set a 400 (bad request) response code and exit.
                http_response_code(400);
                echo "Oops! There was a problem with your submission. Please complete the form and try again.";
                exit;
            }
    
            // Set the recipient email address.
            // FIXME: Update this to your desired email address.
            $recipient = "hello@example.com";
    
            // Set the email subject.
            $subject = "New contact from $name";
    
            // Build the email content.
            $email_content = "Name: $name\n";
            $email_content .= "Email: $email\n\n";
            $email_content .= "Message:\n$message\n";
    
            // Build the email headers.
            $email_headers = "From: $name <$email>";
    
            // Send the email.
            if (mail($recipient, $subject, $email_content, $email_headers)) {
                // Set a 200 (okay) response code.
                http_response_code(200);
                echo "Thank You! Your message has been sent.";
            } else {
                // Set a 500 (internal server error) response code.
                http_response_code(500);
                echo "Oops! Something went wrong and we couldn't send your message.";
            }
    
        } else {
            // Not a POST request, set a 403 (forbidden) response code.
            http_response_code(403);
            echo "There was a problem with your submission, please try again.";
        }
    
    ?>

Update: Thanks to Aaron Traas for his modifications that make this mailer script more secure.

This script starts by checking that the request was sent using the POST method. If it wasn’t, the script will return a 403 (forbidden) HTTP status code and an error message.

Once you’ve established that the correct HTTP method has been used you then extract the form data into three variables $name, $email, and $message. You also use the PHP trim method here to cut out any unwanted whitespace.

Next you will check to make sure that none of these variables is blank. If one or more is blank, set the response code to 400 (bad request) and return an error message to the browser.

Now that you’ve determined the data is clean, you prepare the email, first by creating a variable with the email recipient. You then create variables for the subject, email content, and finally the email headers.

Note: Setting the email headers is optional. Doing so will make the email appear as though it was sent by the person that filled out the form. However, it’s important to note that manipulating the headers like this can also cause the email to be marked as spam by some email clients.

Next you will attempt to send the email using the PHP mail function. If this is successful, you will return a success message. If it’s not, you need to set the response code to 500 (internal server error) and return an error message.

Note: The standard PHP mail function will do just fine for the purposes of this blog post, but there are more robust ways of sending email using PHP. If you’re interested in learning more, I recommend that you check out the Build a Simple PHP Application project on Treehouse.

That’s it! You’re all done.

Load up your HTML file in a web browser and try out the form. You’ll need to be using a web server with support for PHP and the mail function for everything to work correctly.

Final Thoughts

In this blog post, you’ve learned how to create a contact form that uses AJAX to communicate with a mailer script on the server. You’ve used jQuery to help simplify the JavaScript code, but you could have achieved the same result with standard JavaScript.

Using AJAX within your websites allows you to improve the user experience in a number of different areas, not just contact forms. Next time you’re building a website, ask yourself how AJAX could help to create a smoother experience for your users.

Useful Links

• Build a Simple PHP Application Treehouse Project
• jQuery AJAX Documentation

The post How to Create an AJAX Contact Form appeared first on Treehouse Blog.

The Maryland Department of Business and Economic Development this week is sponsoring Dancing with Startups, a partnering event series that pairs multinational corporations with innovative start-up companies in the areas of technology, media services, big data, and cybersecurity, among other industries.

The event is being hosted by Exelon Corp. and The Economic Alliance of Greater Baltimore and will take place in the CyberHive at bwtech@UMBC Research and Technology Park on March 11^th. Invited companies will make their pitches, then discuss with Exelon’s management team.

For more information, please contact Allie Gold, bwtech@UMBC Cyber Incubator Manager at golda@umbc.edu.

Light Point Security's Gonzalez takes on CEO role

Cyber startup Light Point Security has a new CEO, someone who has already been the face of the company without the formal title.

Zuly Gonzalez, chief operating officer at Light Point, will take on the title as CEO in a move she says has been discussed between her and her business partner Beau Adkins for the past five months but just became official.

Adkins had been CEO and will now just hold the role as chief technology officer of the firm.

“We had discussed it, but we kind of just dropped it because we weren’t really pushing it,” Gonzalez said of the CEO shift. “After I got back from RSA (a cyber conference in San Francisco) we had another conversation and we figured let’s just do it.”

Light Point, which launched in 2010, is based at bwtech@UMBC Research and Development Park.

Gonzalez was already performing the roles of a top executive, Adkins said.

“She has been doing a lot of public speaking for our company, she talks to customers, she coordinates sales, pilots, and partnerships, and she keeps us in the news,” he said.

Light Point now has four employees.

Once thought of as amateurish by professional designers, free and open-source fonts have gone through something of a renaissance in just the last few years. The quality of available free fonts has increased dramatically. To be frank, free fonts don’t have a good reputation, and often they are knock-offs of thoroughly crafted, already established typefaces. So is it time for professional designers to take a second look?

First, A Story

Early in my design career, around 2003, I wanted to purchase the font DIN for a project at work. My manager promptly dismissed the idea of paying for a font and instead handed me a CD that had “5,000 free fonts” on it, saying “This CD has every font a designer could possibly need. No need to waste money buying fonts!”

I popped the CD in my computer and found a collection of the most horrendous fonts you could imagine. Novelty and “retro” fonts. Spooky Halloween fonts. “Techno” fonts. Fonts with letterforms made up of cats posing in crazy positions. Fonts with terrible kerning, missing glyphs and wonky rendering. Fonts available only in single weights with no italics.

Nowhere to be found was DIN or, for that matter, any font that a professional designer would actually use. Feeling dejected, I ended up just using Helvetica because we actually owned that one.

Fast-forward to 2014. When I hear the words “free fonts,” I still can’t help but picture that horrible CD. But things have completely changed since then, and I find myself actually using free fonts quite often in my projects.

Where Do Free Fonts Come From?

In the past, free fonts typically came from one of two places: amateur designers who created fonts for fun or as a learning experience, and professional type designers who released a single variant of a font family for free as a form of marketing, the idea being that people would come back to purchase the full family once they realized the limited usefulness of a font without multiple weights and italics.

Why Is Having Multiple Weights With Italics So Important?

To set body copy properly, a font family requires four variants: normal, italic, bold and bold italic. A font used on the Web that doesn’t include these four basic variants will inevitably get the dreaded faux bold and faux italic treatment generated by the browser, which should be avoided at all costs — in fact, there are ways to avoid them for good. Other weights, such as light and extra bold, are helpful for creating typographic contrast between elements.

Free Fonts Are Not What They Used To Be

Recently, large companies such as Adobe and Google have been commissioning fonts for open-source projects and releasing them for free on the Web. Professional typeface designers have been getting involved in open source as well, sharing complete font families on Google Fonts.

Thanks to the open-source community, there are now free fonts available that even typography snobs would be happy to use. The following fonts all have multiple weights with matching italics. They are suitable for headlines as well as body copy, and they render well on screen and at small sizes.

Alegreya

Alegreya is an award-winning serif typeface, chosen by ATypI as one of 53 “Fonts of the Decade” in its Letter.2 competition. It is available for free on Google Fonts, but, sadly, most designers don’t seem to know about it. I hardly see Alegreya used anywhere online, which is a shame because this is a truly great font. Alegreya was designed with printed text in mind, but it is excellent to read on screen as well.

The designer, Juan Pablo del Peral, claims that just as much care and attention to detail was spent on designing the italic as the roman and it definitely shows — the italic style is especially beautiful. I hope more designers become aware of this excellent typeface and that we’ll see it used more widely on the Web in 2014.

Beef uses Alegreya for the body copy on their website, giving it a stately appearance, which contrasts nicely with the use of Avenir for headings.

The beautiful bold italic style of Alegreya is used for a heading on Beef’s job section.

• Websites using Alegreya

Source Sans Pro

Released by Adobe in August 2012, Source Sans Pro is Adobe’s first open-source font. Its designer, Paul D. Hunt, was inspired by early-20th-century gothics such as Franklin Gothic and News Gothic. To my eyes, Source Sans Pro feels much more modern, a little reminiscent of FF Meta. Its intended use is for user interfaces so it renders very well at small sizes. The font is available in an impressive 6 weights, making it extremely versatile.

CAST83 uses Source Sans Pro throughout its website, showing off the diversity of the family; large headlines are set in the lighter weights, while the heavier weights are used at smaller sizes and set in uppercase, creating excellent typographic contrast.

Plentific uses the extra-light and normal weights of Source Sans Pro to create contrast between different levels of headings.

• Websites using Source Sans Pro

Open Sans

Designed by well-known type designer Steve Matteson and commissioned by Google, Open Sans is one of the most widely used open-source fonts on the Web. It is the default font for Zurb’s new Foundation 5 framework and is used on many of Google’s redesigned pages. I’ve even heard Open Sans described as the “flat design” font. The five weights with matching italics make this humanist sans-serif useful for a wide variety of situations

Vitor Andrade’s website uses Open Sans in a very understated way; the minimal, type-driven design doesn’t draw attention to itself, appearing very neutral and lending focus to the excellent work being featured on the website.

The light weight of Open Sans is used for the article titles on The Industry’s website.

• Websites using Open Sans

Anonymous Pro

Anonymous Pro is a monospaced font that I’m surprised so few designers know about, considering it was designed by Mark Simonson, the type designer behind Proxima Nova. Monospaced fonts seem to be popular with designers at the moment, and Anonymous Pro is an excellent option.

Inconsolata is a much more widely used monospaced font, also available on Google Fonts, but doesn’t include italics, as Anonymous Pro does. Setting body copy in a monospaced font isn’t always a good idea, but in the right context it can give a design a very clean and refreshingly sparse feel.

Per Sandström uses Anonymous Pro at a large size for the body copy on his website, where it works surprisingly well paired with Futura for headings.

The bold weight of Anonymous Pro is used for the buttons on Per’s website.

• Websites using Anonymous Pro

Playfair Display

Playfair Display is a high-contrast serif designed by Claus Eggers Sørensen. Reminiscent of Baskerville, it takes its cues from the typeface designs of the late-18th century. Although designed primarily for titles and headings, the three weights with matching italics make it suitable for short stretches of body copy as well. For longer stretches of body copy, Playfair Display pairs very well with Georgia.

Playfair Display features a beautiful italic variant, seen in the headings on Boompa Records’ website.

The bold weight of Playfair Display is used on the headings of Digital Abstracts’ website.

• Websites using Playfair Display

Roboto

Roboto has been accused of being a “Frankenfont” — a mashup of Helvetica, DIN and Myriad. I understand where the criticisms come from, but I quite like Roboto. Updates and improvements have been made to Roboto since that “Frankenfont” article, and I think the font works great on screen at different sizes and device resolutions, which is its purpose.

The font feels familiar, yet still possesses unique character the more you look at it. The Roboto family also includes a very nice slab version as well as a condensed version.

I use Roboto on my Type & Grids side project, and the font renders beautifully on high-density displays at small sizes.

Paone Creative uses the light weight of Roboto on their blog section.

• Websites using Roboto

Lato

Lato is Polish for “summer,” and the name perfectly fits this warm-feeling sans-serif. The designer, Łukasz Dziedzic, originally designed Lato as a corporate font for a large client. After the client decided to go in a different design direction, Łukasz released the font for public use. Lato feels very modest and unassuming when set at small sizes in body copy, but the italic variant is distinctive and easily recognizable. Lato is used in WordPress’ latest default theme, Twenty Fourteen, so its popularity on the Web is sure to increase.

Frank Chimero makes elegant use of the hairline weight in his article “What Screens Want,” setting it in uppercase at a large size, which is needed for such a thin, delicate weight.

On AIGA’s “100 Years of Design” website, a customized “dotless i” version of Lato is used.

• Websites using Lato

Merriweather

Designed by Eben Sorkin, Merriweather is a serif font created for on-screen reading. Its tall x-height and hefty serifs give it excellent legibility. Merriweather is under active development, and improvements are constantly being made. There is also a sans-serif version of Merriweather available that makes an excellent companion.

Dickson Fong uses the light weight of Merriweather, which gives his design an elegant look.

Vtcreative show off the light italic style of Merriweather in their footer.

• Websites using Merriweather

Karla

Karla is a grotesque sans-serif designed by Jonathan Pinhorn that is full of character and quirks. Something about it reminds me of the trendy Apercu font. The tracking might be set a little wide for body copy, and some of the kerning can be a little wonky, but something about this font makes me overlook those downsides. This is a perfect font to add a touch of personality to your design.

Borsch, Vodka & Tears use Karla for the short bursts of body copy on its website, and it works really well.

Kalyn Nakano shows off the normal and bold weights of Karla on her portfolio site.

• Websites using Karla

Clear Sans

Clear Sans is Intel’s recent contribution to the open-source font community. Designed with on-screen legibility in mind, Clear Sans prides itself on its unambiguous character design. For example, the uppercase “I” has serifs added to distinguish itself from the lowercase “l”. This makes it an excellent choice for UI design work where clarity is key. Clear Sans is currently not available through Google Fonts, so designers looking to use this font will need to host it themselves.

The delicate, light weight of Clear Sans is used for the body copy on the Clear Sans website.

Fira Sans

Designed for the Firefox Operating System, Fira Sans was recently released as a free font available for public use. The font shares many similarities to FF Meta, which makes sense as Erik Spiekermann is the designer of both. It’s rare to find a free font created by such a renowned typeface designer. Fira Sans also includes a monospaced version called Fira Mono. Interestingly, the web font used on the official Fira Sans page is Open Sans, not Fira Sans. You’d think Mozilla would want to show off their new font on their site.

Other Free Fonts Worth Checking Out

• Exo
• Signika
• Arimo
• Raleway
• Montserrat
• Muli
• Domine
• Lora

Don’t Rely On Free Fonts For Every Project

As nice as the fonts above are, designers shouldn’t rely entirely on free fonts. Free fonts will never match the quality of the fonts offered by top type design foundries. Budget for professional fonts in every project when possible. Type foundries need the support of the design community to continue innovating and producing excellent fonts.

That being said, if a project requires free fonts, whether due to budget constraints or other reasons, then rest easy knowing that an ever-growing selection of professional-quality fonts are available at your disposal. I continually update a curated list of open-source Web fonts in my side project, Typewolf. You can also follow me @typewolf and check out my other side project, Type & Grids, which uses many of the fonts featured in this article.

Designing a typeface requires a lot of time, patience and very hard work, and type designers should be rewarded for their work. So if you decide to use a free font, please always make sure to support type designers by purchasing the other fonts that they created or donating to support their efforts.

(al, vf, il)

Front page image credits: Vitor Andrade.

© Jeremiah Shoaf for Smashing Magazine, 2014.