cForms – Multi page forms in WordPress

If you are searching for a plugin to create a complex forms in your WordPress site, your best option is the cForms. It is free and GPL licensed and has a wonderful UI.

The best feature of the cForms is the multi page forms and it is very easy to implement too. Most of the free form plugins doesn’t provide this feature. Here are some of the other great features.

  • Ajax supported form submission including graceful fall-back.
  • Multiple forms on single page.
  • Drag and drop form management
  • Submission limits along with start and end dates.
  • Database based tracking of submitted data.
  • Clean separation of CSS styling and form code
  • Backup & Restore

multipage-form-settings

Field Settings

For more information : http://www.deliciousdays.com/cforms-plugin/

Published on April 23rd, 2013

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.

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