One of the most hardest jobs in web development processes definitely is form creation. Coding behind these forms are painless enough, but then you need to think also about Spam filters, usability, interface and functions should work in all cases.

Keeping this in mind, I gathered here 21 various premium Php forms created for all the cases you should ever need – sign-up forms, advanced contact forms powered with Ajax, jQuery, e-mail signup forms, file uploads and much more. All of these forms also come with good user interface and design, so you don't have to worry about those little things, but just focus on big tasks! How cool is that?

These forms also are pretty cheap – 5–12$, which is just a small reward to original authors I think! Before we get started I also gathered few great sources to get inspiration from and educate you how to create user-friendly and unique contact forms.

Patterntap

Here you will find various small sections in web-design – forms, buttons, headers, footers, tabs, typography and much, much more. There you will find also big collection of quality forms – now there are 351 forms available for inspiration!

Here are some more sources:

• 91 Trendy Contact And Web Forms For Creative Inspiration – I wrote myself very comprehensive article about contact and web forms some time ago! If this will not get you inspired – nothing else will!
• Beautiful Forms – Design, Style, & make it work with PHP & Ajax – excellent article from Noupe featuring a lot of unique tutorials and tips there!
• 10 Useful Tips for a Captivating Contact Form – self explaining article title, learn how to create contact form in good way!
• Web Form Design: Modern Solutions and Creative Ideas – huge inspirational article from SmashingMag – quality never disappoint only maybe examples could be a little bit outdated since article has been created in year 2008.

1. AJAX Contact Form ($6)

This AJAX jQuery website component allows you to easily place a self-contained Contact Form on any HTML or PHP page of your existing website.
It uses just 1 file to Validate, Process and Send the completed contact form to your e-mail address and best of all, does not reload the page to validate or send the form!

Features include:

• AJAX backend (no page reloads!) Save your bandwidth!
• Uses Javascript jQuery Slide for an amazing UI, Try the Demo!
• Very easy to integrate into any existing HTML or PHP page on your website.
• The form style can be integrated into your existing website Stylesheet or you can use the Default Style.
• All fields have a validation script so you get the * required info you need.
• and much more (read full description).

View Live Demo

2. Simple PHP Contact Form ($5)

This website component allows you to easily place a self-contained Contact Page on any PHP page of your website.

Features include:

• Very easy to integrate into any existing PHP page on your website.
• The form style can be integrated into your existing website Stylesheet.
• All fields have a validation script so you get the *required info you need.
• Anti spam, are you human? filter.
• Only 1 option to configure (your email address) to make the script function.
• and more features.

View Live Demo

3. Beta Splash Page Email Signup Form ($5)

This is a very simple, yet stylish, form for your website where visitors can enter their email address (and name if desired) to be added to a contact list. It uses AJAX to submit and validate email and will also function if the user has JavaScript disabled.

Installation is quick and painless. This form does not require a database to function as it will create and store input into a CSV file.

View Live Demo

4. Contact Form With Custom Auto Responder ($5)

Main Features:

• Simple form easy to edit and add to your PHP or HTML pages.
• Phone field added
• Dropdown Subject Selection with different emails.
• Auto Responder Enable / Disable
• Dropdown Subject Selection with additional emails.
• Custom Auto Responder Message
• Custom Auto Responder Message with Attachment of any file type
• Custom Catpcha Filter (you can create your own filter question and set the answer in contact.php file)
• No separate page needed for thank you message.
• Message will be displayed on the same block.

View Live Demo

5. Simple Website Comments ($7)

This website component allows you to easily place a "comment block" on any page of your website.

Features:

• Allow users to post comments on any page of your website
• Really handy for PHP websites that don't support comments
• Easy to setup and customise
• Works out of the box, comes with copy/paste examples
• Sends admin an email with a summary of the comment when a new comment is posted, links to approve / deny.
• SPAM prevention
• Can be styled using your own CSS
• and much more.

View Live Demo

6. Easy Forms ($10)

EasyForms is a PHP library that helps you create forms on a fast and easy way including input validation.

Together with the EasyForm library, you get 4 examples forms that are created using this library:

