Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #399397


    As many others here, (i.e. 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>
    <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 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 team can’t give support for 3rd party plugins.


    Hi mmagnani!

    seems like your code is working very well! Thanks a lot for sharing.

    Best regards,


    Hi mmagnani

    I also would like to thank you – it works like a charm :)

    Kind regards David

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Styling Contact Form 7 as Enfold contact form’ is closed to new replies.