How to Manage Text Input and Output with JavaScript for HTML5 and CSS3 Programming

In JavaScript, we can get user input like this: 
var name = window.prompt("Enter your name: "); 
alert("Your name is " + name);

<h2 class="main-heading">Subscribe to our Newsletter</h2>
<div class="subscribe-card-container">
    <div class="subscribe-card">
        <form method="post" action-xhr="/submit-form" target="_top" class="main-form">
            <div class="input">
                <input type="text" name="name" id="form-name" required>
                <label for="form-name">Name:</label>
            </div>
            <div class="input">
                <input type="email" name="email" id="form-email" required>
                <label for="form-email">Email:</label>
            </div>
            <input type="submit" value="Subscribe" class="btn">
        </form>
    </div>
</div>

<h2 class="main-heading">Subscribe to our Newsletter</h2>