WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Styling the Contact Form (3 posts)

  1. icing
    Member
    Posted 1 year ago #

    1. I came across this Contact Form and it has very nice look about it. The input fields have a blueish glow when the cursor is there. The corners of input field are rounded. Also, the Submit button looks good too.

    2. Another good looking Contact Form. In this one, 'Your Name', 'Your Email'... etc are inside the input field.

    How can this be done on Twenty Eleven Child theme?

    Thanks for your help. :)

    http://wordpress.org/extend/plugins/contact-form-7/

  2. Josh Hardman
    Member
    Posted 1 year ago #

    1. For rounded corners, simply add border radius to the input field style. For example:

    input{
        border-radius: 5px
    }

    To edit the submit button, create a class and place it around the submit in the contact form generator, e.g.

    <p class="contact-submit">[submit "SUBMIT"]</p>

    Then, add some styles in your main stylesheet like:

    .contact-submit input{
         width: 100px;
         height: 30px;
         background-color: #000;
         font-size: 13px;
         color: #fff;
         border: 1px solid #fff;
         border-radius: 5px;
    }

    2. The text titles inside the fields is called a watermark. This is easily added in the form generator:
    [text* your-name watermark "Your name goes here..."]

  3. icing
    Member
    Posted 1 year ago #

    Thanks for your reply.

    The second one I had figured out. Watermarking; it is also on Contact Form's Documentation on Text Fields. The following is the code.

    [text your-name watermark "Full Name- Required"]
    
    [email* your-email watermark "Email - Required"]
    
    [text Phone watermark "Phone"]
    
    [text your-subject watermark "Subject"]
    
    <p>Attachments<br />
    [file file-582 limit:20mb filetypes:jpg|jpeg|png|gif|pdf|doc|docx|ppt|pptx|odt|zip|pdf|rar|exe|xls|txt|7z|xlsx]
    
    [textarea your-message watermark "Your message here...."]
    
    <p>Enter the text in the image below<br />
    [captchac captcha-936]
    [captchar captcha-936]
    
    <p>[submit "Send"]</p>

    For rounded border, I have added this to style.css of Child theme.

    /* This will override form input area. Line 438 */
    input[type=text],
    input[type=password],
    textarea {
    	border: 1px solid #ccc;
    	border-radius: 2px;
    }

    As far as the 1st form goes, I am more interested in the blueish glow on the borders. Hope you know how to do that. Thanks for your help.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic