Styling Contact Form

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #13512
    Jlebrunjlebrun
    Member

    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!

    #13537
    VeenaVeena
    Moderator

    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.

    #13580
    Jlebrunjlebrun
    Member

    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!

    #13702
    VeenaVeena
    Moderator

    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.

    #13735
    Jlebrunjlebrun
    Member

    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/

    #13760
    VeenaVeena
    Moderator

    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;
    }
    
    Attachments:
    #13792
    Jlebrunjlebrun
    Member

    Perfect, thank you so much!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Styling Contact Form’ is closed to new replies.