扩展联系表格7 - 预览窗格

Question

Anyone working with Wordpress will be familiar with Contact Form 7, a wonderful piece of work that Takayuki Miyoshi keeps religiously up-to-date.

It struck me that one thing that would be useful if, like me, you make complex forms, is a visual preview. (possibly even a visual editor but let's not run before...)

Now, as I say it's a wonderful piece of work so 5 minutes hacking came up with this:

Adding this to the $panels array in edit-contact-form.php

'preview-panel' => array(
    'title' => __( 'Preview', 'contact-form-7' ),
    'callback' => 'wpcf7_editor_panel_preview' ),   

makes a new tab, Preview.

Adding this to editor.php

function wpcf7_editor_panel_preview( $post ) {
    $preview_code = $post->form_do_shortcode();
    echo (do_shortcode($preview_code));
}

produces the goods.

Now there's a few things wrong with this which is where I need help (I'm way above my pay grade here)

1. I should be able to put these in using hooks rather than a crude hack (or a fork)

2. I should be able to call the function that produce the shortcode directly rather than relying on the use of do_shortcode()

3. The submit button is active (not good) and the preview only works after the form is saved and the shortcode generated.

Can anyone help me with this?

Answer 1

If you look at admin/edit-contact-form.php where $panels is initialized, you'll see this line below that:

$panels = apply_filters( 'wpcf7_editor_panels', $panels );

You can inject your panel with this code in your theme or plugin:

add_filter( 'wpcf7_editor_panels', function($panels) {
    $panels['preview-panel'] = array( 
            'title' => __( 'Preview', 'contact-form-7' ),
            'callback' => 'wpcf7_editor_panel_preview'
    );
    return $panels;
}, 10, 1 );     // 10 = priority (default); 1 = nr of arguments

To disable the submit button, change your preview method slightly by wrapping it in a div with a custom class:

$preview_code = do_shortcode( $post->shortcode() );
echo "<div class='wpcf7-preview'>$preview_code</div>"

Now you can add some Javascript like this to disable the button:

$('.wpcf7-preview input[type="submit"]').attr('disabled', 'true')

There are quite a few shortcode tags declared, and to be as compatible as you can, it's best to rely on do_shortcode. It appears that WPCF7 has it's own shortcode parsing functionality rather than using that of WP itself; another reason to leave it be. If you use do_shortcode you can be relatively sure that the preview will match actual form rendered on the frontend.

I haven't found any functionality regarding drafts in the plugin, and there's no easy way to preview a form that's not been saved, since the code to render a form fetches data from the database. So your best bet is to extend your callback to save a copy of the form as a draft and render that:

$copy = $post->copy();  // see includes/contact-form.php
$copy->save();          // idem
echo "<div class='wpcf7-preview'>" . do_shortcode( $copy->shortcode() )
   . "<script>$('.wpcf7-preview input[type="submit"]').attr('disabled', 'true')</script>"
   . "</div>";
$copy->delete();