How to make text from an input appear in another space as user goes typing on it?

Question

I have a Wordpress contact form and it does NOT accept HTML/JavaScript content, but only a sort of BBCode like this:

[contact-form]
 [contact-field label="Name" type="name" required="1"/]
 [contact-field label="E-mail" type="email" required="1"/]
 [contact-field label="Website" type="url"/]
 [contact-field label="Comment" type="textarea" required="1"/]
[/contact-form]

My goal is do the same as this.

Answer 1

As the bbcode form will get converted into raw html form as output, you can track the id of the field by inspecting the element from browser. You can use https://wordpress.org/plugins/custom-css-js/ for adding custom javascript into your site.

For example you have an output like this from the bbcode type form:

<div class='chatbox' id='chatbox'></div>
<input type='text' name='name' class='chatinput' id='chatinput'>

You can add some simple JavaScript code to get the job done:

var input = document.getElementById('chatinput');
input.onkeyup = function(){
    document.getElementById('chatbox').innerHTML = input.value;
}