I first would create a form:
<ul id="contact">
<center>
<p><span style="padding-left: 5px;">[text* your-name class:text class:required placeholder "Name"] </span></p>
<p><span style="padding-left: 5px;">[email* your-email class:text class:required placeholder "Email"] </span></p>
<p><span style="padding-left: 5px;">[text* your-subject class:text class:required placeholder "Subject"] </span></p>
<p><span style="padding-left: 5px;">[textarea* your-message id:message class:text class:required placeholder "Comments, etc."] </span>
Notice the id=”contact” at the top? I would then open the style.css file and add the following code:
/* Contact Form
USE THIS ONE WITH Contact Form 7
*/
#contact label {
display:block;
padding:5px 0;
font-family: Georgia, Arial, Helvetica, sans-serif;
}
#contact input, #contact textarea {
border:2px solid #0A3308;
padding:8px;
width:300px;
background:#F5F7F5;
margin-bottom:10px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
#contact textarea {
width:300px;
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:13px;
}
Then adjust as necessary. Here is a similar example (the above is from a current project unpublished):
https://start-here-online.com/contact/