Contact form label position is inconsequent

• 

  sjoerdmolenaar · Member · Sep 12, 2017 at 10:42 am

  • Copy link
  • Add topic to favorites

  I am working with the affinity template. The contact form is not how I’d would like to see it. The labels for the fields are inconsequent. For ‘name’, ’email’ and ‘website’, the label is in the field. For the ‘reaction’ field the label is above it. Is there a way to change the location of all the labels to get them in the same position relative to the corresponding field?

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

• 

  shubhamgmath · Member · Sep 12, 2017 at 2:55 pm

  • Copy link

  Hi @sjoerdmolenaar
  
  you need to add the below given css code if you want the labels inside the fields means position as absolute

  //code need to be added
  label.grunion-field-label.textarea {
  position: absolute;
  left: .8em;
  top: .5em;
  }

  if you want labels to be like ‘reaction’ means position to be relative then
  change this code
  //old code that need to be changed
  .contact-form label.absolute {
  position: absolute;
  left: .8em;
  top: .5em;
  }

  //new code to be added in place of old one
  .contact-form label.absolute {
  position: relative;
  }

  this will help you out to get all labels position same.

• 

  sjoerdmolenaar · Member · Sep 12, 2017 at 4:44 pm

  • Copy link

  Thanks a lot, that will help!

• 

  shubhamgmath · Member · Sep 12, 2017 at 4:48 pm

  • Copy link

  Your welcome @sjoerdmolenaar

• 

  timethief · Member · Sep 12, 2017 at 4:53 pm

  • Copy link

  @sjoerdmolenaar

  You require either a Premium upgrade or a Business Plan upgrade https://wordpress.com/pricing/ to edit the CSS on any site hosted by wordpress.com.

  Note 1: If you have the required upgrade you can use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can create a thread that will appear in the CSS Forum where you will get the help you need with CSS editing.

  Note 2: You can also post there prior to purchasing an upgrade to get an answer to whether or not what you want to do can be accomplished via CSS editing.