50 Best Inspiring Form Designs 🎨
Tags: webdev, css, html, javascript
Published: 2021-05-07 13:36:09

`Hello World!` Today we are talking about Forms! They're everywhere, and when you least expect it, they can have a huge impact on your conversion rate. Even if you thrive a lot of traffic on your sites, you'll need to convert this traffic into users. I managed to bring the conversion rate (views divided by conversion) of my landing page to 60%. To make you understand, the average landing page conversion rate across all industries is 2.35%. So, let's start. 

![simpsone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u22dpvetxme0guyolrd9.gif) 

Read also:
{% link https://dev.to/devlorenzo/the-fabulous-list-of-all-form-input-types-48ig %}

## First, what makes a good Form? 

{% spoiler Spoiler %} 
Its design.
And its backend 😉, for that you should know [Getform](https://getform.io/).
{% endspoiler %}

### 1. Fundamentals

![mark-duffel-U5y077qrMdI-unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wk4y0m0v0p11zyiswce2.jpg) 

All forms need to have some core elements that you cannot remove. I advise you to create two forms, a general one to put on your site, which must be minimalist. This one serves especially when asking the user to sign in for something (account, newsletter...). Then you should also make a landing page for those who want to perform that action. An in-website form finds the user unprepared, you have to be direct, he didn't ask for that action, you have to make him want to do it. Use banners or a small section of the page with really just the core input boxes. At most you add more after the user has entered these (on another page, after the redirect). 
On the contrary, on a page dedicated 100% to the form, you can be more free and creative! The goal changes, you no longer have to convince the user to stay, but not to leave. On this page add all the useful elements, the main ones are illustrations, testimonials, freebie, an about us section, a timer, social links... 
For the illustrations, if you can't, even if it is recommended to make them by yourself, you have lots of free resources online. Some examples are [Adobe Stock](https://stock.adobe.com/illustrations), [unDraw](https://undraw.co/illustrations), [IRA Design](https://iradesign.io/), [DrawKit](https://www.drawkit.io/#browse-now-button), [Absurd Illustrations](https://absurd.design/) or [ManyPixels](https://gallery.manypixels.co/). Also, use the out-of-frame (for illustrations for example) to kind of bring the web page out of the screen.
Another important tip that not everyone thinks about is to thank the user in the end. Many think that when the user has signed up the work is finished, but no! it's the other way around, when the user signs up your journey together has just begun.

---

### 2. Simplicity - Intuitivity

![shane-4993XnXQKHY-unsplash (2)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4c64z9hi9suyks6yczx.jpg) 

The first very important thing, on which too many campaigns fail, is SIMPLICITY. It may seem easy, but you always have to remember that users have no time. You have hundreds of competitors out there that want their forms to work too. Your users can't spend 15 minutes finding the place to put the email and another 15 for the password. You have to be immediate. To have a clear, big and central CTA! 
Not more input that strictly necessary. In reality, you should always remember that, like with many things in life, too many is bad, as it's not enough (too little). Too many colors and your form looks like a rainbow, too few and the user thinks to be in a black and white film. Too much content and the user literally no longer understands anything, too little and the form becomes anonymous. It's up to you to find the right balance.
Your form must be intuitive, the user must immediately understand what to put and where. Don't modify too much your field labels. 
Give the user what they expect to receive. Don't lie to attract traffic, you will lose credibility and fail in the long run.

---

### 3. Organization - Respect of the brand guidelines

![stil-Mv4sg6_6qmE-unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugxgil8aygk8zxtwr124.jpg) 

This is another very important thing you need to care about, you need to have a clear organization. Just respect that Brand guideline! First, make sure your logo is on the page and given we are not Nike (your logo is not as recognizable and famous), add your name next to it. Then, especially for landing pages, you should have a big and clear title at the top. You can then switch between text, medium and small titles, images, and special copy (jokes, quotes, links..). The key here is consistency, the same piece of information should be the same way on all your pages. For example, all your medium titles should have the same size, same color, same positioning... 
Remember to respect the rules of your brand, such as the main colors up to the organization of the page.
Also, remember to always add your other important links (socials), but never abuse them in a form, they make users flee. A subscriber on the site is more important than a like on a social network.

---

### 4. Animations 

![mateusz-butkiewicz-A8uYvRvexvs-unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwhtbs3mn4w12p47vfiw.jpg) 

I decided to dedicate a whole section to animations, they deserve that. Your page should move, you're not building an 80s site! Here too balance is everything, you don't have to be in excess, but a good number of animations change your page, and most of all, your conversion rate! You should give visual feedbacks for everything the user does, the basic one is when he hovers a button / a link. In forms, it's very cool to give feedback in real-time while the user writes. You should also combine animations with illustrations, you can easily make a kind of slideshow with animation ([Like here](https://letsgoal-app.herokuapp.com/)). But if you want to go beyond your limits, try creating real animations! An idea could also be to use video to retain your users and get yourself better known in a more interactive way.
The last comment is that your website should also work without animations, you cannot rely on them 100%, or you will lose users. Not just for those who don't have JS, but also just for the load time. Allow the user to at least interact with the form before anything else. 

---

### 5. Creativity

![dragos-gontariu-54VAb3f1z6w-unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15xs4n0oxwaj0n25wufq.jpg) 

Now that you know them, break the rules! Give the user unexpected fun animations in a controlled environment. Your final goal is to engage him, don't bore him. Make him have fun in the process, that's a good plus! Play with the colors, the content, the animations... Remember to always be out of the box. We are all good at being the same as others, the strength is in being unique. Add your personal style. and add things that no one would expect. Sometimes it is better to take risks. Try also to work on images and illustrations, don't just copy the first one on internet but only the best or better, upload yours!
Also, giving a freebie radically changes your conversion rate. I give a [Udemy free course](https://worldindev.ck.page
) (giveaway) and a [JS cheat sheet](https://worldindev.ck.page
).

---

As you just understood, designing a form can be really tough, but these designs and real-life examples will help you for sure!

## Designs / Concepts

### 1. Login - Dark Mode

{% codepen https://codepen.io/soufiane-khalfaoui-hassani/pen/LYpPWda %}
---

### 2. Contact - Simplicity

{% codepen https://codepen.io/tutsplus/pen/ZNWQje %}

---

### 3. Sign-up - Creative

{% codepen https://codepen.io/rickyeckhardt/pen/poJwRRb %}

---

### 4. Sign-up / Sign-in - Switch

{% codepen https://codepen.io/chintuyadav/pen/mBaBqW %}

---

### 5. Sign-up / Sign-in - Switch 2 - Satisfying 

{% codepen https://codepen.io/joshsorosky/pen/gaaBoB %}

---

### 6. Sign-up - Neumorphism / Futuristic

{% codepen https://codepen.io/swapnet/pen/QWwPVwE %}

---

### 7. Newsletter - Simplicity

{% codepen https://codepen.io/ahmadnasr/pen/WLxbGO %}

---

### 8. Password - Fun / Original

{% codepen https://codepen.io/marcobiedermann/pen/eRNWxQ %}

This was actually done by one of our writers, @marcobiedermann!

---

### 9. Checkout - Complete / Trust - For entreprises

{% codepen https://codepen.io/studiojvla/pen/XKQxvy %}

---

### 10. Credit Card Info - Perfect

{% codepen https://codepen.io/jeanoliveira/pen/XRZyVr %}

---

### 11. Search - Immediate

{% codepen https://codepen.io/Schlipak/pen/KpPgQJ/ %}

---

### 12. Search - Expandable

{% codepen https://codepen.io/chouaibblgn45/pen/rzewrO %}

---

### 13. Login - Tranquility

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xi75y1q1ovqfusec6wp6.png) 

[By Colorlib](https://colorlib.com/etc/lf/Login_v9/index.html)

---

### 14. Event registration - Extravagance

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sevii3sfkse0gutm954g.png)
 
[By Colorlib](https://colorlib.com/etc/regform/colorlib-regform-3/)

---

### 15. Login - Interactivity

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w04dreh0jinrkej4v0r7.png)
 
[By Colorlib](https://colorlib.com/etc/lf/Login_v1/index.html)

---

### 16. Contact - Colorful

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8ove1nxjpt5e3lj3mr0.png)
 
[By Colorlib](https://colorlib.com/etc/cf/ContactFrom_v11/index.html)

---

### 17. Sign-in - Clean Design

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9v34f8gtdfvlni7abjd.png)

[By Rosina Pissaco](https://dribbble.com/shots/2600895-Login-Form-Clean-Design) 

---

### 18. Multiple Login - Accompany the user

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/146wr3o16xj52770fayh.png)
 

[By Mahisa Dyan Diptya](https://dribbble.com/shots/3330825/attachments/3330825-Multiple-Login-Form?mode=media)

---

### 19. Register - Mobile Friendly

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt0qfwebom6gkl4x0np2.png)
 
[By Nimasha Perera](https://dribbble.com/shots/7084967-Register-Inbox-Views)

---

### 20. Phone Verification - Intuitive

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60dqmj6juywqw96va91i.png)
 
[By Nimasha Perera](https://dribbble.com/shots/7090470-Phone-Verification)

---

### 21. Book a service  - Engaging

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pkrbae3nft0uwauajju.png)
 
[By Semas](https://dribbble.com/shots/8005625-Accounting-Appointment-Form-Page)
 
---

### 22.  Sign-up - Simple yet powerful

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu9z77q20dm2stepb8wz.png)
 
[By Natalia](https://dribbble.com/shots/11879454-Sign-Up-Form)

---

### 23. Login - Creative

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5odghj9z1axepckq2xd.png)
 
[By Martin Strba](https://dribbble.com/shots/13869341-Login-Contact-page-Winck)

---

### 24. Sign-up - Professional

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhusukv34v41efopmyb0.png) 

[By Ryan Johnson](https://dribbble.com/shots/7757250-Sign-up-revamp)

---

### 25. Sign-up & Sign-in - Geometric

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/297pn9cuypspph7jca3c.png) 

[By Valeriia Cherpak](https://dribbble.com/shots/14765335-Sign-in-Sign-up-form-Mobile)

---

*This article may contain sponsored content and I may earn something sponsoring them, at no costs for you.*

## [Getform](https://getform.io)

![getform-logo-white](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndxl7x5w5muw2syb6sqw.png) 

Hey busy front-end dev, why spend hours taking care of the back-end, which is so boring, when you can use Getform and save hours for real fun? Such as designing a successful form!
Getform is a modern form backend platform that lets you handle your forms on your websites and apps. You can set up a form and start collecting submissions to your form within minutes without having to setup a server or writing any backend.

Getform can be easily integrate with all the development frameworks, JAMStack, no-code and CMS platforms. Such as Next.js, React, Hugo or GatsbyJS. They also allow you to connect your forms with Zapier, Slack, Airtable, Google Drive, Intercom, MailChip, GitHub, or even Discord!

The core features of this fantastic product are: 
#### Email notifications
If you wish to receive an email everytime a visitor submits to you form, you can setup email notifications using the email notification plugin. More [here](https://docs.getform.io/plugins/) 

#### Advanced workflows using Zapier
Getform lets you integrate with other tools to allow you to wrangle your form submissions. Using Zapier integration, you can accept incoming submissions and connect with more 1500+ applications. More [here](https://docs.getform.io/integrations/zapier/what-is-zapier/)

#### Spam preventing with reCAPTCHA
Spam is also a real thing. You don’t want your inbox flooded with spam, so you can take advantage of Getform's Google reCaptcha Integration for both of the reCaptcha versions. More [here](https://docs.getform.io/installations/spam-protection/recaptcha-v3/) 

--> And File Upload Forms!

{% youtube YEH2GLFJhQY %}

---

## Real-Life Examples

### 1. [Reddit](https://www.reddit.com/login/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48vpw4xmk1g28m6rm04b.png) 

---

### 2. [Medium](https://medium.com/log-in)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmcyfowrf46q3pvp3kid.png)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boic1piyry9scxp55mkg.png)  

---

### 3. [Grammarly](https://www.grammarly.com/signin)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27uql9g5fyp8nw7f8oh2.png) 

---

### 4. [Miro](https://miro.com/signup/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vobk1l530og99jib7jq.png) 

---

### 5. [Pinterest](https://www.pinterest.co.uk/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1c6ytqszd4lo5pgyz9s8.png) 

---

### 6. [Discord](https://discord.com/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mkszjij29au5fd22ao6.png) 

---

### 7. [Netflix](https://www.netflix.com/it-en/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p00milq8d4px65zo7e4k.png)
 
---

### 8. [GitHub](https://github.com/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnpep1vbmoyxnaqqffvi.png)

---

### 9. [Netlify](https://app.netlify.com/signup)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s011owc7mw3mng3n12tb.png) 

---

### 10. [Docker](https://id.docker.com/login)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jq7307lz5y6vwnp0d1x7.png) 

---

### 11. **[Getform](https://app.getform.io/login)**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aez8gyeu17br79dzy4ur.png)
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bcojwcc6yktqkmj2n5h.png) 

---

### 12. [Framer](https://login.framer.com/sign-up/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69vvjimbgbrghs7vctum.png) 

---

### 13. [Figma](https://www.figma.com/login)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eekfctxb91dksf74c6cp.png)
 
---

### 14. [Friday](https://my.friday.app/users/sign_up)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcptpt9w82o7lbmek9je.png) 

---

### 15. [LunchClub](https://lunchclub.com/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdtr4ntpjib5p2cza94z.png)
 
---

### 16. [Pluralsight](https://app.pluralsight.com/id)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6r2bncmzo1s684cff1l.png) 

---

### 17. [Unsplash](https://unsplash.com/join)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m62f044vvnm5zu4qw8tg.png)
 
---

### 18. [Squarespace](https://login.squarespace.com/api/1/login/oauth/provider/authorize)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/349f5ht3rh0aw9py34qs.png)
 
---

### 19. [Postman](https://identity.getpostman.com/login?continue=https%3A%2F%2Fgo.postman.co%2Fbuild&_ga=2.103517760.1583888813.1619514294-1020132607.1619514294)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04gilnji8byv2rw21tth.png)
 
---

### 20. [Quarkly](https://quarkly.io/auth)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdtr4ntpjib5p2cza94z.png)

---

### 21. [Wappalyzer](https://www.wappalyzer.com/) 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kedm9oesusglzw40clcc.png)
 
---

### 22. [Craftwork](https://craftwork.design/checkout/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rno8hy20oibr61dg3yzs.png) 

---

### 23. [Jacek Jeznach Porfolio](https://jacekjeznach.com/contact)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cuq03bgzvnsiksdraxk.png)

---

### 24. [Blush design](https://blush.design/sign-in)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9m21tko4s2uddei3egzx.png) 

---

### 25. [Designstripe](https://www.designstripe.com/?dscid=designstripe&dsref=www.drawkit.io)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhowfzsy6wqw134c7ub1.png) 

---

Thanks for reading and Happy coding ❤

---

&nbsp;

## 🎉 Giveaway ⚡

We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:
1. 👍 React to this post
1. ✉️ Subscribe to our [newsletter](https://worldindev.ck.page) <-- Very important

&nbsp;

---

This article is sponsored by [Getform](https://getform.io/):
Collect submissions, receive emails and connect your HTML form
with popular apps. Perfect for JAMStack and API-driven static websites. <-- Trusted by 25K+ customers, processed over 30M+ submissions, with fully secure infrastructure!