5 Different Ways To Create Stylish Contact Form Layouts | Minervity
How to Create an Illustrated Cartoon Character
Spotlight »
How to Create an Illustrated Cartoon Character
81,308 Views | 40 Comments

So, I decided to attempt to create a tutorial on how to create a unique illustrated cartoon character in Photoshop. It’s pretty straight forward and the skills you need for this is very limited as …

Read the full story »
Creative Corner

A series of in depth and heavily inspiring Graphic, Web and Logo Designer and Developer interviews.

Designer Apps

A resource vault of applications that would serve any Designer or Developer well to have in their arsenal.

Freelance Hub

A storage full of tips and tricks for every freelance Designer or Developer that wants to progress their business.

Geek Things

Every once in a while we’ll post a new geeky thing that might inspire you to go through the day with a laugh or a second thought.

Website Filter

A collection of websites that is sure to bring you creative inspiration and keep you on the edge of design.

Home » CSS, Flash, PHP

5 Different Ways To Create Stylish Contact Form Layouts

Submitted by Richard Darell72,846 Views | 54 Comments

CSS/PHP/AJAX/Flash Contact FormWe have all struggled with the contact for layout. What to include, how much info and how the layout should grace our ever so beautiful website design. I myself had quite a struggle finding the right one for the contact form for Minervity.com. Think I’ve found it but haven’t incorporated it yet. Yup, you guys have to get your fix before I start tweaking this site.

So, like a superhero looking for the criminals, I went out on the Internet to see if I could track down some of the best ways and most functional contact forms available. In this article you will find what I found with complementary downloadable code to set up your form.

Enjoy!

1. HTML Contact Form

Simple Contact Form

This stylish but simple contact form can complement just about any website in a good way. Its simple and straight forward layout makes for an easy way for the visitor to get in touch with you.

The form consists of three sections. Name, Address and Message. Each with its own input fields where the visitor can submit his contact info. You can easily change the border color, background color and setup even more fields if you so need.

You are allowed to change it, add or remove fields that you see fit your needs. You can of course set the tables width to fit the theme of your website or blog.

To change the names of the input fields which will allow you to generate nicely formatted results after submission you can just change the names of the fields to complement the field names used in the delivery system you are using. Consult your server provider to make sure what names they are using in their delivery system.

Download Button

2. AJAX/PHP Contact Form

LightForm AJAX/PHP Contact Form

This form is a combined AJAX/PHP form using all kinds of fancy features. Simple to modify and a really nice addition to any website. It’s clean and stylish and depending on what you are after you can really add some great design flavor to your form.

Features include:

  • Form Validation using FormCheck2.
  • Spam Check.
  • Display user IP, user agent and referrer in the message.
  • Display a dialog box when message is sent successfully.
  • Inputs and Text areas are styled with NiceForms.
  • Works in the most recent browsers.

All these features will make sure that your form is not only perfectly user friendly but also prevents nasty spam procedures from sending you annoying mass messages. If you should still get spam you can always block the IP address.

Source: Web Kreation

Download Button - AJAX/PHP Contact Form

3. CSS/PHP Contact Form

CSS/PHP Contact Form

This form is created using a combined technique of CSS and PHP to accomplish a stylish and really useful contact form for your website or blog.

It resembles the Simple HTML Contact Form but this one may be a bit more customizable and it has some nice and useful control features which will make it both user friendly and spam safe.

Features include:

  • Required input field check,
  • Form validation using a simple captcha system.
  • Design modification friendly.
  • Streamlined user experience.

Some really useful features to make sure that your form is fully and correctly filled out when the user submits it.

With a few modifications and graphics you can have a clean and professionally designed contact form for your blog or website.

Source: CrazyLeaf Design Blog

Download Button - CSS/PHP Contact Form

4. Flash / PHP Contact Form

Flash / PHP Contact Form

This particular form uses Flash and PHP to create a simple but quite useful contact form. There isn’t any particular fancy features coming with this form but its streamlined user interface makes the form quite powerful.

