Google Analytics form submission tracking (AJAX)

Add the following code to the "Additional settings" tab of the contact form configuration.

on_sent_ok: "__gaTracker('send', 'event', 'Contactformulier',
'Verzonden');"
Code language: PHP (php)

Contact Form 7 Divi Styling (from JP)

Adapted from <http://www.agentwp.com/contact-form-7-like-divi>

In the contact form, remove the original cf7 button and add this instead. It formats the button according to the Divi theme customizer. Except for the text color, so that is added with CSS anyway.

<button type="submit" class="et_pb_button et_pb_custom_button_icon
wpcf7-submit" data-icon="5">Verzenden</button>
Code language: HTML, XML (xml)

And the custom CSS

/* -- Start styling Contact Form 7 -- */
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-select {
background-color: #f4f6f1 !important;
border-color: #df5503 !important;
width: 100% !important;
border-radius: 3px !important;
font-size: 15px;
font-family: inherit;
color: #999 !important;
padding: 12px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-submit {
color: #FDFCFC !important;
}
.wpcf7-form .wpcf7-mail-sent-ok {
background-color: #dff0d8;
border: 2px solid #007000;
color: #007000;
}
.wpcf7-form .wpcf7-validation-errors {
background-color: #F1E1E1;
border: 2px solid #df5503;
color: #df5503;
}
div.wpcf7-response-output {
margin: 2em 0 1em;
}
span.wpcf7-not-valid-tip {
color: #df5503;
}
/* -- End styling Contact Form 7 -- */
Code language: CSS (css)

Contact Form 7 Divi Styling (from agentwp)

<http://www.agentwp.com/contact-form-7-like-divi>

Almost the same as the original, but the button has been improved with better Divi styling including the hover icon. To use this, remove the original cf7 button from the form and add this instead:

<button type="submit" class="et_pb_contact_submit et_pb_button
**et_pb_custom_button_icon** wpcf7-submit" **data-icon="5"**> Verzenden</button>
Code language: HTML, XML (xml)

Then use the following css:

/* -- Start styling Contact Form 7 -- */
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #F4F6F1 !important;
border-top-color: #DF5503 !important;
border-right-color: #DF5503 !important;
border-bottom-color: #DF5503 !important;
border-left-color: #DF5503 !important;
-moz-border-top-colors: #DF5503 !important;
-moz-border-right-colors: #DF5503 !important;
-moz-border-bottom-colors: #DF5503 !important;
-moz-border-left-colors: #DF5503 !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 15px;
font-family: inherit;
color: #999 !important;
padding: 12px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-submit {
color: #eff2eb !important;
background: #df5503;
border-color: #df5503;
letter-spacing: 0px;
font-size: 20px;
margin-left: 0;
}
.wpcf7-submit:hover {
background: #df5503 !important;
}
.wpcf7-mail-sent-ok {
border: 2px solid #0F63A1 !important;
}
/* -- End styling Contact Form 7 -- */
Code language: CSS (css)

Contact Form 7 Divi Styling (from agentwp original)

<http://www.agentwp.com/contact-form-7-like-divi>

/* -- Start styling Contact Form 7 -- */
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #ffffff !important;
border-top-color: #CED8E2 !important;
border-right-color: #CED8E2 !important;
border-bottom-color: #CED8E2 !important;
border-left-color: #CED8E2 !important;
-moz-border-top-colors: #CED8E2 !important;
-moz-border-right-colors: #CED8E2 !important;
-moz-border-bottom-colors: #CED8E2 !important;
-moz-border-left-colors: #CED8E2 !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 15px;
font-family: inherit;
color: #999 !important;
padding: 12px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-submit {
color: #ffffff !important;
background-color: #0F63A1 !important;
border-color:#0F63A1 !important;
margin: 5px auto 0;
cursor: pointer;
font-size: 17px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 5px 20px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.wpcf7-submit:hover {
color: #0F63A1 !important;
background-color: #ffffff !important;
border: 2px solid;
border-color:#0F63A1 !important;
padding: 5px 20px !important;
}
.wpcf7-mail-sent-ok {
border: 2px solid #0F63A1 !important;
}
/* -- End styling Contact Form 7 -- */
Code language: CSS (css)