Need help position contact form fields

• 

  erichagarty · Member · Apr 26, 2012 at 3:16 am

  • Copy link
  • Add topic to favorites

  Hi there,

  I’ve got the Custom CSS upgrade, and the page I need help with is located at: http://ajgalestest.wordpress.com/volunteer/

  I’d like the check boxes to be displayed to the right of the contact information fields, but I can’t find a unique identifier for each label/input. For example, if I plug in .checkbox {margin-left:350px;margin-top:-200px;} it moves each line of text boxes to that location, but they overlap each other.

  Thanks for any help.

  -Eric

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Apr 26, 2012 at 7:33 pm

  • Copy link

  First, I wouldn’t recommend moving the checkboxes to the right. Forms usually consistently have them on the left.

  If you still want to move them, you can do it with some absolute positioning. It requires that you set a width for the labels. Here’s one possible way to do it:

  .contact-form label.checkbox {
  	position: relative;
  	width: 310px;
  }
  
  .contact-form label.checkbox input.checkbox {
  	position: absolute;
  	right: 0;
  }

• 

  erichagarty · Member · Apr 29, 2012 at 8:56 pm

  • Copy link

  Sorry, I see now I wasn’t very clear in what I meant. I’m hoping to move the entire check box area (label included) to the right of the input forms. My hope is to have it look like this: http://www.kathleengkane.com/get-involved/

• 

  auxclass · Member · Apr 29, 2012 at 9:15 pm

  • Copy link

  Above my pay-grade but you need to make the Form two columns – that takes a bit of work with html – don’t know if you can put html inside a Form.

• 

  justpi · Member · Apr 29, 2012 at 10:33 pm

  • Copy link

  Yes you can. After you add all the fields, you’d modify it like this in the HTML post or page editor:

  OPENING CONTACT-FORM SHORTCODE HERE
  <div style="float:left;">
  LEFT-COLUMN SHORTCODES HERE
  </div>
  <div style="float:right;">
  RIGHT-COLUMN SHORTCODES HERE
  </div>
  <br style="clear:both;" />
  CLOSING CONTACT-FORM SHORTCODE HERE

• 

  designsimply · Member · May 2, 2012 at 1:34 am

  • Copy link

  That should work. You may also want to reposition the submit button using some CSS like this:

  .pushbutton-wide {
      position: absolute;
      bottom: 0;
      right: 0;
  }

• 

  erichagarty · Member · May 6, 2012 at 10:21 pm

  • Copy link

  That worked perfectly. Thanks so much!