Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

how to edit contact form

  1. 9thartwave
    Member

    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?

    The blog I need help with is 9thwavegallery.wordpress.com.

  2. 9thartwave
    Member

    any help?

  3. dcoleonline
    Staff

    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.

  4. 9thartwave
    Member

    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>

  5. raincoaster
    Member

    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.

  6. 9thartwave
    Member

    done, thanks

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

  7. 9thartwave
    Member

    ???

  8. designsimply
    Staff

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

  9. 9thartwave
    Member

    http://9thartwave.com/contact/

  10. designsimply
    Staff

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags