Contact Form Custom CSS

• 

  maribelcuizon · Member · Feb 1, 2017 at 1:35 am

  • Copy link
  • Add topic to favorites

  (Link to contact form above)

  I’m having trouble changing the widths of my contact form, aligning it in the middle, changing the color scheme, and such.

  After searching on the forums a bit, I’ve found parts of answers, but I’m wondering if there’s like a complete list out there of how I can modify every part of the contact form using CSS?

  Thanks!

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

• 

  nizamilputra · Member · Feb 1, 2017 at 5:57 am

  • Copy link

  Hi @maribelcuizon,

  I’m not sure if there are a complete list about how to modify contact form. But you can tell us here what exactly do you want, and we’ll try to help you then.

  Thank you.

• 

  staff-loquaciousloon · Staff · Feb 1, 2017 at 3:46 pm

  • Copy link

  Hi @maribelcuizon!

  Like @nizamilputra, I don’t know of a specificly published list, so knowing more about your plans will help us guide you :)

  That said, here are some example styles that might point you in the right direction. You can adjust them as needed, and let us know if you need more help. You can also use your browser tools to look for additional styles you can alter in similar ways :)

  /* text and text area widths */
  #contact-form-4 input,
  #contact-form-4 textarea {
  	width: 100%
  }
  /* align text to center (for labels) */
  #contact-form-4 {
  	text-align: center;
  }
   /* center text and textarea inputs */
  #contact-form-4 input,
  #contact-form-4 textarea {
  	margin: 0 auto 13px;
  }
  
  /* change button color */
  #contact-form-4 input[type="submit"] {
  	background-color: blue;
  }

  Note, these are using #contact-form-4 to specifically target the form currently on your contact page – other forms will have their own ID numbers, which you can grab from the browser tools I mentioned earlier by inspecting the form :)