Simply create meta boxes using Custom Field Suite.

Meta boxes are basically custom fields which, you could use to add additional data to your content. Custom Field Suite is a wonderful free plugin which, makes it dead simple for you to create custom meta boxes visually for you posts, pages or any custom post types.

It is a wonderful free plugin and have great documentation for you to get start. You can easily create text, text area, wysiwyg, color, select, file upload, user, relationship and loops using visual UI and with minimal code you could display the values in your theme.

The placement rules help you to define, in which scenarios you want to display the custom meta boxes in each content type. You can choose from post type, user roles, exact post or taxonomy terms.

The plugin also have an export and import feature, so it is easy for developers to move from development box to actual server.

URL : http://wordpress.org/extend/plugins/custom-field-suite/
Home : http://uproot.us
Documentation : http://uproot.us/custom-field-suite/documentation/

Published on November 30th, 2012

Create a two column form using Contact form 7

Contact form 7 is a very flexible form plugin for WordPress. As I mentioned in the previous post you can style the form as you require.

You can find an updated version of this tutorial with responsive style here.

In this tutorial we will learn on how to create a two column form in Contact Form 7 step by step.

1. Through the form editor we are going to create our form. To style it properly we will wrap it with css classes.

<div id="two-column">
<div id="left">
<p>First Name
[text* first-name]</p>
<p>Email
[email* your-email] </p>
</div>
<div id="right">
 <p>Last Name
[text* last-name] </p>
<p>Phone
[text* your-phone] </p>
</div>
<p>Subject
[text* your-subject] </p>
<p>Your message 
[textarea your-message]</p>
<p>[submit "Send"]</p>
</div>

There are few things to remember here.
a. Each form element should be wrapped with “p” tag along with their Labels. I added “br” tag in-between the label and the form element.
b. The whole form is wrapped by a css id called #two-column
c. The elements, which are going to go on the left are get wrapped with the css id #left.
d. The elements, which are going to go on the right are get wrapped with the css id #right.

2. Add you form to a page and publish. Now your form will look like the following. It may vary depend on your theme.

3. Now we are going to add some CSS to make the form two column and bit more stylish.

#two-column{
	width: 550px;
}
#two-column #left{
	width: 300px;
	float: left;
}
#two-column #right{
	width: 250px;
	float: right;
}
#two-column p{
	margin-bottom: 12px;
}
#two-column input[type="text"]{
	border:none;
	border:1px solid #000;
	font-size :14px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	width: 540px;
	padding: 5px;
}
#two-column #right input[type="text"], #two-column #left input[type="text"]{
	width:240px;
}
#two-column textarea {
    position: relative;
    padding: 5px;
    border:1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 540px;
}
#two-column input[type="submit"]{
	padding:8px 18px;
	background:#222;
	color:#fff;
	border: 1px solid #fff;
	float:right;
	font-size: 14px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
#two-column input[type="text"]:focus, #two-column textarea:focus{
	background: #eee;
}
#two-column input[type="submit"]:hover{
	background:#fff;
	color:#222;
	border: 1px solid #222;
}

4. Now your form will look like the following.

Published on February 24th, 2012

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