Introduction

This article describes the method using CSS to style the CF7.

There are some plugins for Elementor that provide widgets to do the styling but they seem to have limitations. For example, these widgets don’t support adding ID or Class to the <form> tag and therefore cannot make use of DOM events to trigger subsequent actions.

Steps

• Add CSS class to field elements
• Apply CSS in the theme’s style.css or some other appropriate locations. See sample codes below.
• Add the form’s shortcode to the page with class “cu-cf-form” injected to the <form> tag. The inclusion of “html_id” is required if JS is used for the submission action
  • Example: [form-shortcode html_class=”cu-cf-form” html_id=”cu-contact-form”]

Sample code for Form

<label>Name* 
    [text* your-name class:cu-cf-entry] </label>

<label>Phone* 
    [text* your-phone class:cu-cf-entry] </label>

<label>Email* 
    [text* your-email class:cu-cf-entry] </label>

<label>Message* 
    [textarea* your-message class:cu-cf-msg] </label>

[submit class:cu-cf-btn "CONTACT US"]

[dynamichidden from-page "CF7_get_post_var key='title'"]

[hidden your-tag "freebie"]

Sample CSS

.cu-cf-form label {
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 32px;
    color: #505050;
}

.cu-cf-form .cu-cf-entry,
.cu-cf-form .cu-cf-msg {
    background-color: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #BFBFBF !important;
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color:  #505050 !important; 
    padding: 8px 0 !important; /* control row vertical spacing */
}

.cu-cf-form .cu-cf-msg {
    height: 63px;  /* control message box height */
}

.cu-cf-form .cu-cf-btn {
    height: 47px;
    font-family: "Montserrat", Sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1em !important;
    letter-spacing: 0.06em !important;
    color: #FFFFFF !important;
    background-color: #36393D !important;
    margin: 6px 0px 0px 0px;
    border-style: solid !important;
    border-width: 1px 1px 1px 1px !important;
    border-color: #36393D !important;
    border-radius: 0 !important;
    padding: 0 37px !important;  /* control button width  */
}

.cu-cf-form .cu-cf-btn:hover {
    background-color: #A8A8A8 !important;
    border-color: #A8A8A8 !important;
}

.wpcf7-response-output {
     background-color: #fff;  /* ensure message stands out on dark background  */
 }