{"id":662,"date":"2019-11-06T06:00:55","date_gmt":"2019-11-06T11:00:55","guid":{"rendered":"https:\/\/wpcreatorsclub.com\/?p=662"},"modified":"2019-11-10T10:11:45","modified_gmt":"2019-11-10T15:11:45","slug":"how-to-make-caldera-forms-match-divi-4-forms","status":"publish","type":"post","link":"https:\/\/wpcreatorsclub.com\/how-to-make-caldera-forms-match-divi-4-forms\/","title":{"rendered":"How to make Caldera forms match Divi 4+ Forms [Updated]"},"content":{"rendered":"\n

This article was updated November 6, 2019.<\/em><\/p>\n\n\n\n

Here at WP Creator’s Club, we have a few plugins that extend the functionality of the Divi Contact Form module, such as our Divi Date\/Time Picker<\/a> and our Divi Multistep Contact Form plugin<\/a>.<\/p>\n\n\n\n

Sometimes though we take on projects for clients that need more functionality than the Divi Contact Form module can handle.<\/p>\n\n\n\n

That’s when we turn to the awesome Caldera Forms plugin<\/a>.<\/p>\n\n\n\n

\"Caldera<\/a><\/figure><\/div>\n\n\n\n

I was recently working on a project for a client where we were using the Caldera Forms plugin and out of the box, the form is left pretty much unstyled, allowing the designer to style the form however they’d like.<\/p>\n\n\n\n

Since we use Divi for a lot of our client projects, I wanted the Caldera forms to match the rest of the site – in particular some simple Divi Contact Forms we were using else where on the site.<\/p>\n\n\n\n

The following is the CSS I wrote to get the Caldera Forms fields to look like the Divi Contact Form module fields:<\/p>\n\n\n\n

.caldera-grid input.form-control,\n.caldera-grid select.form-control,\n.caldera-grid textarea.form-control {\n\tbox-sizing: border-box;\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n    background-color: #eee;\n\tborder: 0;\n\tborder-width: 0;\n    -webkit-border-radius: 0;\n    -moz-border-radius: 0;\n    border-radius: 0;\n\tbox-shadow: none;\n\tcolor: #999;\n\tfont-size: 14px;\n\theight: auto;\n    padding: 16px;\n}\n\n.caldera-grid select.form-control {height:51px}\n\n.caldera-grid .checkbox input[type=\"checkbox\"],\n.caldera-grid .radio input[type=\"radio\"] {\n\t-webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n\tbackground-color: #eee;\n\tborder: 0;\n\tborder-width: 0;\n\theight: 18px;\n\twidth: 18px;\n\tposition: relative;\n\tvertical-align: middle;\n\tmargin-top:-1px;\n}\n\n.caldera-grid .radio input[type=\"radio\"] {border-radius:50%}\n\n.caldera-grid .checkbox input[type=\"checkbox\"]:checked::before,\n.caldera-grid .radio input[type=\"radio\"]:checked::before {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    content: \"\";\n    transform: translate(-50%,-50%);\n}\n\n.caldera-grid .checkbox input[type=\"checkbox\"]:checked::before {\n\twidth: 17px;\n    height: 17px;\n    color: #2ea3f2;\n    font-family: dashicons;\n    font-size: 17px;\n    line-height: 17px;\n    content: \"\\f147\";\n}\n\n.caldera-grid .radio input[type=\"radio\"]:checked::before {\n\twidth: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: #2ea3f2;\n}\n\n.caldera-grid input:focus,\n.caldera-grid textarea:focus,\n.caldera-grid .checkbox input[type=\"checkbox\"]:focus {\n  outline-style:none !important;\n  box-shadow:none !important;\n  border-color:transparent !important;\n}<\/code><\/pre>\n\n\n\n
The above CSS code should cover all of the input fields Caldera uses, including:<\/p>\n\n\n\n
  • Normal text inputs (including email, password, phone, date, etc)<\/li>
  • textarea<\/li>
  • select<\/li>
  • checkboxes<\/li>
  • radio boxes<\/li><\/ul>\n\n\n\n
    The problem (and solution) to the submit button<\/h2>\n\n\n\n
    Matching up the buttons in Caldera is a little different but it’s actually pretty easy because we’re going to rely on some of Divi’s built in CSS classes to handle the heavy lifting for us, with a few modifications.<\/p>\n\n\n\n
    However, we do run into a slight obstacle here.<\/strong><\/p>\n\n\n\n
    Divi uses CSS pseudo elements to display button icons. Divi can do this because their buttons are actually using the <button> tag.<\/p>\n\n\n\n
    On the other hand, Caldera takes a different approach and uses an <input> tag for it’s button and <input> tags cannot<\/strong> use pseudo elements in CSS.<\/p>\n\n\n\n
    This means that out of the box, the submit buttons in Caldera cannot perfectly mimic Divi’s contact form buttons<\/strong> because they can’t use pseudo elements to display the icon.<\/p>\n\n\n\n
    But we have a work around.<\/p>\n\n\n\n
    First, add the following CSS to your stylesheet below the CSS you copied above:<\/p>\n\n\n\n
    .caldera_divi_contact_button {\n\tdisplay: inline-flex;\n\tposition: relative;\n}\n\n.caldera_divi_contact_button::after {\n\tright: 1em;\n}\n\n.caldera_divi_contact_hide_button {\n\t-webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n\tbackground-color: inherit;\n\tborder: 0;\n\tborder-width:0;\n\tcolor: inherit;\n}<\/code><\/pre>\n\n\n\n
    Basically what we’re doing with this block of CSS is adjusting where the button icon gets displayed and telling the browser not to render Caldera’s button styles because we’re going to do some CSS trickery.<\/p>\n\n\n\n
    We’re going to apply Divi’s button styles to the <div> holding Caldera’s <input> submit button and make it look<\/em> like the submit button.<\/p>\n\n\n\n
    When users click it, the user-experience will be identical to Divi’s submit button, however, it will be a <div> element visible and the actual submit button will just be transparently (for the most part)  sitting on top accepting the click action.<\/p>\n\n\n\n
    Now we just need to add our classes to Caldera’s button.<\/p>\n\n\n\n
    \"caldera
    We just need to add a few classes to 2 fields when editing the ‘submit’ button.<\/figcaption><\/figure><\/div>\n\n\n\n
    When editing the submit button, in the Custom Class<\/strong> field, add the following 2 classes:<\/p>\n\n\n\n
    • caldera_divi_contact_button<\/strong><\/li>
    • et_pb_button<\/strong><\/li><\/ul>\n\n\n\n
      These will apply Divi’s button styles to the <div> holding the submit button.<\/p>\n\n\n\n
      Next, in the field marked Class<\/strong>, remove the existing classes and <\/strong>add the class caldera_divi_contact_hide_button<\/strong> – this class introduces the CSS preventing the normal Caldera styles from being applied to the actual button so our Divi button styles can show through.<\/p>\n\n\n\n
      Wrapping Up<\/h2>\n\n\n\n
      That’s pretty much all there is to it. By tackling the submit button this way, it should match the button styles even if you change them down the road in the Theme Customizer, making your Caldera Forms a bit more ‘future Divi-proof.’<\/p>\n\n\n\n
      If you have other tips and tricks when it comes to Caldera Forms and Divi, drop them in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"
      This article was updated November 6, 2019. Here at WP Creator’s Club, we have a few plugins that extend the functionality of the Divi Contact Form module, such as our Divi Date\/Time Picker and our Divi Multistep Contact Form plugin. Sometimes though we take on projects for clients that need more functionality than the Divi […]<\/p>\n","protected":false},"author":1,"featured_media":663,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[27,20,37],"tags":[24],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/posts\/662"}],"collection":[{"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/comments?post=662"}],"version-history":[{"count":0,"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/posts\/662\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/media\/663"}],"wp:attachment":[{"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/media?parent=662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/categories?post=662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/tags?post=662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}