background preloader

How to Create a Contact Form using HTML5, CSS3 and PHP

How to Create a Contact Form using HTML5, CSS3 and PHP
Personally, I feel it is important to be aware of the [positive] impact HTML5 will have on forms and the way they will function in years to come. Realistically, we can’t implement all of the new features today, but you don’t want to be lagging behind the rest of the industry when these features finally become widely supported. Having said that, this tutorial will be focusing on the new HTML5 features that are already supported by all the major browsers, or that at least employ graceful degradation for the browsers that are still trying to play catch up. 1. The Design First of all, this is not a Photoshop tutorial. 2. Now we have a design to work towards, we’re going to form the structure of the contact form using HTML5. Doctype Okay, now we’ve got our blank PHP document, let’s start with the appropriate doctype, which is a lot simpler in HTML5 than previous versions to say the least! <! Yep, that’s right. Just to compare, here’s the doctype for XHTML; <! Structure <! That’s right. The Form 3. <? Related:  HTML + CSS

Building a Circular Navigation with CSS Transforms A tutorial on how to create a circular navigation using CSS transforms. View demo Download source In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique. Like I mentioned, there’s going to be some basic math involved, along with CSS transforms to create these styles. I also want to mention that credit for the original technique goes to Ana Tudor. So, without further ado, let’s get started! The Markup We’re going to be building a navigation, so we’ll start with a regular navigation structure. The icons we’re using in this demo are from Font Awesome. The Math Behind the CSS Transforms The best way to explain the math is to use a visual explanation instead of a written one. First let’s go over what a “central angle” is. 180deg / 6 = 30deg 360deg / 6 = 60deg And so on.

Email form creation - Cpanel servers | Simple method | Advanced method | Securing a form | Creating a form in RV/EZ BUILDER | Using Captcha What is a form? A form is simply a web page where a user enters information into the screen and then presses submit. Cpanel has a built in form program inside it that automatically does all the work for you. Advanced Method: (setting it up from scratch) This method is much better because it gives you more flexibility. Securing a form from spammers: Common problems: Recipient field hacking: Make sure to never let your recipient field be alterable by the user. Internal server error: Make sure to check that your permissions and paths are correct. Page won't send to an email address: The server will only send, for security reasons, to addresses that are on the server. My server can't find smartmail: Contact us. More form techniques The above example shows you how to create forms with simple text fields. Creating a form automatically with RV/EZ Builder To do this, go into your builder.

Build Internet Bolt Bolt is designed to be flexibly sized and responsive, and to progressively enhance. Base classes concentrate on layout techniques, and optional vertical rhythms and horizontal grids are included. Bolt does not give you any colour. Bolt prefers CSS over JavaScript. Bolt's classes come with behaviour attached. Events are delegated, so there are no plugins to call to make these interactive elements work. <a href="#time">Time is an illusion. Try it: Time is an illusion. Lunchtime, doubly so

Menus Menus are vertical by default. Minimal default styling and low-specificity selectors make them easy to customize. By default, menu items take up 100% of the width of their container, so you may want to limit the menu width or set the menu to display:inline-block. To create a horizontal menu, add the pure-menu-horizontal class name. <div class="pure-menu pure-menu-horizontal"><a href="#" class="pure-menu-heading pure-menu-link">BRAND</a><ul class="pure-menu-list"><li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li><li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li><li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li></ul></div> Selected and Disabled Items Mark a selected list element by adding the pure-menu-selected class to the list element. Dropdowns We recommend enabling submenus via JavaScript to enable accessibility. Even with JavaScript in place, you still might want to display submenus on hover.

Web Forms You are here: Home Dive Into HTML5 Diving In Everybody knows about web forms, right? Make a <form>, a few <input type="text"> elements, maybe an <input type="password">, finish it off with an <input type="submit"> button, and you’re done. You don’t know the half of it. HTML5 defines over a dozen new input types that you can use in your forms. Placeholder Text The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. You’ve probably seen placeholder text before. When you click on (or tab to) the location bar, the placeholder text disappears: Here’s how you can include placeholder text in your own web forms: Browsers that don’t support the placeholder attribute will simply ignore it. Ask Professor Markup Q: Can I use HTML markup in the placeholder attribute? Autofocus Fields Web sites can use JavaScript to focus the first input field of a web form automatically. Here’s how you can set a form field to autofocus: What’s that? Autofocus with fallback

One page website Once in a while, something new shows up that has the power to shake the world and stimulate all people to keep moving instead of stay still, this quote applies for practically every instance in life and business. A while ago, Nike released an astonishing website named “Nike Better World” to support all the athletes around the world; the design itself was brilliant and it generated a lot of positive reviews, but the real breakthrough came thanks to the navigation system that these guys made, a fantastic vertical Parallax system. On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS. View Demo Download Source This tutorial is a practical exercise, created with the only intention of explore the functionality behind the “Nike Better World” website, all the credits belong entirely to Nike. How does it work? Understanding the “Nike” effect Step 1: Insert the HTML Step 2: Working with jQuery

The Incredible Em & Elastic Layouts with CSS Almost a year ago, Ty Gossman over at Stylegala asked me to write an article about elastic layouts. The best I could do was a quick email between work. I always meant to come good on that. This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm. What is an Elastic Layout? An elastic layout scales with users’ text size. More accurately, an elastic interface scales with browser text size—commonly a default of 16px—which users can change if they wish. Elastic design uses em values for all elements. They are calculated based on the font size of the parent element. See the elastic layout example. For other live elastic examples, visit Dan Cederholm’s beautiful and elastic SimpleBits, or resize text on this site. Introducing Em, the Elastigirl of CSS The em is a unit of measurement in typography. Getting Started N.B.

Responsive Column Layouts Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I’m going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. View Demo Responsive Column/Grid The Inconvenience of Using The First & Last Classes Normally we would add a .first or .last class to clear the margin space and float in the grid. Using nth-of-type The :nth-of-type(An+B) expression makes it very easy to clear the float and margin without having to add .first or .last class. .grid4 .col:nth-of-type(4n+1)= target every 4th .col element, starting from the first.grid3 .col:nth-of-type(3n+1)= target every 3rd .col element, starting from the first.grid2 .col:nth-of-type(2n+1)= select every 2th .col element, starting from the first Making it Responsive With Media Queries Changing From 4-column to 3-Column Making all columns Fullwidth (see demo)

Adaptive Images in HTML

Related: