beautiful contact form designs you can steal

6 Beautiful Contact Form Designs You Can Steal (CSS Examples)

Editorial Note: We may earn a commission when you visit links on our website.

Looking for web form design inspiration for your website?

With some simple tweaks, you can create online forms styled the way you want. In this article, we’ll show you some cool contact form design examples along with useful CSS code snippets that you can use on your website.

We’ll also show you a really handy no-code method for changing the layout of your forms. Ready? Let’s dive in!

How to Customize Your Contact Form Designs

You can customize your contact form designs by using custom CSS. Some WordPress form builders like WPForms also offer unique features like the Layout field that allows you to create multi-column forms.

If you have a WordPress site, be sure to install WPForms. Once you do, you’ll need to create at least one form so you can see and test the code snippets we’ll discuss in this article. To get started with creating a contact form, see our tutorial on how to create a simple contact form.

With WPForms, you can either customize the styles of all forms on your site or you can style each one individually. Here are two methods of doing this:

Method 1: Making Sitewide Customization

Making sitewide customizations to your forms is pretty easy once you have the CSS snippets you want to use.

All you’ll need to do is copy the CSS snippets you want to use and paste them into your site using the WordPress theme customizer or the theme editor.

An even easier method is to use a plugin like WPCode, which allows you to paste different types of code snippets into your site.

WPCode add custom code

You may also have multiple forms on your website and want to change the styling to just one of them. We’ll show you how to do this next.

Method 2: Styling a Form Individually

If you need to customize a specific form, just find the unique ID of the form, and add it to your CSS snippet to make it specific to that form.

This is easy to do by looking at the shortcode of the form.

Find ID of a form

In the example above, the form ID is “4”, so in your code, you’ll enter #wpforms-4.

The ID attribute is a unique identifier generated by WPForms for this particular form, so the style won’t apply anywhere else.

For example, you may simply insert the following snippet at the beginning of the first code snippet.

div#wpforms-4 {background-color: transparent; !important}

For more details, you can see our beginner’s guide to styling your forms with CSS.

Contact Form Design Examples

Now, let’s take a look at some cool examples and the corresponding CSS for the contact form design, so you can recreate them on your site.

1. Pixpa

pixpa contact form design example

Using a simple contact form is a great choice if you want to avoid any complications your visitors may have while filling in your form. If you’re looking for a simple contact form design, Pixpa’s contact form is a great example.

They also use a contrasting color for their call to action that doesn’t blend in with the rest of the form design.

With WPForms, you can make some simple customization on your forms even if you’re not a CSS expert. Before saving the CSS code given below on your theme, feel free to make some simple tweaks to it, so it perfectly fits into your site design.

Contact Form Design CSS

/* Fields */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #aaa;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #aaa;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #aaa;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #aaa;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #aaa;
}
/* Button */
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button {
   background-color: #00C5BE;
   border: none;
   color: #fff;
   font-size: 1em;
   padding: 10px 50px;
   text-transform: uppercase;
   font-weight: normal;
}

2. Afobi

afobi contact form design

Along with the contact form, Afobi displays their email address on their contact page. On the page, the contact form is highlighted, suggesting that the best way to reach out is by filling in the form. They also gave their form a unique look by creating a rounded submit button.

If you want to offer an alternative method to contact you, then you might want to highlight the form on your contact page.

You can also test with various colors for your fields and make sure to use the best one that looks great on your page. You can use something like Canva’s Color Theory tool or ColourLovers to find the right colors to use on your site.

Contact Form Design CSS

