How To Style Contact Forms

Custom styled contact forms are one of the top customization requests I see from clients - and after my last project, I realized my own site didn't even have a custom form!! (What's that old saying about cobblers kids and shoes...?)

This week I took a deep dive on customizing contact forms and all the code names you need to know.

In this week’s tutorial, I cover the six major element names I use when customizing contact forms: 

  • The field names like name, email, and subject.

  • The form fields themselves so you can get creative with borders and backgrounds

  • The caption that shows up under those form fields

  • The labels for radio and checkbox options, because the standard setting makes these too dang tiny for me.

  • And finally, the big kahuna- the submit button - because those are a perfect place to add some style!

I created a free cheat sheet for this tutorial that lists all of those and has two premade contact form styles. One of them even shows you a cool 100% width effect for that submit button.

Anywho, enough talking about it - it's time to start coding! So check out the video below, and be sure to download the freebie too.