THRIVE WEB DESIGN
We're based in Burleigh Heads on the Gold Coast, Australia

WordPress Contact Form 7 – Fun theme

08.18.10 Posted in CSS, Forms, The Lab by 7 Comments

Contact Form 7 is a super flexible form generator that we use on nearly every site but the default styling is non existant.  Here is a bit of css and a couple images to over ride the default styling.

Here is a Demo

Your Name (required)

Your Email (required)

Subject

Your Message


To style your form you need to add this css code to your main site CSS file and upload the images to your images folder inside your theme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/*------------------ Contact Form 7 Overide ---------------------*/
.wpcf7-form input, .wpcf7-form textarea{
    padding:10px;
    color:#8e8e8e;
    font-family:Arial, Helvetica, sans-serif;
    font-size:22px;
    background-image:url("images/form-bg.png");
    border:none;
    border-right:solid 1px #CCC;
    border-bottom:solid 1px #CCC;
}

.wpcf7-form input.wpcf7-submit{
    background-color:transparent;
    background-image:url("images/form-send.png");
    background-repeat:no-repeat;
    border:medium none;
    color:#FFFFFF;
    font-family:helvetica,arial;
    font-size:18px;
    font-weight:bold;
    height:62px;
    padding-top:0;
    position:relative;
    text-align:center;
    text-shadow:0 0 3px #8D6D6F;
    text-transform:uppercase;
    width:128px;
}

.wpcf7-form input.wpcf7-submit:hover{
    background-position:0 -96px;
    cursor:pointer;
}

.wpcf7-form .wpcf7-validation-errors{
    border:none;
    background-color:#fffd75;
    margin:0;
    padding:20px;
    border-radius:10px;
}

.wpcf7-form .wpcf7-mail-sent-ok{
    border:none;
    background-color:#abf779;
    margin:0;
    padding:20px;
    border-radius:10px;
}

.wpcf7-form .wpcf7-mail-sent-ng{
    border:none;
    background-color:#fcb3b8;
    margin:0;
    padding:20px;
    border-radius:10px;
}

.wpcf7-form span.wpcf7-not-valid-tip{
    border:none;
    background-color:#fcb3b8;
    padding:10px;
    border-radius:10px;
}

.wpcf7-form .fleft{
    float: left;
}

.wpcf7-form .mright20{
    margin-right: 20px;
}

.wpcf7-form .clear{
    clear: both;
}

And here are the images.

You may also want to change the loading gif. Seeing as it’s embedded in the code you can’t fix it with css.

Add this to your functions.php and create your own colour coded loading gifs here ajaxload.info or preloaders.net

1
2
3
4
5
6
7
8
9
/* Custom ajax loader */
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
function my_wpcf7_ajax_loader () {
    return get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
}

7 Responses

  1. I used the above successfully until I went back to my theme builder and added a sidebar on the right. I updated the style.css to contain the override code for WP Contact Form. Activated the theme. Then the nice effect your code made went away. Since, I have gone back to the full sheet with no sidebar that shows your style. Have you noticed that problem?

    Also, do you know of a way to nudge the send button over so it centers properly?

    Thanks,

    Carol

    • Dean says:

      Hi Carol!

      Looks like it’s working for you.

      I would suggest not centering it though. It looks better left aligned. If you look at the code there is hidden loading gif next to the button. That is why it’s not right in the center.

  2. This really transforms the contact form 7 default look – great job – have applied this to one of our client websites. Thanks :)

  3. Celeste says:

    Hi, there! Sooo close….!

    I have the line-height set to 200% for this site and the text on this page “Your Name”, etc) is inheriting that. How can I override it?

    If I try to add any html to the contact page (Your Name (required)) I get a big ol error: Warning: Cannot modify header information)

    I would be so grateful for any assistance!

  4. Carol Magalhães says:

    Thank you! Works like a charm ;)

  5. Victor says:

    Hey dude!

    I’ve been looking all over the internet for someone to help me with this form.

    You can see the form on my website next to the navbar, it’s ugly and basic I know, can you help me spice this one up? The form is a “Call me” in Swedish.

    Bests! Please respond to my mail.

  6. Thank you, this is exactly what I needed.

Leave a Reply