Make Contact Form 7 forms look like Divi forms without CSS

Originally published: 2nd Mar 2021 | Last modified: 20th May 2021

Joke’s on you because you’ll need some HTML and fancier CF7 shortcodes instead. Here’s the basic form markup and more advanced CF7 shortcodes you’ll need to make your CF7 forms pick up styling from Divi. Make sure you modify to fit your use case. Here’s the CF7 documentation for further reading.

May 2021: Updated to reflect what I’ve learned about <input type=”submit”> and pseudo-elements.

<div class="et_pb_contact">

<p class="et_pb_contact_field et_pb_contact_field">
    <label for="your-name">Name*</label>
    [text* your-name class:input]
</p>


<p class="et_pb_contact_field et_pb_contact_field_half">
    <label for="your-email">Email*</label>
    [email* your-email class:input]
</p>

<p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">
    <label for="your-phone">Phone*</label>
    [text* your-phone class:input]
</p>

<p class="et_pb_contact_field">
    <label for="your-message">Message*</label>
    [textarea* your-message class:et_pb_contact_message class:input]
</p>

<div class="et_contact_bottom_container">
    <button class="et_pb_contact_submit et_pb_button et_pb_bg_layout_light">Send</button>
</div>

</div>

Markup comparison for individual form elements

Contact Form 7 default input markup

<label> Your name
    [text* your-name] </label>

Divi default input markup (abridged)

<p class="et_pb_contact_field et_pb_contact_field_0 et_pb_contact_field_half" data-id="name" data-type="input">
    <label for="et_pb_contact_name_0" class="et_pb_contact_form_label">Name</label>
    <input type="text" id="et_pb_contact_name_0" class="input" value="" name="et_pb_contact_name_0" data-required_mark="required" data-field_type="input" data-original_id="name" placeholder="Name">
</p>

Modded CF7 input markup

<p class="et_pb_contact_field et_pb_contact_field">
    <label for="your-name">Name*</label>
    [text* your-name class:input]
</p>

Contact Form 7 default submit markup

[submit "Submit"]

Divi default submit markup

<div class="et_contact_bottom_container">
            <div class="et_pb_contact_right">
                <p class="clearfix">
                    <span class="et_pb_contact_captcha_question">9 + 11</span> = <input type="text" size="2" class="input et_pb_contact_captcha" data-first_digit="9" data-second_digit="11" value="" name="et_pb_contact_captcha_0" data-required_mark="required" autocomplete="off">
                </p>
            </div><!-- .et_pb_contact_right -->
            <button type="submit" name="et_builder_submit_button" class="et_pb_contact_submit et_pb_button">Submit</button>
        </div>

Modded CF7 submit markup

<div class="et_contact_bottom_container">
    [submit class:et_pb_contact_submit class:et_pb_button <div class="et_contact_bottom_container">
    <button class="et_pb_contact_submit et_pb_button et_pb_bg_layout_light">Send</button>
</div>