1stwebdesigner |
| 21 Easy To Customize Premium PHP Contact Forms Posted: 27 Apr 2010 12:00 PM PDT
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. PatterntapHere 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:
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. Features include:
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:
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. 4. Contact Form With Custom Auto Responder ($5)Main Features:
5. Simple Website Comments ($7)This website component allows you to easily place a "comment block" on any page of your website. Features:
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:
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:
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:
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! 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. 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. 12. Send to Friend Form ($7)
Features:
13. Drag & Drop Form Manager with E-mail Attachments ($7)Features:
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. 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:
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. 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:
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.
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:
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. 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.
|
| How to use CSS3 Orientation Media Queries Posted: 26 Apr 2010 11:13 PM PDT
OrientationThe 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 chameleonTo 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 demoLet’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 changeIf 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 supportMedia query support varies from browser to browser but orientation media queries have pretty good support.
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 supportAs 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 bigBy 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 issueChanging 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. ConclusionCSS3 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. |
| You are subscribed to email updates from Graphic and Web Design Blog To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment