Customizing Contact Form with CSS

• 

  microdatalogic · Member · Mar 20, 2017 at 5:21 pm

  • Copy link
  • Add topic to favorites

  Hi,

  Is it possible to customize the following contact form so that the “Email Address” input field and the “Submit” button are on the same line?

  https://microdatalogic.com/promo/

  Thank you

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

• 

  thesacredpath · Member · Mar 20, 2017 at 11:50 pm

  • Copy link

  Hi there, I’ve limited this to 768px and wider screens/windows as narrower than that, things go a bit awry. See what you think.

  @media screen and (min-width: 768px) {
  .contact-form div {
    width: 80%;
  }
  #contact-form-305 {
    position: relative;
  }
  #contact-form-305 .contact-submit {
    position: absolute;
    top: 25px;
    right: 0;
    width: 18%;
  }
  }

• 

  microdatalogic · Member · Mar 21, 2017 at 12:08 am

  • Copy link

  It seems to be working wonderfully, thank you! The limit to 768px you imposed means that the button will be displayed underneath the input form on anything below that width, correct?

• 

  thesacredpath · Member · Mar 21, 2017 at 3:16 am

  • Copy link

  Great, and yes, that is right. Things return to the original design at 767px and narrower.

• 

  joaomino · Member · Mar 21, 2017 at 11:21 am

  • Copy link

  Very nice solution! =)

• 

  microdatalogic · Member · Mar 21, 2017 at 3:57 pm

  • Copy link

  Loving it, thank you so much!

• 

  thesacredpath · Member · Mar 22, 2017 at 12:50 am

  • Copy link

  You are welcome.