how to edit contact form

• 

  9thartwave · Member · Feb 9, 2013 at 11:15 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  9thartwave · Member · Feb 12, 2013 at 12:47 am

  • Copy link

  any help?

• 

  dcoleonline · Staff · Feb 12, 2013 at 1:58 am

  • Copy link

  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 · Member · Feb 12, 2013 at 9:16 am

  • Copy link

  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>

• 

  raincoaster · Member · Feb 12, 2013 at 9:18 am

  • Copy link

  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 · Member · Feb 12, 2013 at 9:21 am

  • Copy link

  done, thanks

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

• 

  9thartwave · Member · Feb 17, 2013 at 12:59 pm

  • Copy link

  ???

• 

  designsimply · Member · Feb 21, 2013 at 6:56 pm

  • Copy link

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

• 

  9thartwave · Member · Feb 22, 2013 at 12:21 am

  • Copy link

  CONTACT

• 

  designsimply · Member · Feb 24, 2013 at 5:55 am

  • Copy link

  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.