changing the css – to get a form in the widget

  • say_hello

    (@say_hello)


    9 years, 6 months ago

    hello dear wp-experts hello dear contact7form-experts

    i run wp and i recently have added the contact form 7

    see https://wordpress.org/plugins/contact-form-7/

    now i have to configure it.

    found out a website:
    http://buzztone.com.au/styling-contact-form-7-forms/

    question: can i configure it – so that i have a form – shown in a widget!?`

    see tis here http://buzztone.com.au/styling-contact-form-7-forms/
    <blockquote>
    Using CSS to change the appearance of the default CF7 form
    </blockquote>

    Using the techniques described in this article, we can use the following CSS to change the appearance of the default CF7 form.

    .wpcf7-form {
	background:#dcc8a5;
	border:2px solid #f6efdf;
	border-radius:7px;
	width:345px;
	padding: 10px 20px;
	margin-bottom:10px;
}

.wpcf7-form input,
	#wpcf7-f235-p1277-o2 .wpcf7-form textarea{
	background:#f6efdf;
	border:3px solid #ccb58c;
	border-radius:7px;
	width:300px;
    margin: 4px 0 8px 0;
    padding: 5px 7px;
	color: #4f4f4f;
    font-size: 14px;
    vertical-align: middle;
}

.wpcf7-form p {
	color:#4f2a0f;
	margin-top:10px;
	margin-bottom:10px;
}

.wpcf7-form .wpcf7-submit {
	background:#4f2a0f;
	border-radius:7px;
	cursor:pointer;
	width:100px;
	margin:7px 0;
	padding: 5px 15px;
	color:#fff;
}

    Using the changed CSS given above, the default CF7 form now looks as shown below:
    see
    http://buzztone.com.au/styling-contact-form-7-forms/

    love to hear from you

Viewing 1 replies (of 1 total)
  • Neil Murray

    (@buzztone)

    9 years, 6 months ago

    @say_hello – As the article you refer to makes clear, “You will need to be skilled at using HTML and CSS to follow along in this article. If that description does not fit you, you can learn all you need to know about both HTML and CSS at http://www.w3schools.com/ and come back to this article when you’ve done that. You will also need to be skilled at using Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail.”

    You can’t copy & paste the CSS​​​ provided and expect that to work in your particular situation.

Viewing 1 replies (of 1 total)
  • The topic ‘changing the css – to get a form in the widget’ is closed to new replies.