How to get Contact for 7 working with Vex.js

When I started creating the new site design I stumbled across vex.js The library has the options to embed a form but I wanted to hook it into contact form 7 to get email responses working easily.

The first step was to create the code in my theme that would output the JS code for vex.js. This is a function that could be called from a button to pop open the form.

    function openform(){
      var vex_popup = vex.dialog.open({
        message: '',
      className : 'vex-theme-plain',
      callback: function(data) {}
      });
    }

In this code the wordpress do_shortcode is used to run the contact form 7 code. Contact form 7 will insert line breaks between the form elements, which will break the javascript. For this reason the code is also wrapped in a regex expression to remove them.

Now the form should be printed out inside the vex popup. Vex adds its own buttons to the bottom which we don’t want. Vex does not seem to currently offer a way to remove them so the easiest way to to style the contact form button and hide the vex buttons with css.

On the contact form 7 screen the following html should be added instead of the standard submit tag.

-
 <div class="vex-dialog-buttons vex-contact">
   <p>
      <button type="submit" class="vex-dialog-button-primary vex-dialog-button vex-first">
        Submit
    </button> 
   </p>
 </div>
--

This will then make use of the default vex styling and prevent the need for this to be duplicated. The next step is to hide the other buttons. The following CSS should do this.

.vex .vex-dialog-buttons.vex-contact{
  display:block;
  }

.vex p{
  margin:0px;
  }

Now the buttons should appear like the original buttons shown on the vex popup. Now the final step is to hook the close action into the submission of the contact form. This can be added to the contact form 7 additional settings page.

on_sent_ok:vex.close($vex_popup.data().vex.id);

This will close the window when the form is successfully submitted.