Docs

[ZerotoOne]

hey there,

I’am pretty upset with the standard design of contact form 7, but I just saw some examples of nicely styled ones…it should be possible to copy the css/style of those, isn’t it? I’d love to get the style of the last contact form on this site: http://themes.dfd.name/ronneby/shortcodes/contact-form-7/

thanks for your help!

[Rupok]

Hi there,

You can follow this to style Contact Form 7 – http://contactform7.com/styling-contact-form/

Also there is some plugin for this – https://wordpress.org/plugins/contact-form-7-style/

However it would be better if you just add some custom CSS. The classes are same for the form so you should be able to copy the style and use as custom CSS but I can’t guarantee as I am not sure about the source you are using.

Thanks!

[ZerotoOne]

thank you, could you help me to find the code snippets I need?
I’d like to get this style http://prntscr.com/cfwfnx

I really appreciate your help!

[Rupok]

Hi there,

There are some custom classes ther on your example link so it won’t work just by copy-pasting. However you can try like this :

.wpcf7 form input, .wpcf7 form textarea, .wpcf7 form select {
  background-color: rgba(244, 244, 244, 0.1);
}

Let’s use this selector to add your styling. You might need to add some padding as well.

Cheers!

[ZerotoOne]

so how do I give my contact form a class, I found the class .dfd-contact-from-style-3 for my desired style, is that right?

[ZerotoOne]

.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 input[type="email"],
.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 input[type="text"],
.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 textarea,
#side-area.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 input[type="email"],
#side-area.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 input[type="text"],
#side-area.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 textarea,
.row .background--dark .wpcf7-form .dfd-contact-from-style-3 input[type="email"],
.row .background--dark .wpcf7-form .dfd-contact-from-style-3 input[type="text"],
.row .background--dark .wpcf7-form .dfd-contact-from-style-3 textarea {
    background: rgba(244, 244, 244, 0.1);
    border-color: transparent;
}

.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 input[type="submit"],
#side-area.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 input[type="submit"],
.row .background--dark .wpcf7-form .dfd-contact-from-style-3 input[type="submit"] {
    background: transparent;
    color: #fff;
    border-color: transparent;
}

.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 input[type="submit"]:hover,
#side-area.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 input[type="submit"]:hover,
.row .background--dark .wpcf7-form .dfd-contact-from-style-3 input[type="submit"]:hover {
    color: #8a8f6a;
}

.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 ::-webkit-input-placeholder,
#side-area.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 ::-webkit-input-placeholder,
.row .background--dark .wpcf7-form .dfd-contact-from-style-3 ::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 :-moz-placeholder,
#side-area.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 :-moz-placeholder,
.row .background--dark .wpcf7-form .dfd-contact-from-style-3 :-moz-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 :focus::-webkit-input-placeholder,
#side-area.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 :focus::-webkit-input-placeholder,
.row .background--dark .wpcf7-form .dfd-contact-from-style-3 :focus::-webkit-input-placeholder {
    color: transparent;
}

.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 :focus:-moz-placeholder,
#side-area.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 :focus:-moz-placeholder,
.row .background--dark .wpcf7-form .dfd-contact-from-style-3 :focus:-moz-placeholder {
    color: transparent;
}

.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 ​
:focus::-moz-placeholder,
#side-area.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 ​
:focus::-moz-placeholder,
.row .background--dark .wpcf7-form .dfd-contact-from-style-3 ​
:focus::-moz-placeholder {
    color: transparent;
}

.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 ​
:focus:-ms-input-placeholder,
#side-area.dfd-background-dark .wpcf7-form .dfd-contact-from-style-3 ​
:focus:-ms-input-placeholder,
.row .background--dark .wpcf7-form .dfd-contact-from-style-3 ​
:focus:-ms-input-placeholder {
    color: transparent;
}
.wpcf7 form .dfd-contact-from-style-3 {
    margin: 0 -10px;
}

.wpcf7 form .dfd-contact-from-style-3 p {
    text-align: center;
    padding: 0 10px;
    margin-bottom: 15px;
}

.wpcf7 form .dfd-contact-from-style-3 input[type="text"], .wpcf7 form .dfd-contact-from-style-3 input[type="password"],
.wpcf7 form .dfd-contact-from-style-3 input[type="date"], .wpcf7 form .dfd-contact-from-style-3 input[type="datetime"],
.wpcf7 form .dfd-contact-from-style-3 input[type="email"], .wpcf7 form .dfd-contact-from-style-3 input[type="number"],
.wpcf7 form .dfd-contact-from-style-3 input[type="search"], .wpcf7 form .dfd-contact-from-style-3 input[type="tel"],
.wpcf7 form .dfd-contact-from-style-3 input[type="time"], .wpcf7 form .dfd-contact-from-style-3 input[type="url"],
.wpcf7 form .dfd-contact-from-style-3 textarea {
    margin-bottom: 0;
    background: #f4f4f4;
    border-color: transparent;
    border-radius: 5px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.wpcf7 form .dfd-contact-from-style-3 input[type="submit"] {
    display: inline-block;
    width: auto;
    padding: 10px 20px;
    background: transparent;
    color: #28262b;
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
    transition: color .3s ease;
}

.wpcf7 form .dfd-contact-from-style-3 input[type="submit"]:hover {
    color: #8a8f6a;
}

.wpcf7 form .dfd-contact-from-style-3 .ajax-loader {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

.wpcf7 form .dfd-contact-from-style-3 .wpcf7-not-valid-tip {
    padding-left: 15px;
}

[ZerotoOne]

This should be the necessary css, noch I have to implement it into my contact form…how do I do that, considering that the class names are not the default ones?

[Christopher]

Hi there,

Please wrap your contact form within <div></div> tags.

<div class="dfd-background-dark">
<p>Your Name (required)<br />
    [text* your-name] </p>

<p>Your Email (required)<br />
    [email* your-email] </p>

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>

</div>

Hope it helps.

[ZerotoOne]

this did not help, nothing changed :/

[Rupok]

Hi there,

Thanks for writing back. Not sure what change you are expecting but the above suggestion was to add the class that you are asking. Now you can use the class to style your form. You can’t use the other site’s code because it has more class and IDs associated with the code that you don’t have. I have already shared an example on previous reply (#1167693) that you can follow to add your styles without looking for the other site’s code.

Hope this makes sense.

[Author]

Posts