Creating a responsive two column form using Contact form 7

In my previous article I have wrote about creating a two column form in Contact form 7. Now in this tutorial we will see on how to create a responsive two column form. The form will be in two columns in bigger screens and will become one column in mobile devices. Our final form will look like the following.

final-fom-desktop

HTML Markup

Let’s create the HTML markup for the form first. We will wrap the whole form with an ID named “responsive-form” and then will have rows and columns like the following.

<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-half">First Name [text* first-name]</div>
<div class="column-half">Last Name [text* last-name]</div>
</div>

<div class="form-row">
<div class="column-half">Email [email* your-email]</div>
<div class="column-half">Phone [text* your-phone]</div>
</div>

<div class="form-row">
<div class="column-full">Subject [text* your-subject]</div>
</div>

<div class="form-row">
<div class="column-full">Your message  [textarea your-message]</div>
</div>

<div class="form-row">
<div class="column-full">[submit "Send"]</div>
</div>

</div><!--end responsive-form-->

If you publish the form right now, it will look similar to the following.

unstyled-form

CSS Styles

Let’s look at the css styles for our two column grid.

#responsive-form{
	max-width:600px /*-- change this to get your desired form width --*/;
	margin:0 auto;
        width:100%;
}
.form-row{
	width: 100%;
}
.column-half, .column-full{
	float: left;
	position: relative;
	padding: 0.65rem;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
	.column-half{
		width: 50%;
	}
}

These styles define rows and columns. if you look at your form right now, you will see the form is already in two columns.

grids-added

Let’s style the form now..

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	      box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
	background: #fff;
}
.wpcf7-submit{
	float: right;
	background: #CA0002;
	color: #fff;
	text-transform: uppercase;
	border: none;
	padding: 8px 20px;
	cursor: pointer;
}
.wpcf7-submit:hover{
	background: #ff0000;
}
span.wpcf7-not-valid-tip{
	text-shadow: none;
	font-size: 12px;
	color: #fff;
	background: #ff0000;
	padding: 5px;
}
div.wpcf7-validation-errors { 
	text-shadow: none;
	border: transparent;
	background: #f9cd00;
	padding: 5px;
	color: #9C6533;
	text-align: center;
	margin: 0;
	font-size: 12px;
}
div.wpcf7-mail-sent-ok{
	text-align: center;
	text-shadow: none;
	padding: 5px;
	font-size: 12px;
	background: #59a80f;
	border-color: #59a80f;
	color: #fff;
	margin: 0;
}

with these styles applied the form will look lot nicer. In desktop it will be displayed in two columns and in a mobile device it will be displayed in one column.

in desktop
final-fom-desktop

in mobile
final-form-mobile

If you have any questions, please let me know on the comments.

Published on September 8th, 2014

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