WordPress.com Forums » Topic: how to edit contact form

designsimply on "how to edit contact form"

designsimply — Sun, 24 Feb 2013 05:55:01 +0000

Here are some examples to get you going:

To align the labels and the boxes to the right:

.main-content .contact-form label {
	text-align: right;
	clear: both;
}
.main-content .contact-form input[type='text'],
.main-content .contact-form input[type='email'],
.main-content .contact-form textarea,
.main-content .contact-form input[type="submit"] {
	float: right;
}

To align the labels and submit button to the right and make the form elements wider:

.main-content .contact-form label {
	text-align: right;
}
.main-content .contact-form input[type='text'],
.main-content .contact-form input[type='email'],
.main-content .contact-form textarea {
	width: 97% !important;
}
.main-content .contact-form input[type="submit"] {
	float: right;
}

To adjust the container element for the contact form:

.main-content .contact-form {
	width: 300px;
	float: right;
}

Note: these examples will affect any contact form in a main content area.

9thartwave on "how to edit contact form"

9thartwave — Fri, 22 Feb 2013 00:21:08 +0000

http://9thartwave.com/contact/

designsimply on "how to edit contact form"

designsimply — Thu, 21 Feb 2013 18:56:42 +0000

Could you please link to the contact form you're working on?

9thartwave on "how to edit contact form"

9thartwave — Sun, 17 Feb 2013 12:59:44 +0000

???

9thartwave on "how to edit contact form"

9thartwave — Tue, 12 Feb 2013 09:21:29 +0000

done, thanks

any way to make the comments box smaller in order to align right and left with the other boxes?

raincoaster on "how to edit contact form"

raincoaster — Tue, 12 Feb 2013 09:18:47 +0000

You need to put that code in your CSS. Do you have the Custom Design Upgrade? If you don't, you won't be able to do this.

9thartwave on "how to edit contact form"

9thartwave — Tue, 12 Feb 2013 09:16:22 +0000

thanks, but where exactly shall i paste it? below is the code i use

<div class="pullquote">
<h3 style="text-align:center;">΄΄ every act of creation is first an act of destruction... ΄΄ P. Picasso</h3>
<ul style="margin-top:-2rem;">
</div>
<p class="pullquote"><img class="alignleft wp-image-390" alt="contact" src="http://9thwavegallery.files.wordpress.com/2013/02/contact1.jpg?w=860" width="418" height="222" />[contact-form][contact-field label='Name' type='name' required='1'/][contact-field label='Email' type='email' required='1'/][contact-field label='Website' type='url'/][contact-field label='Comment' type='textarea' required='1'/][/contact-form]</p>

dcoleonline on "how to edit contact form"

dcoleonline — Tue, 12 Feb 2013 01:58:56 +0000

Hi,

If you want the right edge of your comment box to line up with the right edge of the other boxes, try this CSS code:

.contact-form textarea {margin-left: 55px;}

If you do that and you want the Submit button on the right as well, try this CSS code:
.contact-submit {margin-left: 690px;}

I hope this helps.

9thartwave on "how to edit contact form"

9thartwave — Tue, 12 Feb 2013 00:47:53 +0000

any help?

9thartwave on "how to edit contact form"

9thartwave — Sat, 09 Feb 2013 11:15:28 +0000

hello, in my contact form I would like all titles and boxes to be aligned on the right. the comment box is not (the comment title is ok). shall i just use a bigger image? or shall i change something in the code?