Add HTML to Contact Form 7 Email on Submit

Question

I am adding Contact Form 7 to a page that also has a dynamically-generated HTML table with data specific to that user. When that user fills out the form and submits it, I have the form set up to send an HTML-formatted email back to us. I need to add the table as an HTML element in the email, but none of the methods I've tried are working. Assume a very basic table:


  
    Company
    Contact
    Country
  
  
    Ach zo
    Hans Gruber
    Germany
  
  
    El Moctezuma
    Juan Epstein
    Mexico

I tried adding this Javascript event listener to the PHP code of the WordPress page in question, as suggested by Contact Form 7's documentation:

document.addEventListener( 'wpcf7submit', function( event ) {
    var carttable = document.getElementById("carttable").innerHTML;
    document.getElementsByClassName("wpcf7-form").appendChild(carttable);
}, false );

But this throws an error:

Uncaught TypeError: document.getElementsByClassName(...).appendChild is not a function

Since appendChild can only return a node, I tried:

document.addEventListener( 'wpcf7submit', function( event ) {
    var carttable = document.getElementById("carttable").innerHTML;
    document.getElementsByClassName("wpcf7-form")[0].appendChild(carttable);
}, false );

But this returned the error:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

As it is, I don't know if, given the plugin's functionality, this approach would even result in getting the HTML of the table added to the email of the form details we get sent back to us, as it only gathers specific fields identified in the mail settings for that specific form. Is there a direct way to append HTML into that email when submitting the form? Thanks in advance for any help you can provide here.

EDIT: As requested, here is the HTML of the Contact 7 form I am using on this page:









 Your Name (required)

     
 Your Email (required)

     
 Company

     
 Phone

     
 Your Message

jimiayler · Accepted Answer

So, the solution I was able to discover with the help of another developer was completely outside of the events made available by Contact Form 7, because they all fire after submitting the form. I had to add this piece of code to the end of the theme.js file located at the WordPress theme we're using: /wp-content/themes/vg-ebuilder/assets/js/theme.js. This captures the submit before the form is serialized for the Ajax call and parses the table into new arrays to be pushed to the email body:

jQuery(".wpcf7-form").on('submit', function(event){
var carttable = document.getElementById("carttable");

var cartHTML = document.getElementById("ShoppingCart");
    if (!cartHTML)
{
     cartHTML = document.createElement("INPUT");
     cartHTML.setAttribute("type", "hidden");
        cartHTML.id = "ShoppingCart";
        cartHTML.name = "ShoppingCart";
    }


    var csv = [];
    var rows = carttable.querySelectorAll("table tr");
    var header = [];

    //Build the header
    if (rows.length > 0)
    {
        var headCols = rows[0].querySelectorAll("td, th");
        for (var t = 1; t < headCols.length - 2; t++)
        {
            header.push(headCols[t].innerText);
        }
    }

    //Retrieve the data
for (var i = 1; i < rows.length - 1; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");

for (var j = 1; j < cols.length - 2; j++)
{
    if (jQuery(cols[j]).find("INPUT").length > 0)
    {
        row.push(header[j - 1] + ": " + jQuery(cols[j]).find("INPUT").val());
    }
    else
    row.push(header[j - 1] + ": " + cols[j].innerText);
}

        csv.push(row.join("
"));        
        csv.push("
");    
        csv.push("-------------------------------------------------------------");    
        csv.push("
");    
    }

    cartHTML.value = csv.join("
");

    document.getElementsByClassName("wpcf7-form")[0].appendChild(cartHTML);
});

You then need to update the Mail portion of the form in the Contact Form 7 settings to include a new variable called ShoppingCart:

It's a shame that so much effort has to be made for such simple DOM retrieval/injection. Since they have deprecated Javascript inclusion before submitting in favor of DOM event listeners, it would be nice if they could allow some customization of an email prior to sending one from a form submit.

Add HTML to Contact Form 7 Email on Submit

Answers (2)

Related Questions