10 Free Open Source CSS3 Checkout Forms

Shopping cart checkout forms are the most important part of the user’s journey. They signify the completion of a purchase and they’re usually optimized like crazy to increase conversions.

But if you have no idea where to get started then maybe these free forms can help. I’ve curated 10 of the coolest checkout forms from CodePen, all open source, and all are easy to clone for your own websites.

Donut Payment

This unique checkout form really takes design to a whole new level. This Donut Payment UI is part of the daily UI challenge and this interface by Nathaniel Watson deserves an academy award.

It uses CSS gradients for the backgrounds and the repeating pattern dividing the two sides. The CC input field also spaces out numbers into packs of 4 which makes this incredibly simple to use.

Typography, color, whitespace and form all come together in this incredibly unique checkout form. I can’t imagine it would be useful on too many sites but it serves as an example of how much you can do with design.

Simple Checkout

For a much more practical look at checkout fields this simple checkout offers everything you need. It’s pretty small but makes great use of the space with crisp fonts and input field highlighting.

All of the code is pure CSS and you can copy/paste this directly into your site for a quick solution. Granted this is a pretty small form so you may need to expand it, but the overall style is very clean and should blend nicely into any layout.

Shopping Prototype

Clean prototypes remove the aesthetics leaving just the user experience. That’s exactly what you get with this shopping prototype and it offers plenty of inspiration to build on top of.

Quantity fields use the “number” inputs and they auto-update the subtotals on each line. This effect is pretty simple to build with JavaScript and even easier to port into your own website.

Also try clicking on the “checkout” button and dig through all the other pages. This pen’s creator James Mejia added pages for guest signups, shipping, payment, and a couple other forms in the checkout process.

Credit Card Café

This fun and simple form uses a café theme with a thin paper-style receipt checkout form. Online shops may need more space, but this is perfect for any smaller restaurant or online coffee manufacturer.

The dynamic Visa credit card field is the coolest feature of this entire form. It’s fully dynamic with labels that automatically shrink when you start entering content. The dropdown fields for month/date are customized as well lending a sense of life into the checkout process.

Purchase Payment

Here’s another sweet daily UI project, this one created by developer Maycon Luiz.

It uses a card-based design with the products listed along the left side and the checkout details on the right.

The feature I like most is the automatic card update. When you punch numbers into the payment fields they automatically appear on the credit card graphic at the top. This gives the user some closure that they’ve entered numbers properly.

Vans Checkout

One other daily UI with a different approach is this Vans checkout coded by Tommaso Poletti. It’s got a few dynamic page effects that hide all shopping cart items behind the form.

If you click the shopping bag icon you’ll notice all these items fly out to the side. It’s a cool idea but would probably work best if they were visible constantly. I do really like the field design keeping the branded logo near the top to maintain authority.

Progress Checkout

Breadcrumbs and progress bars are super common in checkout forms. They let the user know how far along they are and how much longer it’ll take before they complete the purchase.

This checkout form places the progress bar front & center directly in the user’s eyeline. It uses clear label text to show exactly where they are and how much further they need to go. All other form fields use this same clear design style so the typography is stellar.

I definitely think this checkout field could fit into any website with ease.

CC Details

Developer Momcilo Popov crafted this pristine CC checkout field with a heavy dose of minimalism. The custom credit card field uses dot characters for security and separates your CC number into packs of 4 by default.

The dog photo could work reliably for a pet shopping app, but you could just as easily replace this with anything. The checkout field is incredibly robust and should be easy enough to tinker with if you’d like to replicate it elsewhere.

Embedded Checkout

While searching for checkout forms I stumbled onto this embedded form which really caught my eye. It’s a good example of how you can build custom checkout fields that look great without worrying about security or payment merchants.

This does rely on a 3rd party platform but it also embeds the form, handles the payment, and offers a custom invoice receipt to boot. This certainly offers some UI inspiration but it’s also a fantastic choice for developers who wanna shave some time in their project cycle.

Credit Card Animation

Last but not least is this amazing animated CC form using a fully visualized credit card. As you fill out the form each field updates on the card in real time.

Best of all it uses a custom flipping animation to rotate between front & back. So when you focus on the CCV field the card automatically rotates to show the back area. Really cool effect and definitely unique to this form.

So this collection covers the 10 coolest checkout forms I could find, but I’m sure there are dozens of others out there. If you’ve built one yourself or if you know of any others feel free to share in the discussion area below.