Styling Contact Form 7 as Enfold contact form

Hello,

As many others here, (i.e. https://kriesi.at/support/topic/design-contact-form-7-as-native-form/#post-379550) I am trying to give the Enfold contact form design to Contact Form 7 generated forms.

When a plain CF7 form is inserted in an Enfold page, input fields are not well sized or displayed in columns. This way, a simple CF7 form code like

<p>Your Name<br />
    [text* your-name] </p>

<p>Your Email<br />
    [email* your-email] </p>

<p>Your Phone<br />
    [tel* your-tel] </p>

<p>Your Selection<br />
    [select* your-menu include_blank "Option 1" "Option 2" "Option 3"] </p>

<p>Your Date<br />
    [date* your-date] </p>

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>

will appear this way:

Fortunatelly, CF7 allows some HTML inside the form code and classes in its shortcodes. This way, I could insert some Enfold classes so that it appears like a native Enfold form.

First, the fields should be wrapped in a <div class=”avia_ajax_form”> but leaving the submit button outside it. Otherwise, the CF7 and Enfold Ajax codes will misbehave.

Then we need to mimic the native <p> classes with corresponding CSS classes form_element, first_form, form_fullwidth/form_element_half/form_element_third etc.

Finally, the CF7 input fields should be set with text_input/text_area classes.

This way, the above code can be changed to:

<div class="avia_ajax_form">

<p class="first_form form_element form_fullwidth">Your Name<br />
    [text* your-name class:text_input] </p>

<p class="first_form form_element form_element_half">Your Email<br />
    [email* your-email class:text_input] </p>

<p class="form_element form_element_half">Your Phone<br />
    [tel* your-tel class:text_input] </p>

<p class="first_form form_element form_element_half">Your Selection<br />
    [select* your-menu class:select include_blank "Option 1" "Option 2" "Option 3"] </p>

<p class="form_element form_element_half">Your Date<br />
    [date* your-date class:text_input] </p>

<p class="first_form form_element form_fullwidth">Subject<br />
    [text* your-subject class:text_input] </p>

<p class="first_form form_element form_fullwidth">Your Message<br />
    [textarea* your-message class:text_area] </p>

</div>

<p>[submit "Send"]</p>

The CF7 form will then look like this:

My tests result OK with this code, but it would be nice if some Kriesi.at team member could check it. So far, all CF7 nice features are still available, including validation.

I hope this may be useful to somebody else, since Kriesi.at team can’t give support for 3rd party plugins.