Caldera Forms: The only form plugin you ever need

Caldera Forms is an awesome free WordPress plugin to create responsive forms.

Do you want to create a responsive multi column form? Do you want to create a multi page form? Do you want to create a pricing calculator form? Do you want to create a really complex form with a very complex layout very easily without spending a penny? don’t spend hours on Google, just download and install Caldera Forms.

caldera

With very easy to use drag and drop form and layout builder you will only need few minutes even to create a complex form.

Caldera forms comes with a stripped down version of bootstrap for form and grid styling, but you can turn them off and use your own styles. There are few paid add-ons available for Caldera forms, but you will only need them if you want to connect the form to a payment gateway. There are many awesome free add-ons too. If you want to receive a slack notification whenever someone submits a form, there is a free add-on for that. If you want to use Caldera forms to create custom meta fields to your post types or pages, there is a free add-on for that. Do you want to do something else with your submitted data, there is a free add-on for that too… How great is this? Seriously!

URL: https://wordpress.org/plugins/caldera-forms/
Home: https://calderawp.com
Add-ons : https://calderawp.com/caldera-forms-add-ons/

Published on November 8th, 2015

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