Support » Plugin: Contact Form 7 » [Plugin: Contact Form 7] Styling the Contact Form

  • icing


    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. 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • 1. For rounded corners, simply add border radius to the input field style. For example:

        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..."]



    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 */
    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.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Plugin: Contact Form 7] Styling the Contact Form’ is closed to new replies.