title: Extending Contact Form 7 - Preview pane
body: <p>Anyone working with Wordpress will be familiar with Contact Form 7, a wonderful piece of work that Takayuki Miyoshi keeps religiously up-to-date. </p>
  
  <p>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...)</p>
  
  <p>Now, as I say it's a wonderful piece of work so 5 minutes hacking came up with this:</p>
  
  <p>Adding this to the $panels array in edit-contact-form.php</p>
  
  <pre><code>'preview-panel' =&gt; array(
      'title' =&gt; __( 'Preview', 'contact-form-7' ),
      'callback' =&gt; 'wpcf7_editor_panel_preview' ),   
  </code></pre>
  
  <p>makes a new tab, Preview.</p>
  
  <p>Adding this to editor.php</p>
  
  <pre><code>function wpcf7_editor_panel_preview( $post ) {
      $preview_code = $post-&gt;form_do_shortcode();
      echo (do_shortcode($preview_code));
  }
  </code></pre>
  
  <p>produces the goods.</p>
  
  <p>Now there's a few things wrong with this which is where I need help (I'm way above my pay grade here)</p>
  
  <ol>
  <li>I should be able to put these in using hooks rather than a crude hack (or a fork)</li>
  <li><p>I should be able to call the function that produce the shortcode directly rather than relying on the use of <code>do_shortcode()</code></p></li>
  <li><p>The submit button is active (not good) and the preview only works after the form is saved and the shortcode generated.</p></li>
  </ol>
  
  <p>Can anyone help me with this?</p>