Contact Form CSS

• 

  santanaproperties · Member · Jan 31, 2017 at 8:55 pm

  • Copy link
  • Add topic to favorites

  Hey guys!

  I was just wondering if it was possible to change the layout of the contact form. I would love if I could make this contact form at the top look like this one http://www.199pearl.com/

  Let me know if that is possible.
  Thank you!

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

• 

  nizamilputra · Member · Feb 1, 2017 at 7:02 am

  • Copy link

  Hi santanaproperties,

  Please try to use this css,

  .contact-form > div {
      display: inline-block;
  }
  .contact-form > div:nth-child(1){
      margin-right: 20px;
  }
  .contact-form > div:nth-child(4){
      width: 100%;
  }

  I made name and email field on equal horizontal position, for confirmation buyer’s agent and comment field next below them.

  Let me know if you need another help.

  Thank you.

• 

  santanaproperties · Member · Feb 1, 2017 at 9:46 pm

  • Copy link

  Thank you!!

  I just changed the comment field. Could you make all 3 fields go across with the submit button down below centering the entire thing? Can I change what the Submit button says and take it out of italic?

  Also, just a couple more fixes if you have the time.
  Can you make the text fields turn white when you click them?
  And the submit button turn white when you hover over it.

  Thank you so much!!

• 

  santanaproperties · Member · Feb 1, 2017 at 9:52 pm

  • Copy link

  Maybe get rid of the green line too if I can!

• 

  nizamilputra · Member · Feb 2, 2017 at 4:19 am

  • Copy link

  Sure, please remove the css code above with this one:

  .pique-panel-content form{
  max-width: 100%;
  border-top: none;
  }
  .contact-form > div {
  display: inline-block;
  }
  .contact-form input[type=’text’]:active,
  .contact-form input[type=’email’]:active,
  .contact-form input[type=’submit’]:hover{
  background: white;
  }
  .contact-form input[type=’submit’]{
  font-style: italic;
  }

  If you want change “Submit” text you can add submit_button_text property on contact form shortcode. You need to switch to HTML tab to see the shortcode. The shortcode will be [contact-form submit_button_text='Take it out']. Please see this image for clear instruction https://cloudup.com/c5iQzr8Kp9s

  Let me know if you need another help.

  Thank you.

• 

  nizamilputra · Member · Feb 2, 2017 at 4:21 am

  • Copy link

  Sorry, repost to make text more beautiful :D

  —
  Sure, please remove the css code above with this one:

  .pique-panel-content form{
  max-width: 100%;
  border-top: none;
  }
  .contact-form > div {
  display: inline-block;
  }
  .contact-form input[type='text']:active,
  .contact-form input[type='email']:active,
  .contact-form input[type='submit']:hover{
  background: white;
  }
  .contact-form input[type='submit']{
  font-style: italic;
  }

  If you want change “Submit” text you can add

  submit_button_text 

  property on contact form shortcode. You need to switch to HTML tab to see the shortcode. And the shortcode will be

  [contact-form submit_button_text='Take it out']

  .

  Please see this image for clear instruction https://cloudup.com/c5iQzr8Kp9s

  Let me know if you need another help.

  Thank you.

• 

  santanaproperties · Member · Feb 2, 2017 at 1:24 pm

  • Copy link

  Thanks so much! The text boxes don’t turn white though when you click them. Is there a way to fix that?

  And one last thing, how would I change where you get redirected once you hit the submit button.

  Thank you very much for your help!

• 

  nizamilputra · Member · Feb 2, 2017 at 2:20 pm

  • Copy link

  Oops sorry, please change this block

  .contact-form input[type='text']:active,
  .contact-form input[type='email']:active,
  .contact-form input[type='submit']:hover{
     background: white;
  }

  into this:

  .contact-form input[type='text']:focus,
  .contact-form input[type='email']:focus,
  .contact-form input[type='submit']:hover{
     background: white;
  }

  And one last thing, how would I change where you get redirected once you hit the submit button.

  I’m afraid it can’t. But I’m not sure, maybe staff will help to answer this.

• 

  kathrynwp · Staff · Feb 2, 2017 at 4:37 pm

  • Copy link

  how would I change where you get redirected once you hit the submit button.

  It isn’t possible to change that, sorry.