/* Form Background */
.wpforms-form {
background-color: #FFFED1 !important;
}
/* Fields */
div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea {
background-color: #eee; /* Fill color */
}
/* Button */
div.wpforms-container-full .wpforms-form button[type=submit] {
border-radius: 50px; /* Rounded button edges */
width: 100px; /* Width and height must match */
height: 100px;

3. Melonfree

contact form design 2

Melonfree is a web consulting firm, and the design of its website reflects their creativity and design skills.

To make their contact form look unique and eye-catching, they’ve used a rounded corner design for their fields and placeholder text is italicized.

This design is a perfect choice for you if you want to give a geeky look to your form.

Contact Form Design CSS

/* Fields */
div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea {
   -moz-box-shadow: inset -3px -3px 10px #eee;
   -webkit-box-shadow: inset -3px -3px 10px #eee;
   box-shadow: inset -3px -3px 10px #eee;
   border-radius: 15px;
}
/* Button */
div.wpforms-container-full .wpforms-form button[type=submit] {
   -moz-box-shadow: inset -3px -3px 10px #cc870a;
   -webkit-box-shadow: inset -3px -3px 10px #cc870a;
   box-shadow: inset -3px -3px 10px #cc870a;
   background-color: #f7b31c; /* Fill color */
   color: white; /* Text color */
   border-radius: 15px; /* Rounded button edges */
   font-style: italic; /* Italicize text */
   padding: 10px 30px; /* Distance between text and border */
}

4. White Frontier

transparent contact form design example

Do you want to place a form on top of a background image?

Then you might want to make your form transparent. White Frontier uses a transparent form on its contact page, so its contact form perfectly blends with the background design.

When testing this design on your site, be sure to place an image on the background. Otherwise, you wouldn’t be able to see the form.

Contact Form Design CSS

/* Fields */
div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea {
    background-color: transparent; /* Remove background fill */
    text-transform: uppercase; /* Make text all uppercase */
    border-radius: 0; /* Remove corner curve */
    border: 2px solid #fff; /* 2px white border */
    color: #fff; /* White text */
    height: 45px; /* Increase input height */
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #fff;
}
/* Button */
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button {
   text-transform: uppercase;
   padding: 10px 60px;
   color: white;
   background: #444;
   font-weight: normal;
}

5. Noearaujo

contact form design 1

The main attraction of Noearaujo’s form is that instead of using text they use a cool icon for their button. You can easily use an icon for your button by following the below steps.

Step 1: Download an icon for your button. To find the right icons of your choice, you may use Flaticon.com

Step 2: In the CSS code below, make sure to replace the background image URL where it says http://example.com/youricon.svg

Step 3: Save the CSS in the additional CSS file of your theme.

Contact Form Design CSS

div.wpforms-container-full .wpforms-form button[type=submit] {
   background-image: url(http://example.com/youricon.svg);
   background-repeat: no-repeat;
   background-position: center;
   color: transparent; /* Hide button text */
   padding: 20px 70px;
   background-color: #00f3ff;
}

6. Evoke

evoke contact form design example

Evoke uses a form design that resembles a classic letter card. The design is unique so it easily grabs the attention of the website visitors. The font looks classy and the letters look like they were written with a vintage typewriter.

Contact Form Design CSS

div.wpforms-container-full .wpforms-form .wpforms-field {
    display: flex; 
    align-items: top; /* Try changing this to center if you like it better! */
}
div.wpforms-container-full .wpforms-form .wpforms-field label {
    min-width: 135px; /* Needs to be set to longest label (to keep inputs in a straight vertical line) */
    padding-right: 20px; /* This ensures a gap between label and input */
}
div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select {
    border: none;
    border-bottom: 1px solid #888;
    background: transparent;
}
/* Set background color for entire form */
div.wpforms-container-full {
    background-color: #eee; 
}
/* For title area only */
div.wpforms-container-full .wpforms-form .wpforms-title {
    background-color: orange;
    color: white;
    text-transform: uppercase;
    padding: 10px 20px;
}
/* Wrapper for all fields (not title) -- adding padding to make it line up with title (left) and keep it away from container edge */
div.wpforms-container-full .wpforms-form .wpforms-field-container {
    padding-left: 20px;
    padding-right: 20px
}
div.wpforms-container-full .wpforms-form textarea {
    background-color: #ddd;
    border: none;
}
/* Button */
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    padding: 10px 20px 20px 0;
    text-align: right;
}
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: orange;
    color: white;
    padding: 10px 30px;
    letter-spacing: 4px;
    font-weight: normal;
    text-transform: uppercase;
}

We hope this article inspired you to create beautiful contact form designs on your site.

Bonus: No-Code Method for Designing Form Layout

One of the most important components of a form styles is the layout of your forms.

Like other aspects of design, you can apply CSS to change your form layouts. But WPForms includes an easier way.

With WPForms Pro, you can use the Layout field to add multiple columns to your form.

Simply find the Layout field in the Fancy Fields section of the form builder

choose layout field

Drag and drop the Layout field onto your form to create multiple columns. Then, you can organize your fields into different columns by dropping them into a specific column area.

fields in two columns

WPForms gives you 8 different presets to choose from, allowing you to select a 2-column, 3-column, or even a 4-column of form. Simply click on the Layout field to open the preset options on the left-hand side of the form builder

click layout field

As you’ll see, you’re free to choose different amounts of columns, with each column being of equal width or varying widths. Select the preset that fits best into your design, and you’re good to go!

You can easily create layouts as simple or as complex as you like without touching a single line of CSS code.

layout form preview

The Layout field is a game changer when it comes to customizing your forms, as it even allows you to add multiple Layout fields within a single form with separate layouts.

Pretty neat, huh?

That wraps it up for our guide to creating and customizing beautiful form templates!

Next, Customize Button Styles With CSS

If you want to tweak button styles with CSS, here’s how to customize button styles with CSS. You can also improve your form conversion rates with our guide to creating Multi-step forms in WordPress.

Ready to build powerful, flexible WordPress forms? Get started with the best WordPress forms plugin today.

Create Your WordPress Form Now

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.