[Plugin: Contact Form 7] Styling the Contact Form

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

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.