Styling Contact Form

[jlebrun]

I am trying to make the contact form look different, and running into some obstacles.

My form is at the bottom of: http://www.zling.com/production/

I want to display the fields with

name
phone
email

in line like that, on top of each other.

Then the human check below it and the submit button either below that or off to the right of the human check.

Is that possible?

Also, how do I change the input text they is currently italic and light grey to black?
And can I make the input fields square instead of rounded?

Thanks!

[Veena]

You can use the below custom CSS in themeoptions –

#content .contact-form fieldset p {
  display: inline-block;
  width: 60%;
}
input, textarea {
  border-radius: 0 !important;
}

I have suggested custom CSS related to this page -https://www.livemeshthemes.com/enigmatic/contact-form-shortcode/
Because in yours the footer area is covering the contact form.

[jlebrun]

Thank you! That got me a lot closer.

Is there a way to move the Human check up above the Send button on the right beside the input fields?

https://www.zling.com/production/

And is there a way to change the text inside the fields “YOUR NAME” for example to black?

Thanks so much!

[Veena]

Pls insert the below custom CSS in themeoptions –

::-webkit-input-placeholder {
  color: #000;
}
::-moz-placeholder{
 color: #000;
}
:-ms-input-placeholder{
color: #000;
}

Its better to arrange the fields in a column instead of arranging the human check and submit button in second column and try to include the contact form in a section.
Otherwise it will affect the responsiveness of the contact form.

[jlebrun]

Okay, thanks. Sorry to be a pain, but I can’t get the Human Check and Submit button to display in the column w/ the other fields and be left-aligned properly. Also I would need the Human check font to be white.

https://www.zling.com/production/

[Veena]

I will recommend you to create a new contact form(https://www.livemeshthemes.com/enigmatic/contact-form-shortcode/)and apply the below custom CSS in themeoptions so that it looks like the attached enigmatic-contactform.png

#content .contact-form fieldset p {
  display: block;
}
#content .contact-form fieldset p.text-area {
  display: none;
}
#content .contact-form fieldset p.human-check {
  color: #fff;
}

[jlebrun]

Perfect, thank you so much!

[Author]

Posts