However, it being created mostly in Flash you have every chance of making the form quite stunning when it comes to designing it. You can also create new input fields and buttons that match your website or blog theme. You can even go ahead and animate the buttons or the input fields. The entire look of the contact form is up to you.

The easy setup makes this form quite powerful in any website design. A PHP file is included in this download to handle the submission system which you simply upload to your server and you are ready to go.

I am sure that you can add validation, captcha and/or input field check to the form if you have just a little bit of flash experience along with some skills in PHP coding. Fusing the two is quite easy once you get a hang of it.

Source: Flash Template Design

Download Button - Flash / PHP

5. Pure AJAX Contact Form

AJAX Contact Form

A simple but well stylised contact form that sure will make your visitors feel welcome to contact you right away.

This form is based on pure AJAX code which makes it truly customizable if you are a little bit familiar with AJAX programming. Add or change any field you need changed to get it just the way you want it.

This form has no particular features to brag about like the more advanced forms. However, it has a nice CC button that will enable the visitor that uses the contact form to send the form submission to him or herself as well.

Implementing this on your site is quite easy. All you have to do after downloading this is either to copy the form code and paste it right where you want it on your site. Or, you can simple just use the original html file and all should be good to go.

Powerful, little hassle and professionally looking.

Source: MTSix

Download Button - Pure AJAX Contact Form

Popularity: 39% [?]

