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

    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:
    http://i.imgur.com/Ui8hLNi.png

    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:
    http://i.imgur.com/CaGpOeu.png

    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.

    #399981

    Hi mmagnani!

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

    Best regards,
    Andy

    #505986

    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.