• Contact form
• Image upload with extension and image size validation
• Quote request form
• Subscribe form that adds the email address and name to a CSV file

View Live Demo

7. Super AJAX Contact Form ($6)

This is a ajax contact form made with PHP and jQuery. The script already include rules of validations fields and with errors messages. This script allows you to perform SMTP authentications, so do not need a personal SMTP server, you can, for example, use Live or Google (Gmail). This way you can send mail locally too!

Features:

• Cross-browser compatible
• Load with ajax
• Security captcha
• Allow send for multiple adresses according to the subject chosen by the user
• and much more.

View Live Demo

8. Simple Multiple File Upload ($7)

This component allows users to upload multiple files from a single form. Uses the jQuery Javascript library to add more file input fields so that the page doesn't need to be refreshed.

Features:

• Simple to include
• Allows multiple files to be uploaded at once
• Highly configurable
• Only allow certain file types
• Attaches uploaded files to an email

View Live Demo

9. Contact Form Generator ($8)

Contact Form Generator is a easy way to make your own custom form! You can control the validation rules, input types, icones and errors messages of a easy way.

This script allows you to perform SMTP authentications, so do not need a personal SMTP server, you can, for example, use Live or Google (Gmail). This way you can send mail locally too, this and much more without touch in a line of code!

View Live Demo

10. Awesome Contact Form ($8)

Now supports PHP 4 , full support for dropdown menus, radio buttons and checkboxes, and multiple forms from one installation. Upgrade instructions can be found in the user guide.

This script is a class-based, fully-featured PHP Contact Form with a focus on ease-of-use and extensibility. Includes an autoresponder and custom fields.

It is simple to install and comes packaged with many optional features which can be turned on simply by editing the config file – so no editing of the main source code is needed.

View Live Demo

11. Ajax Contact Form with Google Map Pointer ($4)

This script could be a fundamental part of almost any website. It consists of three parts: the map component (javascript), the form component (javascript) and the back-end php script that sends the actual email. Any of these three components could be used separately.

View Live Demo

12. Send to Friend Form ($7)

Features:

• Add a link to any website and allow visitors to easily "share" the page with their friends via email.
• User can customise the page title and description.
• Optional comment that is emailed along with page.
• You have control over the format of the email that gets sent, style it with your website branding!
• Normal javascript popup mode, or a nice lightbox popover mode so the user doesn't leave your website.

View Live Demo

13. Drag & Drop Form Manager with E-mail Attachments ($7)

Features:

• Embed forms to your php or html files,
• Admin Login
• Determine your form and field details easily
• Add, edit or delete forms and fields to the forms easily
• Drag and drop to change the order of fields, forms or options of dropdown, multiselect, checkbox lists and radio groups.
• Edit form name and description easily
• Determine the e-mail address that you want the form to be sent.
• The form automatically creates attachments to e-mails when file fields are added.

View Live Demo

14. FeedBack ($9)

Feedback provides easy to use, customisable feedback forms for your website visitors to provide you with their comments, suggestions and bug reports. Feedback comes with a special widget which can easily be inserted on every page of your website to allow your website visitors easy access to your feedback forms.

The widget is written in Javascript, but works without Javascript too. The feedback forms are written in PHP and send you an email upon form completion.

View Live Demo

15. Beta Invitation Helper ($7)

A simple app that will store and output email address for your site. It can be used for beta invitations or notifying users when your site is ready. A mysql database is required to store emails addresses.

Features:

• You can customize the success message.
• Email validation is included.
• Duplicate emails won't be recorded.
• A custom page is used to view all emails, separated by commas or semi-colon.

View Live Demo

16. Simple PHP RSVP ($12)

Simple RSVP is a simple, robust and powerful guest invitation and event management platform. Powered by PHP and backed by mySQL, this all-in-one package allows you complete control and expandability of your events and guests. The reserve form contains a web 2.0, user-friendly interface for your guests to sign up and reserve their place at your event.

The admin panel provides a back end to control and monitor all the activity taking place. Also, various forms of validation have been included. The interface is packed with features that make it easy for anyone to run. Whether you have one event or 2,000, Easy RSVP script is the only script you will ever need.

