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

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.