Contact Form 7 Style

Hi,
I have no html experience, you can help to make the form style under the theme “Demo Electronics” ?
1. How to change button color and shape? As in template
2. How do I set up a form style like MailChimp for WP, only for Contact Form 7 ?

Screen – how to do also only in Contact Form 7

Thanks in advance for your help!

Attachments:

You must be logged in to view attached files.

Hello,

Add this code to the Theme Settings > Custom CSS:

.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=password], .wpcf7-form input[type=search], .wpcf7-form input[type=number], input[type=url], .wpcf7-form input[type=tel],.wpcf7-form input[type=date], .wpcf7-form select,.wpcf7-form textarea {
    width: 100%;
    max-width: 100%;
    border: 2px solid rgba(129,129,129,.2);
    background-color: transparent;
    font-size: 14px;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    vertical-align: middle;
    padding: 0 15px;
    height: 42px;
    transition: border-color .5s ease;
    -webkit-transition: border-color .5s ease;
    border-radius: 30px;
}
.wpcf7-form[type=submit],.wpcf7-form button {
    font-size: 13px;
    line-height: 18px;
    padding: 12px 20px;
    background-color: #f3f3f3;
    color: #3E3E3E;
    display: inline-block;
    position: relative;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 0;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;
    -webkit-transition: color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
background-color: #006aa9;
    color: #fff;
border-radius: 30px;
}

If the code does not work please provide your site admin access and page URL with the contact form.

Best Regards

Added CSS, nothing has changed.

Hello,

Please provide me with full admin access to contact form and custom CSS. Also perhaps it would be better http://prntscr.com/lhjlur

Do you want to set all the fields inline?

Best Regards

1. I want the top to do as in the picture 1

(- – – – Field- – – – )
(- -Field- -)(-button-)
– – privacy policy – –

2. And at the bottom as the pictures 2

(- -Field- -)(-button-)
– – privacy policy – –

Thus, under the style “Demo Electronics”

Attachments:

You must be logged in to view attached files.

Why when I add a form, block configuration is broken?

Attachments:

You must be logged in to view attached files.

Hello,

Nevermind for the password. I know this and I insert excepting these. The forms have been done. I have not caught the idea regarding “block configuration is broken” What do you mean?

Best Regards

[Author]

Posts