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.

Published on February 13th, 2012

4 Comments

  1. […] form 7 is a very flexible form plugin for WordPress. As I mentioned in the previous post you can style the form as you […]

  2. Veki says: - reply

    Hello,

    I have to make form which in first row does have three fields i.e. three columns and in second row it does have only text area and submit button below.
    Please advise how to do that. Thanks

  3. Enola says: - reply

    I have a question I want to do a form like this on my website i followed your directions but it still doesn’t show like yours. Can you help me

  4. […] form 7 is a very flexible WordPress contact form plugin for WordPress. As It mentioned in the previous post you can style the form as you require. You can also find an update version of Contact form 7 […]

Inline
Inline