Expand contact form width

• 

  veraskocic · Member · Jan 19, 2017 at 7:26 am

  • Copy link
  • Add topic to favorites

  Hello! My contact form needs some work – I would like to make the fields wider and have the contact form left justified. Is there CSS code to assist in making these changes please?

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

• 

  omkarbhagat · Member · Jan 19, 2017 at 7:58 am

  • Copy link

  Hi there,

  I see your blog is set to private and we volunteers cannot see it. So I’ll add the modlook tag to this post so that someone from the staff can assist you :)

• 

  supernovia · Staff · Jan 19, 2017 at 4:49 pm

  • Copy link

  Hi @veraskocic,

  Try this instead of your existing CSS.

  #contact-form-145 {
  	text-align: left;
  }
  
  /* make the inputs wide */
  #contact-form-145 select,
  #contact-form-145 input,
  #contact-form-145 textarea {
      width: 100%;
  }
  
  /* make the submit button normal */
  #contact-form-145 input[type="submit"] {
  	width: auto;
  }

  Also, I noticed your “message” field is just a text field instead of a comment box. Please edit the form to fix that so folks will have enough room to type a full message.

• 

  veraskocic · Member · Jan 23, 2017 at 3:26 am

  • Copy link

  Thank you – all great except for the checkbox “Receive news and insights via email”, which appears with the checkbox on top and text “Receive news and insights via email” below, rather than in one line. Can you assist? TIA

• 

  supernovia · Staff · Jan 24, 2017 at 2:11 am

  • Copy link

  Maybe something like this?

  #contact-form-145 input.checkbox {
      float: left;
      width: 1em;
      height: 1.5em;
      margin-right: .5em;
  }

• 

  veraskocic · Member · Jan 24, 2017 at 6:32 am

  • Copy link

  Woot! Thanks so much @supernovia

• 

  supernovia · Staff · Jan 24, 2017 at 7:26 am

  • Copy link

  Cheers @veraskocic :)