Why does the Jetpack contact 'email' form incorrectly display the input field

• 

  scoopster1 · Member · Jan 13, 2015 at 4:40 pm

  • Copy link
  • Add topic to favorites

  Jetpack ‘add contact form’ incorrectly displays the type=’email’ field. The contact form works fine except that the field to input the ’email’ is right justified and placed inline with the next input field title. Moving the html around does not fix the problem. It appears to be an incorrect description of the type=’email’ somewhere in the code. This form is found on my website at:
  http://www.scoopsandgrinds.com/service/business-catering/

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

• 

  shawnajroberts · Member · Jan 22, 2015 at 11:35 pm

  • Copy link

  Hi there!

  We just tested the Jetpack form code and weren’t able to reproduce this issue. It looks like you’ve included this in the CSS styling of your site:

  .contact-form input[type="email"] {
  width: 49%;
  float: right;
  }

  The “float: right;” there is what’s causing this to happen. You or your developer should take a look at your CSS styles. You may have set this up for a different form you used on your site without adding an identifying id, which is causing it to affect all email inputs.

  Let me know if I can help with anything else!

• 

  scoopster1 · Member · Jan 23, 2015 at 12:33 am

  • Copy link

  Thanks for finding the troubling code – I new to css and cannot locate the guilty file – I’d appreciate the filename, I do not see this code in the Jetpack Plugin or WordPress CSS files. Can you direct me?

• 

  shawnajroberts · Member · Jan 23, 2015 at 1:14 am

  • Copy link

  Sure! It looks like this is in main.css. I was able to find this using the Inspector in my browser on the front end of your site. Here’s some information about how to use the inspector to dig into your sites code:

  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/