Attach Javascript textContent to WP Contact Form 7 before submit

Question

We developed a hearing test and I have to attach it's outcome to a WordPress Contact Form 7.

You can see the test here http://in-dem-ohr.de/hoertest/test/

I try to call the form by ID, create new Textarea and append textContent into it. But it does not work.

Can someone help me find the solution?

Peace of Javascript code that writes the test result in a Textarea in HTML page

lblTon.textContent = "Schritt: " + ton + "/15 Auswertung"
hoerAusWertung.textContent = "Auswertung" + "\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "############################" + "\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Links 0250Hz 
Lautstärke:" + (vol1l * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Links 0500Hz 
Lautstärke:" + (vol2l * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Links 1000Hz 
Lautstärke:" + (vol3l * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Links 2000Hz 
Lautstärke:" + (vol4l * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Links 3000Hz 
Lautstärke:" + (vol5l * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Links 4000Hz 
Lautstärke:" + (vol6l * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Links 6000Hz 
Lautstärke:" + (vol7l * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + 
"############################" + "\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Rechts 
0250Hz Lautstärke:" + (vol1r * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Rechts 
0500Hz Lautstärke:" + (vol2r * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Rechts 1000Hz Lautstärke:" + (vol3r * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Rechts 2000Hz Lautstärke:" + (vol4r * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Rechts 3000Hz Lautstärke:" + (vol5r * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Rechts 4000Hz Lautstärke:" + (vol6r * 100).toFixed(1) + "%\r\n"
hoerAusWertung.textContent = hoerAusWertung.textContent + "Rechts 6000Hz Lautstärke:" + (vol7r * 100).toFixed(1) + "%\r\n"

Contact Form 7 Explaination on how to add Javascript into form: https://contactform7.com/dom-events/

I added this into Form field:

document.addEventListener( 'wpcf7submit', function( event ) { //Code here

}, false );

And wrote a code with appendChild function:

'wpcf7submit', function( event ) { var ausw1 = document.getElementById("hoerAusWertung").textContent; document.createElement("textarea").appendChild(ausw1); }, false );

And I still can not append the test Result. I can not move textContent from the textarea, probably because it's written by JavaScript and I should transform it into some kind of text file or an object. But I do not know how, so if anyone can help me?

Beneris Beneris · Accepted Answer · 2017-09-21T09:47:16

Contact form 7 sends all input fields if they are wrapped in to form. I usually do that with jquery, just appending in to form.

Another thing, is sending those new added field by email. you can define those fields in email template or add custom function to list all fields who going after specific input field. for example you can add function to functions.php

function add_extra_details($mail_params, $form = null) {

$fields = $_POST;
$add_status = false;

foreach ($fields as $k => $v) {
    if ($add_status == true) {
        $mail_params['body'] .= '<br />'.$k.': '.$v;
    }
    if ($k == 'extra-fields') {
        $add_status = true;
    }
}
$mail_params['body'] .= '<br />IP: '.$_SERVER['REMOTE_ADDR'];

return $mail_params;

} add_filter( 'wpcf7_mail_components', 'add_extra_details', 50, 2 );

if contact form contains field extra-fields all fields going after this field will be added dynamically

Attach Javascript textContent to WP Contact Form 7 before submit

1 Answers