Create a unique contact form using contact form 7

When it comes to forms in WordPress, contact form 7 is the best free choice. Which is very flexible in customization and very easy to implement. If you know a little bit of CSS then you can create amazing forms using it. Even though contact form 7 doesn’t support conditional forms or multipage forms, many users doesn’t need those functionalities in there forms.

Here is a step by step guid on how to create a unique contact form in Contact form 7, Where the forms elements will be placed inside a paragraph.

1. Using the form editor create your form by using form elements inside the paragraph.

Few things to remember here.

• Wrap the whole paragraph with “P” tag. Other wise each form elements will be wrapped with “P” tag.
• You can use the “watermark” as the label.
• You can use the same format in the message box to receive the response in your email like a letter.

2. Add your form to a page and publish it.

3. By default it will look like the following. (It may vary depend on the styling in your theme.)

4. The form already looks ok, but a bit of css will make it more beautiful. Here is my css code. (I have wrapped the form with a css id called “myform”)

#myform{
	width:650px;
}
#myform p{
	font-size:14px;
	line-height:30px;
}
#myform input[type="text"]{
	border:none;
	border-bottom:1px dotted #000;
	background: transparent;
	font-size :14px;
	width:250px;
}
#myform .watermark{
	color:#ccc;
}
#myform select {
	-webkit-appearance: button;
	-webkit-border-radius: 2px;
	-webkit-padding-end: 10px;
  	-webkit-padding-start: 2px;
  	-webkit-user-select: none;
  	background-image: url(images/select_arrow.gif), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background-color:transparent;
  	background-position: center right;
  	background-repeat: no-repeat;
  	border:none;
  	border-bottom: 1px dotted #000;
  	color: #555;
 	font-size: inherit;
  	margin: 0;
  	overflow: hidden;
  	padding-top: 2px;
  	padding-bottom: 2px;
  	text-overflow: ellipsis;
  	white-space: nowrap;
}
#myform input[type="submit"]{
	padding:8px 18px;
	background:#222;
	color:#fff;
	border: 1px solid #fff;
	float:right;
	margin-right:20px;
}
#myform input[type="submit"]:hover{
	background:#fff;
	color:#222;
	border: 1px solid #222;
}

5. Here is the final form.