Scribd
Upload
160 views3 pages

CS511 Solution 30 April 2024

The document contains HTML code for a contact form with fields for name, email, and subscription frequency. It uses JavaScript to submit the form and display a thank you message upon successful submission.

Uploaded by

Raju Rocket
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
160 views3 pages

CS511 Solution 30 April 2024

The document contains HTML code for a contact form with fields for name, email, and subscription frequency. It uses JavaScript to submit the form and display a thank you message upon successful submission.

Uploaded by

Raju Rocket
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML CODE:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Contact Form</title>

</head>

<body style="font-family: Arial, sans-serif; background-color: #f0f0f0; padding: 20px;">

<!-- Contact Form -->

<div id="contactFormContainer" style="display: block;">

<div style="background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px


rgba(0,0,0,0.1); max-width: 400px; margin: 0 auto;">

<h2 style="text-align: center;">Subscribe To Our Newsletters</h2>

<form id="contactForm" onsubmit="submitForm(event)" style="text-align: left;">

<div style="margin-bottom: 15px;">

<label for="name" style="display: block; font-weight: bold;">Name:</label>

<input type="text" id="name" name="name" required style="width: 100%; padding: 10px;


border-radius: 5px; border: 1px solid #ccc;">

</div>

<div style="margin-bottom: 15px;">

<label for="email" style="display: block; font-weight: bold;">Email:</label>

<input type="email" id="email" name="email" required style="width: 100%; padding: 10px;


border-radius: 5px; border: 1px solid #ccc;">

</div>
<div style="margin-bottom: 15px;">

<p style="font-weight: bold;">Choose subscription frequency:</p>

<input type="radio" id="weekly" name="subscription" value="weekly" checked


style="margin-right: 5px;">

<label for="weekly" style="margin-right: 15px;">Weekly Newsletters</label>

<input type="radio" id="monthly" name="subscription" value="monthly" style="margin-right:


5px;">

<label for="monthly">Monthly Updates</label>

</div>

<input type="submit" value="Submit" name="submit" style="background-color: #4CAF50;


color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;
width: 100%;">

</form>

</div>

</div>

<!-- Thank You Message -->

<div id="thankYouContainer" style="display: none;">

<div style="background-color: #4CAF50; color: white; padding: 20px; border-radius: 10px; max-
width: 400px; margin: 20px auto;">

<h2 style="text-align: center; margin: 0;">Thank You!</h2>

<p style="text-align: center; margin: 10px 0;">Your message has been submitted successfully.</p>

</div>

</div>

<script>

function submitForm(event) {

event.preventDefault(); // Prevent default form submission


// Get form data

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

var subscription = document.querySelector('input[name="subscription"]:checked').value;

// Construct Thank You message

var thankYouMessage = "<div style='background-color: #4CAF50; color: white; padding: 20px;


border-radius: 10px; max-width: 400px; margin: 20px auto;'>";

thankYouMessage += "<h2 style='text-align: center; margin: 0;'>Thank You!</h2>";

thankYouMessage += "<p style='text-align: center; margin: 10px 0;'>Your message has been
submitted successfully.</p>";

thankYouMessage += "</div>";

// Hide contact form and display Thank You message

document.getElementById("contactFormContainer").style.display = "none";

document.getElementById("thankYouContainer").style.display = "block";

document.getElementById("thankYouContainer").innerHTML = thankYouMessage;

</script>

</body>

</html>

You might also like