usability - Is it a bad idea to have all credit card fields on one horizontal line?

My checkout form is a bit long and I don't like it, so I placed credit card fields on one line. Is it a bad idea to have all the fields on one line horizontally like the image below?

Answer

@ColinSharpe is right, vertically aligned is much easier on the eyes. That said, it's not a horrible design in the sense that you don't have to scroll down to see everything. That is a plus for a lot of users. You simply would need to make sure that it's responsive when the user resizes their browser to a smaller width or if they are on a device that isn't wide enough.

With respect to responsive web design, you should always ask yourself, "What happens when my user uses a device or browser whose viewable area is smaller than the minimum width of my page or form?" Unless you've already planned for it, it's most likely going to jut down to the next line throwing off your design or it may just disappear off the screen depending on how your CSS is.

Chris Coyier of CSS-Tricks and CodePen created a Simple Responsive Form demo that changes its look as the width of the viewable area changes.

Jake Rocheleau wrote an article called Creating Stylish Responsive Form With CSS3 And HTML5 and created a demo as well.

You can also check out Media Queries to see some great examples of full responsive web designs.