View Live Demo

17. Twitter Contact Page ($7)

Do you have a Contact Us page? Would you like to turn that snail mail into a Twitter messaging app? Well then this is the app you are looking for!

Your end users won't need a twitter account. This app will send you a @mention tweet through your account or send a self-DM.

Features:

• Configurable to send DMs or public tweets.
• Form validation.
• Spam bot counter with "Math" feature.
• 140 character countdown using jquery.

View Live Demo

18. Ajax Contact form – 3 in 1 Autoresponder reCaptcha ($7)

The jQuery powered ajax contact form is the Cadillac of contact forms. It has tons of useful features and is very easy customizable via a single configuration file.

• 3 Stylish Themes
• It gracefully degrades. Try it, turn off your JavaScript.
• Customizable Auto Responder
• reCaptcha Support. It's super easy to turn it on.
• SMTP support
• jQuery Powered AJAX + Animations

View Live Demo

19. Contact Me – Contact Form + Admin Panel ($9)

A contact form for your website which links in with a simple but powerful admin panel.

Features:

• An easy automated setup of databases
• Simple and friendly user interface
• Secure admin panel for viewing messages
• Reply to message from the admin panel without opening up a separate email client

View Live Demo

20. PalmsForm – Form API for PHP ($7)

PalmsForm takes all the hard work out of form building. You can get a form up and running within minutes. Form configuration and validation was never so easy. The best part about this library is that it is so flexible and convenient for you to customize your form, add / remove form fields, modify error messages, and extend core functionality of the library with minimal effort. As a result, you can use PalmsForm for all kinds of form, in all kinds of web sites and applications. It just works.

View Live Demo

21. Flux Contact Form ($8)

So what is flux? Flux is a Remarkably simple PHP contact form with admin panel. Dynamically select fields or remove fields on the fly. Would you like a add-on? Flux comes equip with google maps. Other add-ons may be implemented too!

Backed by PHP , this contact form script is in a league of it's own. Fully extend able, and completely brand able. With just a few files uploaded to your server and few snippets of code, you will have a fully running contact form with customized auto responder. No need for PHP script knowledge or a database, Flux's simple GUI has you covered.

View Live Demo

For a long time we have been able to specify styles for different media types using CSS, print and screen being the most recognizable. With CSS3 these media types have been extended to allow additional expressions, aka media queries, which gives us greater control on when specific styles should be applied. In this article I will focus on the orientation media query and have a fun demonstration showing how to use it.

Orientation

The orientation media query allows us to target specific styles based on the current screen or device orientation. We have 2 properties; landscape and portrait which allow us to change a pages layout based on the browsers current orientation.

A browser or device determines the orientation by listening to the width and height of the window. If the height is larger than the width the window is in portrait mode. If the width is larger than the height it’s in landscape mode.

 /* Portrait */ @media screen and (orientation:portrait) {     /* Portrait styles */ } /* Landscape */ @media screen and (orientation:landscape) {     /* Landscape styles */ } 

Within our style sheet we can specify our media query which will target a media type of screen and an orientation of portrait or landscape.

Karma karma karma karma karma chameleon

To show off a quirky use for orientation media queries I have put together an example that upon orientation change will adjust the colour of the chameleon image, and as a bonus for the nicer browsers that support CSS3 transitions it will fade between the colours when the orientation changes.

Take a look at the CSS3 Chameleon demo and make sure to re-size your browser to see the chameleon change colour. To see the best results view in a WebKit browser such as Safari or Chrome. You can also download the demo files here.

Deconstructing the demo

