Question

In this assignment, you will use your basic JavaScript knowledge to create an interactive component to your client’s website. This interactive element should be based on one of your CTAs. What does this mean? Think about one of the things that you want to do to get your visitors engaged with your site. Then create a form that the visitor will fill out and to which you will provide some response. Your form should be specific to your website CTA. The information you collect on your form will also be specific to your CTA. You may be as simple or as complex as you like with your JavaScript, but it should work without error or failure. General requirements: • Create an html document containing your CTA form • The form should be appropriately formatted using CSS (this is a business application that you are developing) • You should collect information using at least two different input types • Use fieldsets to separate the different categories of information you are gathering • Use some part of the input (or all if you like) to create a response using a JavaScript function. • Use the alert method to provide the response to your visitor Things to look out for: • Be sure to use the input type=button to trigger your function. DO NOT use submit. • Use notepad++ to edit your code so that you have the color-coding to help you troubleshoot • Curly braces and/or semicolons are often a cause of failures (too many or too few)

Answer 1

I am going to try my best to explain and provide an efficient and effective solution to your problem covering every requirement of yours and if it helps then please leave a like.

Since you have not provided me with the details of the kind of form I should make that is why I am creating an interactive login form using HTML CSS and javascript.

HTML

This Html code has two input type which is email and password and a button.

<div class="form-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Login</h1>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
    <button type="submit" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div

CSS

{box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}

/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}

JAVASCRIPT

<script>

function openForm() {
document.getElementById("myForm").style.display = "block";
}

function closeForm() {
document.getElementById("myForm").style.display = "none";
}

function WhatsInsideWalmart() {
alert("Hurray Thank you for Choosing Walmart Please Complete Your Registration process to enjoy all services");
}
</script>

Here is the entire code all are kept in a single file and are very simple so that you will not have any difficulty in understanding.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}

/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
</style>
</head>
<body>

<h2>Welcome to Your Registeration Process to Enter Walmart</h2>
<p>Click on the button at the bottom of this page to open the form and enter your details.</p>

<button class="open-button" onclick="openForm()">Open Form</button>
<button type="button" onclick="WhatsInsideWalmart()">WhatsInsideWalmart</button>

<div class="form-popup" id="myForm">
<form action="" class="form-container">

   <fieldset>
   <h1>Walmart Registeration process</h1>

<label for="email"><b>Email Id</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
  
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
  
</fieldset>
  
<button type="submit" class="btn">Login</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  
  
</form>
</div>

<script>

function openForm() {
document.getElementById("myForm").style.display = "block";
}

function closeForm() {
document.getElementById("myForm").style.display = "none";
}

function WhatsInsideWalmart() {
alert("Hurray Thankyou for Choosing Walmart Please Complete Your Registeration process to enjoy all services");
}
</script>

</body>
</html>

.I hope my solution cover all your requirement and if you have any doubt ask me in the comment and leave a like it will be a great help.