54 Comments »

  • Posts about Graphics Software Programs as of April 19, 2009 | Easy Reach Software said:

    [...] 詳しくは>> context free art &gt 5 Different Ways To Create Stylish Contact Form Layouts – minervity.com 04/19/2009 We have all struggled with the contact for layout. What to include, how [...]

    - 18 April 2009 at 7:23 pm
  • Alex | CrazyLeaf Design Blog said:

    Thanks for adding my “Design a stylish contact form” tutorial.

    [Reply]

    - 19 April 2009 at 1:17 am
  • Online Reputation said:

    Great work on those contact forms. I will pass them on to my buddies and make sure you get credit for them.

    Tom

    [Reply]

    - 19 April 2009 at 2:25 am
  • Brataweb said:

    This couldn’t have come at a better time. We’re just about ready to launch a site and I was just tweaking and thinking about the contact form. Thanks for a great post and I think the ajax/php form may be a winner.

    [Reply]

    - 19 April 2009 at 6:00 am
  • Alert! | Natural Acne Solution said:

    [...] 5 Different Ways To Create Stylish Contact Form Layouts | Minervity [...]

    - 19 April 2009 at 6:37 am
  • 5 Different Ways To Create Stylish Contact Form Layouts : Design Newz said:

    [...] 5 Different Ways To Create Stylish Contact Form Layouts [...]

    - 19 April 2009 at 4:07 pm
  • How To Write Good Valentine Poems | Poetry Blog said:

    [...] 5 Different Ways To Create Stylish Contact Form Layouts | Minervity [...]

    - 20 April 2009 at 1:06 am
  • kapsarovb said:

    I’ll for sure use on of these, thx! Great job…

    [Reply]

    - 20 April 2009 at 5:26 am
  • 99 Rated Toure | yourfifaplayer99.co.cc said:

    [...] 5 Different Ways To Create Stylish Contact Form Layouts | Minervity [...]

    - 20 April 2009 at 8:30 am
  • Shahriat Hossain said:

    Nice forms layout and I am gonna to play with these, thanks :)

    [Reply]

    - 20 April 2009 at 9:43 am
  • Beiruta said:

    Nice forms and great effort invested :) Thanks for sharing!

    [Reply]

    - 22 April 2009 at 2:22 am
  • Duncan said:

    Fantastic list, some classic scripts here – very useful for any web designer/developer!

    [Reply]

    - 22 April 2009 at 5:51 am
  • Twitted by izzataziz said:

    [...] This post was Twitted by izzataziz [...]

    - 25 April 2009 at 6:29 am
  • Robin Pernice said:

    Once again learning to expect the best explanation of the best of the best out there from you! Always come away with something I needed before I came,communicated in a way for me as a beginner, that I can wrap my brain around as well as implement! Much thx. You raise the bar my man! : )

    [Reply]

    - 27 April 2009 at 1:33 pm
  • Jeremy said:

    How about a PHP one with an attachment field?

    [Reply]

    - 30 April 2009 at 10:20 am
  • Nikt nie zwraca się z prośbą o Chronic Pain Ale Powrót do zwolnienia | Joint Specialist said:

    [...] 5 Different Ways To Create Stylish Contact Form Layouts | Minervity [...]

    - 1 May 2009 at 5:25 pm
  • Ragnarok (Týr album) » Parenchyma said:

    [...] 5 Different Ways To Create Stylish Contact Form Layouts | Minervity [...]

    - 3 May 2009 at 9:27 am
  • Theresa Maynard said:

    Oh no! Each of the 5 download buttons returned the dreaded Error 404 – Not Found message when I tried them.

    [Reply]

    - 3 May 2009 at 4:58 pm
  • Twinster (author) said:

    Theresa Maynard – The 404 linkage error should now have been cleared up and the download buttons should now work as usual.

    [Reply]

    - 3 May 2009 at 5:48 pm
  • Topics about Iphone » Archive » How to Create a Realistic iPhone said:

    [...] 5 Different Ways To Create Stylish Contact Form Layouts | Minervity [...]

    - 3 May 2009 at 8:08 pm
  • Mikes said:

    Hmm.. I saw this in twitter. thanks for sharing.

    [Reply]

    - 14 May 2009 at 3:56 am
  • Kerwin said:

    Really cool! This will be a real time saver!

    Thanks a lot!

    [Reply]

    - 19 May 2009 at 7:08 pm
  • Sydney Web Design said:

    Very cool! I like the simplicity of the foundation – easy to build on top of this for custom interface, great job.

    Thanks a lot for sharing!

    Nik – Big Click Studios
    @BigClickStudios

    [Reply]

    - 24 May 2009 at 3:40 am
  • A Great Way to Get Free Website Traffic | My Traffic Strategy said:

    [...] 5 Different Ways To Create Stylish Contact Form Layouts | Minervity [...]

    - 25 May 2009 at 11:02 am
  • Muhamad Basuki said:

    Thanks, and great work

    [Reply]

    - 5 June 2009 at 6:55 am
  • My research and experience on how to manage multiple twitter accounts. | Internet Marketing said:

    [...] 5 Different Ways To Create Stylish Contact Form Layouts [...]

    - 11 June 2009 at 11:33 am
  • Darren said:

    These are nice contact forms, nothing new though, they’re ok for the newbs I guess

    [Reply]

    - 21 June 2009 at 11:57 pm
  • Twitted by rene_silva said:

    [...] This post was Twitted by rene_silva [...]

    - 27 June 2009 at 9:52 am
  • Pandu Photography said:

    thanks for sharing the info!
    it is really useful!

    [Reply]

    - 28 June 2009 at 10:32 pm
  • aBigDorkyDimwit said:

    Would be interesting to cover which way is most secured.

    [Reply]

    - 5 July 2009 at 1:06 pm
  • Cool articles – SEO, blogging, internet marketing(july13-july19 2009) « Stefanm, my link collection said:

    [...] 5 Different Ways To Create Stylish Contact Form Layouts(HTML, AJAX/PHP Contact, CSS/PHP, Flash / PHP, etc); [...]

    - 19 July 2009 at 11:49 pm
  • 5 Different Ways To Create Stylish Contact Form Layouts | Minervity said:

    [...] Read the rest here: 5 Different Ways To Create Stylish Contact Form Layouts | Minervity [...]

    - 5 August 2009 at 8:32 pm
  • Ian said:

    Great Post, I am having problems with my sign up form so this is a great solution, Thanks a lot, keep them coming.

    [Reply]

    Richard Darell Reply:
    August 7th, 2009 at 3:01 am

    Yeah, sometimes a solution doesn’t fit a particular need so at least one of these will probably work for you.

    [Reply]

    - 7 August 2009 at 2:45 am
  • Tamixes said:

    Thanks! Great resource for right brained designers.

    [Reply]

    - 16 August 2009 at 8:27 am
  • prafuldass said:

    The most useful post i,ve ever seen in this site. Thanks

    [Reply]

    - 17 August 2009 at 5:05 pm
  • Adarsh said:

    Great post m8. The 2nd one using php/ajax is not working fine in Chrome. The form validation works only for textarea not other fields.

    [Reply]

    - 13 November 2009 at 6:39 am
  • Sanjay said:

    Hello sir my name is sanjay kumar i am currently operation http://www.moneyinhands.com i don’t idea about how i create php form for my website with spam protection. Current i am using php form from emailmeform.com but i need my own php form code. Please tell me or suggest me how i create php form to i use for my all website. I am waiting for kind suggestions…

    [Reply]

    - 5 December 2009 at 8:34 am
  • DonovanArline21 said:

    Buildings are not very cheap and not every person is able to buy it. Nevertheless, mortgage loans are created to help different people in such hard situations.

    [Reply]

    - 26 February 2010 at 10:48 am
  • Antonio said:

    Awesome list! The HTML form looks pretty decent for being such a simple form.

    [Reply]

    - 27 February 2010 at 3:28 pm
  • Look At All The Spam In Here said:

    Be nice. Keep it clean. Stay on topic. No spam.

    Obviously this form isnt spam safe LOL

    [Reply]

    - 21 April 2010 at 5:11 pm
  • meg said:

    Thanks Richard. Great Roundup.

    [Reply]

    - 25 April 2010 at 11:43 am
  • Harold Ellis said:

    We are interested to increase traffic to your website, please get back to us in order to discuss the possibility in further detail.

    [Reply]

    - 7 May 2010 at 11:03 pm
  • jack said:

    Nice Tutorials,
    Brilliant works,thanks dude and its very useful for me..
    visit : ewebtutorial.com

    [Reply]

    - 5 June 2010 at 7:43 am
  • Todd Wallace said:

    Digging the Flash/PHP form. Thanks for putting these up.

    [Reply]

    - 5 June 2010 at 4:21 pm
  • Ilie Ciorba said:

    Good work on those forms!

    [Reply]

    - 14 June 2010 at 8:32 am
  • Siddharth said:

    that’s amazing.. will be using soon for registration form in my next website :)

    [Reply]

    - 11 July 2010 at 1:38 am
  • replica chronoswiss watches said:

    Your post is really informative for me. I liked it very much.

    [Reply]

    - 18 July 2010 at 7:46 pm
  • omega watches said:

    winni2078 0806Juicy Couture is a fashion rolex watches brand which was founed in 1997 form California

    [Reply]

    - 6 August 2010 at 12:54 am
  • replica watches said:

    Now our watches are even cheaper! We are glad to inform you that now the high replica watches that are offered to your attention by our website are available at discount prices! This gives you a great opportunity to experiment with your style, buy as many watches as you wish and have a watch for any occasion and outfit.

    [Reply]

    - 18 August 2010 at 5:36 am
  • Büyü Nasıl Yapılır said:

    We are interested to increase traffic to your website, please get back to us in order to discuss the possibility in further detail.

    [Reply]

    - 20 August 2010 at 12:38 am
  • Ravi Juneja said:

    nice, thx for the post :)

    [Reply]

    - 26 August 2010 at 11:49 pm
  • web tasarimi said:

    thanks for sharing. nice article..

    web_tasarimi

    [Reply]

    - 27 August 2010 at 4:09 pm
  • Wholesale Gadgets said:

    Discount Wholesale Electronics, Wholesale Cell Phones, Electronic Gadgets and More from the Best Dropship Wholesaler

    [Reply]

    - 30 August 2010 at 1:14 am

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

Anti-Spam Protection by WP-SpamFree

Spam protection by WP Captcha-Free