Contact us form - displayed when a button is clicked

Question

I'm trying to get a button to run a JavaScript function that prints out a contact form for my website, but it's not working. The button comes up, but when you click it, the form doesn't show up.

Here is the code in my JavaScript page:

    function myFunction() {
    document.getElementById("demo").innerHTML = 
    '<div class="container">'
    +'<form action="/action_page.php">'
    +'<label for="fname">First Name</label>'
    +'<input type="text" id="fname" name="firstname" placeholder="Your 
    name..">'

    + '<label for="lname">Last Name</label>'
    +'<input type="text" id="lname" name="lastname" placeholder="Your last 
    name..">'

    +'<label for="country">Country</label>'
    +'<select id="country" name="country">'
    +'<option value="australia">Australia</option>'
    +'<option value="canada">Canada</option>'
    +'<option value="usa">USA</option>'
    +'</select>'

    +'<label for="subject">Subject</label>'
    +'<textarea id="subject" name="subject" placeholder="Write something.." 
    style="height:200px"></textarea>'

    +'<input type="submit" value="Submit">'
    +'</form>'
    +'</div>';
    }

Here's the code in the Contact Us page:

    <button onclick="myFunction()">If you have any questions, concerns, or 
    comments please click here to send us an email: </button>
    <p id="demo"></p>

I've tried doing it without the concatenation and that doesn't work either.

Any help would be much appreciated.

Answer 1

The htmlString is not properly concatenated. I also prefer JavaScript to bind the function instead of inline event handler:

function myFunction() {
    document.getElementById("demo").innerHTML = 
    '<div class="container">'
    +'<form action="/action_page.php">'
    +'<label for="fname">First Name</label>'
    +'<input type="text" id="fname" name="firstname" placeholder="Your name..">'

    + '<label for="lname">Last Name</label>'
    +'<input type="text" id="lname" name="lastname" placeholder="Your last name..">'

    +'<label for="country">Country</label>'
    +'<select id="country" name="country">'
    +'<option value="australia">Australia</option>'
    +'<option value="canada">Canada</option>'
    +'<option value="usa">USA</option>'
    +'</select>'

    +'<label for="subject">Subject</label>'
    +'<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>'

    +'<input type="submit" value="Submit">'
    +'</form>'
    +'</div>';
    }
    
document.getElementById('myBtn').addEventListener('click',myFunction);

<button id="myBtn">If you have any questions, concerns, or 
comments please click here to send us an email: </button>
<p id="demo"></p>

Though I prefer using Template Literals to from the htmlString which is more cleaner.

function myFunction() {
  document.getElementById("demo").innerHTML = 
    `<div class="container">'
    <form action="/action_page.php">
    <label for="fname">First Name</label>'
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
    <option value="australia">Australia</option>
    <option value="canada">Canada</option>
    <option value="usa">USA</option>
    </select>
    
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    <input type="submit" value="Submit">
    </form></div>`;
}
 document.getElementById('myBtn').addEventListener('click',myFunction);

<button id="myBtn">If you have any questions, concerns, or 
comments please click here to send us an email: </button>
<p id="demo"></p>

Answer 2

Your code is perfectly working, there an only issue of unnecessary enter like you enter in placeholder.

checkout the example below

function myFunction() {
        document.getElementById("demo").innerHTML = 
        '<div class="container">'
        +'<form action="/action_page.php">'
        +'<label for="fname">First Name</label>'
        +'<input type="text" id="fname" name="firstname" placeholder="Your name..">'

        + '<label for="lname">Last Name</label>'
        +'<input type="text" id="lname" name="lastname" placeholder="Your last name..">'

        +'<label for="country">Country</label>'
        +'<select id="country" name="country">'
        +'<option value="australia">Australia</option>'
        +'<option value="canada">Canada</option>'
        +'<option value="usa">USA</option>'
        +'</select>'

        +'<label for="subject">Subject</label>'
        +'<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>'

        +'<input type="submit" value="Submit">'
        +'</form>'
        +'</div>';
    }

Answer 3

Don't use a function to create the HTML.

// Get the contact form button and add an event listener for the click
document.getElementById("show-contact-form").addEventListener("click", function(e) {

  // When the button is clicked, remove the hidden class, which will show the contact form
  document.getElementById("contact-form").classList.remove("hidden");

  // Hide the contact us button
  this.classList.add("hidden");
});

/* Used to hide content */
.hidden {
  display: none;
}

<!-- Create the form with straight HTML -->
<div id="contact-form" class="container hidden">
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    <label for="country">Country</label>
    <select id="country" name="country">
      option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    <input type="submit" value="Submit">
  </form>
</div>

<!-- Button to show contact form -->
<button id="show-contact-form">Contact us</button>