WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

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

by Shahzad Saeed on Jul 27, 2017

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 so you can use them on your own website.

If you’d rather not have to edit CSS code, check out our guide on how to style your forms with the CSS Hero plugin (no coding required).

How to Customize Your Contact Form Designs

Before we get started, be sure to install WPForms on your site. Make sure to create at least one form on your site so you can see and test the live changes using the theme’s customizer panel. To create 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.

Method 1: Making Sitewide Customization

Customizing the style is pretty easy once you have the CSS snippets you want to use. All you need to do is to copy the most appropriate CSS snippets for your site and paste it into your Additional CSS section in the customize panel by navigating to Appearance » Customize » Additional CSS.

additional css

Then just click Save & Publish, and you’re done.

Method 2: Styling a Form Individually

If you need to customize a specific form, just find the unique ID of your form, and make customization based on it.

inspect element

To find the form ID, take your mouse to any field in the form, right click » Inspect Element.

Now the browser screen will split, and you will see the source code of the page. In the source code, you need to locate the starting line of the form code.

As you can see in the screenshot above, our contact form code starts with the line:

<div class="wpforms-container wpforms-container-full" id="wpforms-14">

We will use this ID in our CSS to style our contact form. 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-14 {background-color: transparent; !important}

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

Now let’s take a look at some cool examples and the corresponding contact form design CSS 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 on 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. In 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 your form in 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 a tool like ColourLovers or Canva’s color tool to find the right colors to use on your site.

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: #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 their website reflects their creativity and design skills.

In order to make the contact form look unique and eye-catching, they use a rounded corner design for their fields and placeholder text are 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 their contact page, so their 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.

If you want to tweak button styles with CSS, read how to customize button styles with CSS.

What are you waiting for? Get started with the best WordPress forms plugintoday.

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

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.