Investigating Caldera Forms + JointsWP / Zurb Foundation

Last year I did a short little video series (embarrassing stuff – now deleted) on how I approached working on JointsWP, a pretty nice WordPress starter theme, that has Zurb’s Foundation CSS Framework built in. I really have no training in Foundation, but for me, I go after this  _settings.scss file — that defines all of these variables and defaults for a lot of standard elements you’d find in a typical site — very early in my process. You can really get a decent design going with just messing with the settings in this file. (btw i can’t figure out how to type an em dash on linux yet.)

I spent time going through all of the sections, and writing up my own little notes about which ones I should dive into first things first on a project, which ones are more niche, etc. There’s over 800 lines of sass, so I took time to start messing around with settings, changing colors, seeing what was effected…I just wanted to make sure I wasn’t missing any opportunities to save time / be more efficient. That _settings.scss file actually goes further than I gave it credit for before my little dive, and I’m glad I put in the time.

Obviously forms and buttons are going to be really important parts of almost any site, and the _settings.scss dedicates plenty of options for those elements. As I was messing with them, I wondered how easy it would hard it would be to get plugins like Woocommerce and BBPress to match the styles of the forms that I set in _settings.scss, but I decided to start with something a little smaller: A straight up contact form plugin.

But which contact form plugin? Spoiler – you see the title – Caldera Forms. I’m just getting back into WordPress, so my work isn’t attached to some legacy plugin that has been around forever, or something that I paid money to the developer for years ago that I still use today, etc. It seems like what people use can often depend on when they got into the biz. I used plenty of contact form 7 and gravity forms before, but I have no allegiances. I was watching Zac Gordon‘s course on Udemy last year and I remember him mentioning Caldera Forms and it looked good to me – and Josh Pollock has a decent twitter – so that’s the one I went with.

So…ok… I made a default form, put in in a post, and then tried to make it look like the comment form as efficiently as possible – preferably in a way that helps me not have to repeat this step over and over again in the future when I’m adding Caldera Forms to a JointsWP based theme. And I came away from this realizing how powerful sass and Foundations _settings.scss file can be. I’m not *done* yet, so expect a lot of edits to this post, but this is what I came up with to make Caldera Forms look a lot more like the settings in Foundation, and should match your changes no problem.


// Makes Caldera Forms play nice with Foundation Form styles

/*** THIS CHANGES THE LOOK OF THE FORM FIELDS ***/
.caldera-grid .form-control {
	padding: $input-padding;
	height: auto;
	box-shadow: $input-shadow;
	background: $input-background;
	color: $input-color;
	border: $input-border;
	&:focus {
		background-color: $input-background-focus;
		border: $input-border-focus;
		box-shadow: $input-shadow-focus;
	}

}

.caldera-grad .btn {
	padding: $button-padding;
}

/*** THIS CHANGES THE BUTTON STYLE ***/
.caldera-grid input[type=submit] {
	font-family: $button-font-family;
	border-radius: $button-radius;
	background: $button-background;
	color: $button-color;
	font-size: $input-font-size;
	border: $input-border;
	float: none;
	transition: all 0.3s ease-in-out, $input-transition;
}

/*** THIS CHANGES THE BUTTON HOVER STYLE ***/
.caldera-grid input[type=submit]:hover {
	background: $button-background-hover;
	border-color: transparent;
	color: $button-color;
}

/*** THIS CHANGES THE LABEL STYLE ***/
.caldera-grid label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 0;
	font-weight: $form-label-font-weight;

Tags: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.