Have you ever been in a situation when you run into a website and want to message its owner, but you can’t find a contact form? You need to spend quite a bit of your time to find it so you can send your message. What are the odds that you leave a site not finding the place where you can type in what you want and contact a site owner?
Sometimes, it happens. That’s why if you are a site owner, you should provide your site with a convenient and noticeable contact form. Also, it will be a good advantage if it has an original design and stands out from your competitors’ contact forms on their websites.
Internet users might need to contact a site owner for different reasons: if they want to give them feedback, offer some assistance, ask some questions, etc. That is why it’s very important for business owners to have a convenient and catchy contact form on their site.
What contact form to choose?
If you already have a website, I bet you already have a contact form on it. No matter how your site was created, maybe you’ve built it on your own, web designers have done it for you, or you used a web template - either way, your site definitely has some kind of decent contact form built into it.
The question is, is it good enough for you? You decide. Anyway, I’m sure you would agree that making an eye-catching custom contact form on your site gives you way more advantages over your competitors than just a plain standard one.
HTML and CSS contact forms
You can find tons of free “Contact Us” forms on the web. Why are they convenient? Because all you need is to download and implement a code on your CMS. There are plenty of sources where you can easily find any contact form you like. I offer you the opportunity to check out our compilation of the finest, most attractive ones. In my opinion, these are some of the best designs available.
All of them have been found on Codepen. If you are not familiar with it, it is a huge community for coding enthusiasts, created for them to showcase their art (yes, let us call coding an art, since it’s definitely a creative process) and share it with you.
You may also find it helpful to check out our landing page templates.
And now, the compilation itself. Enjoy!
Contact Form by Iulian Savin
See the Pen Contact form by Iulian Savin (@Iulius90) on CodePen.
If you are in search of a fancy bright contact form, this one will be perfect for you! It’s bursting with colors: yellow, blue, green, red, and different shades of these colors. See for yourself. This form is designed as a big blue envelope on a yellow-green background. Pressing the “Email me” button opens the envelope and you get a letter form that comes out of the envelope to fill in. There are three canonic fields with one optional “Phone” field. There is a green button for “Send”.
Contact Form by Stefan Rusu
See the Pen Contact Form by Stefan Rusu (@stephanrusu) on CodePen.
Without any special design, this form will be perfect for those who don’t want something to distract their visitors’ attention. Designed in white, it contains four fields: name, email, subject, and message. What else does somebody need? Simple and to the point without a lot of clutter.
Contact Form Bootstrap 3 by Shuvo
See the Pen Contact Form Bootstrap 3 by Shuvo (@ShuvoHabib) on CodePen.
This is also a minimalistic form with the same fields as the previous one. The background is white as well. A green button “Send message” in the center is the spotlight of this contact form.
Elegant Contact Form by Mark Murray
See the Pen Elegant Contact Form by Mark Murray (@markmurray) on CodePen.
This elegant form has the same data fields as the previous ones. The data boxes’ edges are rounded which makes this form look quite elegant. The red “Submit” button stretched over the whole length is the cherry on the cake.
Contact Form by Aina Requena
See the Pen Contact Form by Aina Requena (@ainarela) on CodePen.
This form has even fewer input fields than the other contact forms. They are only three: name, email, and message. The author neglects the subject field (quite understandable: you’ll know the subject from the message as you read it). Also, this form has the classic black “Submit” button.
Contact Form Style CSS3 by Paulo César da Conceição Ferreira Junior
See the Pen Contact Form Style CSS3 by Paulo César da Conceição Ferreira Junior (@paulocesarpcfj) on CodePen.
Maybe you’ll find this contact form more attractive than the others. It has a black background and three fields: name, email, message. A simple “Send” button which looks very similar to the space button on your keyboard completes the design.
Quick Minimal Contact Form by Erlen
See the Pen Quick Minimal Contact Form by Erlen (@erlenmasson) on CodePen.
This contact form has a yellow background. It has been designed as a template, which already includes the introductory words, and all the text is written for you, so you just need to put your data into the spaces. A “Send” button is designed to resemble a little paper airplane.
Contact Form by Paul Stamp
See the Pen Contact Form by Paul Stamp (@paulstamp) on CodePen.
This contact form is one of the most beautiful in my opinion. The background picture shows us a beautiful sunset or sunrise (depends on your philosophical views) somewhere in the mountain forests. The pink colors bring peace to your mind and relax you. The data boxes are transparent which is a perfect solution since this “Contact Us” page has such a gorgeous background. Moreover, you can hide them by clicking on a small envelope in the lower right corner of the page (or just use a standard cross “x”) and enjoy the view. The form has only three fields to be filled in: name, email, and message. The “Send” button is also made to look like a little envelope.
Contact Form Template by Chris Holder
See the Pen Contact Form Template by Chris Holder (@see8ch) on CodePen.
This contact form looks simple yet stylish. This quite minimalistic template contains the standard name, email, and message fields. What makes it stylish? The data fields have a slide animation. When you hover the mouse pointer over the field, it slips to the left and shows hints for what information might be typed into the field. A bright “Send” button is a kicker of the form.
Responsive Popup Contact Form by Danny Holmes
See the Pen Responsive Popup Contact Form by Danny Holmes (@dsholmes) on CodePen.
At first sight, it looks quite plain. A call to action at the top and a button “Contact Us” below. The background is simply white. But after you press the button, a huge contact form on a plain purple background pops up. It contains such fields as name, email, and message and a request to prove that you’re not a robot. You’ll also see a friendly invitation to ask questions, make suggestions, and write comments. Confirm your query using the turquoise “Send” button.
Contact Form Linked to Firebase by irwin litvak
See the Pen Contact form linked to firebase by irwin litvak (@purewisdom1) on CodePen.
If you are looking for a simple and friendly contact form, you might find this one interesting. The form is framed with a black border and has rounded corners. The whole design of this “Link up” page is performed in a handwritten style as if it was drawn with a black marker. A pleasant green background includes three white data boxes and a “Submit” button.
Floating Contact Form by Lizzy
See the Pen Floating / Hovering Contact Form by Lizzy (@Kelui) on CodePen.
The name of this form speaks for itself. It consists of three input fields: name, email, and address. The fields are floating and change their colors when you hover the pointer over them. The message field expands in addition. The form also has a shadow below the data fields which visually enhances the floating effect. Beautiful floral colors make this contact form even more attractive.
Contact Form by Florin Pop
See the Pen Contact form by Florin Pop (@FlorinPop17) on CodePen.
First you see just one black button “Contact me!” on the sienna background. As you click it, it maximizes into an actual contact form with the standard name, email, and message fields. They are sienna as well and the frame of this form is black. These calm and stylish colors will attract the visitors of your site and they will definitely want to contact you! The additional charming feature of this contact page is the animation which you will see right after you send your message. The appreciation words at the end also make it delightful and chummy.
Blackboard/Chalkboard Contact Form by Greg Sweet
See the Pen Blackboard/Chalkboard Contact Form by Greg Sweet (@ControlledChaos) on CodePen.
This contact form is designed as a school blackboard. The number of fields is bigger than in the other forms. It has the name, email, phone, subject and message fields. Your site visitors will be able to put in all the information you will need from them.
Appointment Contact Form by Andrew Wright
See the Pen Appointment Contact Form by Andrew Wright (@andrewwright) on CodePen.
If getting a message or feedback is not enough and you want your contact form to also provide an option for making appointments, you should pick up this form. Besides the standard fields like name, email, phone, and message, there’s also a little survey to choose the most convenient way of getting in touch with the user. You’ll also find an option to choose the day and time which are most appropriate for making contact by phone or other method.
Contact Form with Filter Validation and Captcha Code by Mario Vidov
See the Pen Contact form with filter validation and captcha code by Mario Vidov (@mel) on CodePen.
Do you want your site to look cozy? Then choose this contact form. The wooden background makes your site visitors feel like home. Moreover, black colors make this form look hygge yet modern and stylish. It has three standard data fields plus a captcha field.
Under The Sea Contact Form by Geert-Jan Hendriks
See the Pen Under the sea contact form by Geert-Jan Hendriks (@geertjanhendriks) on CodePen.
This fishy contact form justifies its name. As you are gazing at it you see shoals of fish which move to the right side through the page behind the input fields. If you are in search of something relaxing for your site, you won’t find anything better. What can be more calming than the sea and its inhabitants?
Natural Language Contact Form by JayPea21
See the Pen Natural Language Contact Form by JayPea21 (@JayPea21) on CodePen.
This contact form made in a humorous way is something you might find interesting. The design looks quite simple. The form has a name field and two dropdown lists: one for choosing the purpose of your appeal, and the other is for specifying the most convenient way to contact you. Do you want to send a resume? Or maybe you just want to talk about dinosaurs but have nobody to listen to you? So maybe you need to find a BFF? I told you the list is pretty funny, check it out for yourself!
Responsive Contact Form [PHP] by Joel T Bennett
See the Pen Responsive Contact Form [PHP] by Joel T Bennett (@JTBennett) on CodePen.
Looking neat and minimalistic, this form will provide you with everything you need. There are four fields: name, phone, email, and enquiry. There’s an invitation to request information, book a studio, or plan an event on the blue background at the top and a blue “Submit” button below.
Contact Form HTML+CSS by Trevor L.J.M. McIntire
See the Pen Contact Form HTML + CSS by Trevor L.J.M. McIntire (@uplusion23) on CodePen.
If you are a Taoism fan or just like black and white colors, you’ll appreciate this geometrical black and white “Contact Us” page. Designed with style, it contains only two fields: name and email. Both of them are on the right (black) side. The page is divided into two parts by the sharp angle line, which makes this contact form look ultra modern!
Sass Flip Contact Form by Danny Beton
See the Pen Sass Flip Contact Form by Danny Beton (@devdanny) on CodePen.
What form can be more minimalistic than a form with just one button in the center? Cleverly disposed in the middle of a scarlet square and bordered with a white line, the “Send message” button locks your eyes instantly as you look at this form. It flips upside down as you press the button so that you can see the data fields which are name, company, telephone, email and the message field itself.
Expanding Contact Form by Joe Harry
See the Pen Expanding Contact Form by Joe Harry (@woodwoerk) on CodePen.
Responsive Contact Form by Lisa Wagner
See the Pen Responsive Contact Form by Lisa Wagner (@wgnr) on CodePen.
This one is a black contact form with white input fields. Its friendly heading “Nice to meet you” invites you to chat if you have a question or just want to get in touch. The form includes standard fields and a dropdown list to choose a subject (“Game of Thrones” fans will appreciate the variants). The only thing that adds a bit of color (actually just one, and it’s rather nice) is the raspberry “Send” button.
Contact Us Form With Animation by Valeriya
See the Pen Contact us form with animation by Valeriya (@wwwebneko) on CodePen.
This charming contact form, designed as a sheet of letter paper, looks just like a flip side of a greeting card. There’s handwriting for “Contact us” at the top, the message field is right beneath, and you’ll find the name and email fields in the lower right corner. Why is it called “animated” contact form, you ask? As you click “Send”, you see a wonderful animation: the letter is being folded in half and placed into an envelope. Your message is ready to be sent!
Contact Us Form by Amr Shaalan
See the Pen Contact Us Form by Amr Shaalan (@IbnShaalan) on CodePen.
Simple yet beautiful this contact form is placed on a background which reveals a glorious picture of the evening sun rays covering golden wheat. What a magnificent view! The form itself is placed in a transparent box and consists of the first name, last name, email address, and message data fields. This “Contact Us” page is designed in golden tones and surely takes all your worries away as you’re looking at it.
Rocket Contact Form by Daniel
See the Pen ? Rocket Contact Form by Daniel (@daniel_wolf) on CodePen.
At first, looking at this contact form you might think it is quite simple and can’t be that extraordinary form you’ve been looking for. For real, the inscription “Wanna drop me a line? - Use this button” doesn’t look too promising. Don’t run away yet! As you press “Contact me” and start entering, you see that the data fields change and suggest to you what information you are to put there next. After you finish your line, you are ready to send the message. The white input field becomes a sheet of paper and flies into the rocket. How cool is that?! The rocket delivers your message right into the open space. What a wonderful animation for a Contact Me page, indeed!
Simple Contact Form by Johanna Ruiz
See the Pen Simple contact form by Johanna Ruiz (@johannaruiz) on CodePen.
This quite simple yet cute contact form contains only two data fields: name and email and a “Send” button decorated with a star. This form reminds me of an envelope or a postcard. It has a colorfully striped frame, which makes it look joyful.
Basic Comment Form for the In Focus Brand by Kathryn McElroy
See the Pen Basic comment form for the in focus brand by Kathryn McElroy (@kemcelroy) on CodePen.
This neat contact form is made tastefully and looks pretty serious. If you want to attract future business partners or if you run some kind of consulting or law business, this form will be a good choice, since it makes your site look presentable and trustworthy. It has four standard fields: subject, message, name, and email. Light-blue tones create a relaxing effect on your eyes.
Hello-Animated Contact Form by Shah Zobayer Ahmed
See the Pen Hello - Animated Contact Form by Shah Zobayer Ahmed (@speeedsam) on CodePen.
This contact form starts with the white cross in a blue circle. How come the cross is exactly what you need? Press it to open the form. A pretty original solution, don’t you think? Press the cross and you see it's spinning. After that, you can see a blue compact form with three fields and a button. The inscription on the top assures you that you’ll get the response as soon as possible.
Contact Form with Budget Slider by Adam
See the Pen Contact Form with Budget Slider by Adam (@adamk22) on CodePen.
As you can guess from the name, this form includes a budget slider besides the other input fields. So, your visitors are to enter the name, email, phone number, the company they represent, and project details. Thus, you’ll get all needed information from the visitor of your site just by looking through the info they put in the contact form. It is convenient plus it saves your time.
Material Design Contact Form by Shehab Eltawel
See the Pen Material Design Contact Form by Shehab Eltawel (@shehab-eltawel) on CodePen.
Offer your visitors to contact you via this nice form. We’re all used to the fact that each and every “Contact Us” page has a standard set of fields, such as name, email, and the message itself. But this one has something to surprise you: it has an option to leave a voice message! It will come in handy if the users don’t want to type the message for some reasons.
Responsive Contact Form with HTML5 Drag and Drop Image by Ollie Husband
See the Pen Responsive contact form with html5 drag and drop image by Ollie Husband (@OllieHDev) on CodePen.
This seemingly plain contact form is not that simple. Its neat design includes six data fields. In addition to first and last name, email, website, and message fields it also has a place to put your title: Mr., Mrs., Miss, or even Dr.! But this is not what makes this contact form stand out over the others. What really does, it’s an option to add an image to your message! How cool is that?! You can do it with ease. There are two ways. You just need to drag a picture and drop it in the field. Or you can click on the field and choose a picture on your PC. What can be easier?
Read Also
How To Create A Catchy Search Field With CSS?
How To Make Stylish Checkboxes And Radio Buttons With CSS3
Free CSS3 Hover Effects to Copy and Paste