Caldera Forms is still my favorite form builder, despite its somewhat uncertain future. When creating websites for clients I don’t want to risk walking into the limitations of for example the Divi Contact Form in case a client ever requests something special. So my goto for forms is Caldera Forms, an awesome free form builder with lots of expansion possibilities to handle the form data in any way your want.
A simple example is the built-in GET function. When clicking the word example, you’ll see a new window of this same page with the Subject field in the form (scroll to bottom) filled in with the word “example”. It is read from the browsers’ address bar. Great functionality – and fun.
Divi is my favourite theme. I operate it on a decent server and take care of my caching, so the major concern, the load speed, is no problem at all. I like its smooth styling.
Now a Caldera form can be styled with css to look like Divi or CF7 but what I miss in all tutorials is the Divi Button. That’s not so easy to mimick. Divi experts, writing all these great tutorials, seem to omit the button, especially the hover effect with the arrow icon graciously sliding out. I don’t know why, because it is certainly doable, despite the fact that the “submit” type isn’t as flexible as the “button” type, designwise.
If you look at the page source of this page, you’ll see the css that I used for the Caldera form below. Search for CalderaCSS. The style section below that is what you need (without the <style> tags of course).
IMPORTANT: add the Custom Class “btnicon” to the buttons properties of your Caldera form and you’re ready to tweak the CSS according to your wishes.
Compare this form, especially the Landscape and Portrait modes on your phone and spot the difference. I used a breakpoint of 600px.
(I wrote this post is in English because -unfortunately- Caldera isn’t that popular in The Netherlands… Let’s just hope it continues to flourish now the Ninjas are taking care of Caldera!)