Let’s go through how the above demo was put together in a little detail.

 html { background: #000 url(chameleon2.jpg) 50% 100% no-repeat; } body { background: url(chameleon.jpg) 50% 100% no-repeat; } 

Basically it consists of 2 images of the chameleon. One for landscape and one for portrait, with 1 image being applied as a background to the html tag and the other on the body.

 /* Portrait */ @media screen and (orientation:portrait) {     body { opacity: 1; } } /* Landscape */ @media screen and (orientation:landscape) {     body { opacity: 0; } } 

To switch between the images the body tag has opacity of 0 when the browser is in landscape mode and opacity of 1 when in portrait mode. That way we can easily switch between the images.

Fade the color change

If you had viewed the demo in a CSS3 transition supporting browser, such as Safari or Chrome, changing the orientation would trigger a smooth fade between colors of the chameleon.

 body {     background: url(chameleon.jpg) 50% 100% no-repeat;     -moz-transition: opacity 1s ease;  /* FF3.7+ */     -o-transition: opacity 1s ease;  /* Opera 10.5 */     -webkit-transition: opacity 1s ease;  /* Saf3.2+, Chrome */     transition: opacity 1s ease; } 

In order to-do that smooth transition we apply it to the body and set the opacity property to fade over 1s using the ease timing function. I also specify the various vendor extensions for the transition property.

Since the transition is applied on the body outside of the orientation media queries the fade will be triggered for both fading in and out depending on the browsers current orientation.

Browser support

Media query support varies from browser to browser but orientation media queries have pretty good support.

• Safari 4+
• Chrome 4+
• Firefox 3.5+
• Safari iPad

All of the browsers above except Firefox 3.5 also support CSS3 transitions. Firefox 3.7 however supports transitions but is still in alpha stages.

Unfortunately Opera 10.5 (Presto 2.5) supports all media queries except orientation, hopefully this will be added in a future update.

Bonus: iPhone support

As of writing the latest iPhone firmware doesn’t yet support the orientation media query, but with iPad support it’s very likely that the upcoming 4.0 release will include it.

In the mean time we can emulate orientation detection in the iPhone by utilizing the min and max-width media queries which have been available since 1.0.

 /* Portrait */ @media screen and (max-width: 320px) {     body { opacity: 1; } } /* Landscape */ @media screen and (min-width: 321px) and (max-width: 480px) {     body { opacity: 0; } } 

Since we know that the iPhones max width in portrait mode is 320px we use that to our advantage to apply our portrait styles. To detect landscape we use a combination of min/max-width and since CSS3 media queries allow us to chain expressions together we make sure the min-width is at least 321px, that way these styles won’t be applied in portrait mode. The max-width property is used so we don’t affect our desktop counterparts that support the orientation media query, its set to 480px which is the iPhones max landscape width.

In order for these styles to work on the iPhone we also need to set the viewport meta tag

 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> 

This will force the iPhone to render the page in its actual scale rather than doing its usual thing of auto scaling the website to fit the phone dimensions.

Now the background image is too big

By setting that meta tag the background image is way too big to fit within the iPhone dimensions. Luckily there is a CSS3 property called background-size which the iPhone supports.

 @media screen and (max-device-width: 480px) {     html, body {         -moz-background-size: 80% auto;         -webkit-background-size: 80% auto;         background-size: 80% auto;     } } 

In order to apply the background-size adjustment to smaller devices like the iPhone we use the max-device-width media query to target only devices with a maximum width of 480px. Then on both the html and body tags we adjust the background-size to be an 80% width of the available space on the current device, with the second value set to auto so we can keep the correct aspect ratio of the image.

But this presents another issue

Changing the iPhone orientation will also change the size of the background image to be larger in landscape than in portrait. To get around this we further adjust the background-size in landscape so changing between orientations will keep the background sizes relative to each other.

 @media screen and (min-width: 321px) and (max-width: 480px) {     html, body {         -moz-background-size: 50% auto;         -webkit-background-size: 50% auto;         background-size: 50% auto;     }     body { opacity: 0; } } 

We add a slight addition to the iPhone landscape orientation media query, instead of making it 80% of the available width we adjust it to 50% which keeps the background image the same size as it would be in portrait.

Conclusion

CSS3 media queries add a lot of control and power on how your webpage will be display depending on multiple factors such as device size, orientation, aspect-ratio and many others.

I’ve only scratched the surface of what Media Queries allows us to accomplish with relative ease. As browser support becomes better we can truly start to take advantage of the power that media queries provide. Let me know if you have some questions and I will try to answer them in comments.