form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 5px solid #219ebc;
  border-radius: 15px;
  background-color: #fff;
}
/* style the form title */
h1 {
  text-align: center;
  font-size: 36px;
  margin-top: 0;
  color: #023047;
  font-family: Arial, sans-serif;
}
/* style the form fields */
label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: #023047;
}
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 3px solid #8ecae6;
  box-sizing: border-box;
  margin-bottom: 20px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: #023047;
}
textarea {
  height: 150px;
  resize: none;
}
/* style the submit button */
button[type="submit"] {
  background-color: #023047;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 24px;
  font-family: Arial, sans-serif;
  transition: all 0.3s ease;
}
button[type="submit"]:hover {
  background-color: #0077b6;
}
/* style the error messages */
.error {
  color: red;
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
}
/* adjust styles for smaller screens */
@media (max-width: 600px) {
  form {
    max-width: 90%;
    margin: 0 auto;
    padding: 10px;
  }
  input[type="text"],
  input[type="email"],
  textarea {
    padding: 5px;
    font-size: 16px;
  }
  textarea {
    height: 100px;
  }
  button[type="submit"] {
    font-size: 18px;
    padding: 8px 16px;
  }
  /* radio buttons */
  input[type="radio"][name="moderator-experience"],
  input[type="radio"][name="contribution"] {
    appearance: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    outline: none;
    transition: border-color 0.3s ease-in-out;
    margin-right: 5px;
  }
  input[type="radio"][name="moderator-experience"]:checked,
  input[type="radio"][name="contribution"]:checked {
    border-color: #023047;
  }
  label[for="moderator-experience-yes"],
  label[for="moderator-experience-no"],
  label[for="contribution-yes"],
  label[for="contribution-no"] {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #023047;
    margin-bottom: 10px;
  }
  input[type="radio"][name="moderator-experience"],
  input[type="radio"][name="contribution"] {
    width: 16px;
    height: 16px;}
    @media (max-width: 600px) {
    form {
    max-width: 90%;
    margin: 0 auto;
    padding: 10px;
    }
    
    input[type="text"],
    input[type="email"],
    textarea {
    padding: 5px;
    font-size: 16px;
    }
    
    textarea {
    height: 100px;
    }
    
    button[type="submit"] {
    font-size: 18px;
    padding: 8px 16px;
    }
    
    /* radio buttons */
    input[type="radio"][name="moderator-experience"],
    input[type="radio"][name="contribution"] {
    appearance: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    outline: none;
    transition: border-color 0.3s ease-in-out;
    margin-right: 5px;
    }
    
    input[type="radio"][name="moderator-experience"]:checked,
    input[type="radio"][name="contribution"]:checked {
    border-color: #023047;
    }
    
    label[for="moderator-experience-yes"],
    label[for="moderator-experience-no"],
    label[for="contribution-yes"],
    label[for="contribution-no"] {
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #023047;
    margin-bottom: 10px;
    margin-right: 10px;
    }
    
    input[type="radio"][name="moderator-experience"],
    input[type="radio"][name="contribution"] {
    width: 16px;
    height: 16px;
    }
    }
  /* adjust styles for smaller screens */
@media (max-width: 600px) {
  /* radio buttons */
label[for="moderator-experience-yes"],
label[for="moderator-experience-no"],
label[for="contribution-yes"],
label[for="contribution-no"],
input[type="radio"][name="moderator-experience"],
input[type="radio"][name="contribution"],
input[type="text"],
input[type="email"] {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 10px;
}
  input[type="radio"][name="moderator-experience"],
  input[type="radio"][name="contribution"] {
    appearance: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    outline: none;
    transition: border-color 0.3s ease-in-out;
    margin-right: 5px;
  }
  input[type="radio"][name="moderator-experience"]:checked,
  input[type="radio"][name="contribution"]:checked {
    border-color: #023047;
  }
  label[for="moderator-experience-yes"],
  label[for="moderator-experience-no"],
  label[for="contribution-yes"],
  label[for="contribution-no"] {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #023047;
    margin-bottom: 10px;
  }
  input[type="radio"][name="moderator-experience"],
  input[type="radio"][name="contribution"] {
    width: 16px;
    height: 16px;
  }
  /* answer fields */
  .answer {
    display: block;
    margin-bottom: 20px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #023047;
  }
  .answer input[type="text"] {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 3px solid #8ecae6;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    color: #023047;
  }
  .answer textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    border-radius: 5px;
    border: 3px solid #8ecae6;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    color: #023047;
  }
}

<!DOCTYPE html>
<html>
<head>
	<title>Mod Application Form</title>
   <link rel="stylesheet" type="text/css" href="{% static 'css/style-form.css' %}">
</head>
<body>
	<h1 id="mod-text">Mod Application Questions</h1>
	<form id="mod-application-form">
		<label for="excitement">1. What makes you excited to become a part of our staff team?</label><br>
		<textarea id="excitement" name="excitement" required></textarea><br><br>
		
		<label for="time-commitment">2. How much time can you dedicate to our server on a regular basis?</label><br>
		<input type="text" id="time-commitment" name="time-commitment" required><br><br>
		
		<label for="messages-commitment">3. How many messages can you commit to writing each day as a staff member?</label><br>
		<input type="text" id="messages-commitment" name="messages-commitment" required><br><br>
		
		<label for="rule-breaking-action">4. If you come across a member who is breaking our rules, what actions would you take?</label><br>
		<textarea id="rule-breaking-action" name="rule-breaking-action" required></textarea><br><br>
		
		<label for="moderator-experience">5. Have you had any previous experience as a moderator on other servers?</label><br>
		<input type="radio" id="moderator-experience-yes" name="moderator-experience" value="yes" required>
		<label for="moderator-experience-yes">Yes</label><br>
		<input type="radio" id="moderator-experience-no" name="moderator-experience" value="no" required>
		<label for="moderator-experience-no">No</label><br><br>
		
		<label for="largest-membership">6. What is the largest number of members you've moderated on previous servers?</label><br>
		<input type="text" id="largest-membership" name="largest-membership" required><br><br>
		
		<label for="typing-speed">7. What is your typing speed (in words per minute)?</label><br>
		<input type="text" id="typing-speed" name="typing-speed" required><br><br>
		
		<label for="staff-role-removal">8. If your staff role is taken away due to inactivity or any other reason, how would you react?</label><br>
		<textarea id="staff-role-removal" name="staff-role-removal" required></textarea><br><br>
		
		<label for="contribution">9. Are you willing to contribute your owo/bot coins to support events and activities on our server?</label><br>
		<input type="radio" id="contribution-yes" name="contribution" value="yes" required>
		<label for="contribution-yes">Yes</label><br>
		<input type="radio" id="contribution-no" name="contribution" value="no" required>
		<label for="contribution-no">No</label><br><br>
		
		<input style="background-color: #008CBA;
  color: #00ffee;
  padding: 30px 275px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;" type="submit" value="Submit">
	</form>
	<script>
		document.getElementById("mod-application-form").addEventListener("submit", (function(event) {
event.preventDefault(); // prevent the default form submission
// get the form data and format it as a string
const formData = new FormData(event.target);
let formString = '';
for (const [name, value] of formData.entries()) {
formString +=`${name}: ${value}\n`;
}
// send the form data as an email
const emailBody = encodeURIComponent(formString);
const emailLink = `mailto:mymai@gmail.com?subject=Mod%20Application&body=${emailBody}`;
window.location.href = emailLink;
}));
</script>
</body>
</html>

    form {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      border: 5px solid #219ebc;
      border-radius: 15px;
      background-color: #fff;
      font-family: Arial, sans-serif;
      color: #023047;
    }
    /* style the form title */
    h1 {
      text-align: center;
      font-size: 36px;
      margin-top: 0;
    }
    /* style the form fields */
    label {
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
    }
    /*added this */
    label:is([for="moderator-experience-yes"],[for="moderator-experience-no"],
  [for="contribution-yes"],[for="contribution-no"]) {
    display:inline;
  }
    /* adjust styles for smaller screens */
    @media (max-width: 600px) {
      form {
        max-width: 90%;
        margin: 0 auto;
        padding: 10px;
      }
      /* radio buttons */
      /* not needed */ 
    }

  <h1 id="mod-text">Mod Application Questions</h1>
  <form id="mod-application-form">
    <label for="moderator-experience">5. Have you had any previous experience as a moderator on other
      servers?</label><br>
    <input type="radio" id="moderator-experience-yes" name="moderator-experience" value="yes" required>
    <label for="moderator-experience-yes">Yes</label><br>
    <input type="radio" id="moderator-experience-no" name="moderator-experience" value="no" required>
    <label for="moderator-experience-no">No</label><br><br>
  </form>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<style>
form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 5px solid #219ebc;
border-radius: 15px;
background-color: #fff;
}
/* style the form title */
h1 {
text-align: center;
font-size: 36px;
margin-top: 0;
color: #023047;
font-family: Arial, sans-serif;
}
/* style the form fields */
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
font-family: Arial, sans-serif;
color: #023047;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 3px solid #8ecae6;
box-sizing: border-box;
margin-bottom: 20px;
font-size: 16px;
font-family: Arial, sans-serif;
color: #023047;
}
textarea {
height: 150px;
resize: none;
}
/* style the submit button */
button[type="submit"] {
background-color: #023047;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 24px;
font-family: Arial, sans-serif;
transition: all 0.3s ease;
}
button[type="submit"]:hover {
background-color: #0077b6;
}
/* style the error messages */
.error {
color: red;
margin-bottom: 10px;
font-family: Arial, sans-serif;
}
/* adjust styles for smaller screens */
@media (max-width: 600px) {
form {
max-width: 90%;
margin: 0 auto;
padding: 10px;
}
input[type="text"],
input[type="email"],
textarea {
padding: 5px;
font-size: 16px;
}
textarea {
height: 100px;
}
button[type="submit"] {
font-size: 18px;
padding: 8px 16px;
}
.radion-btns,
.radion-btn {
display: flex;
}
}
/* radio buttons */
input[type="radio"][name="moderator-experience"],
input[type="radio"][name="contribution"] {
appearance: none;
border-radius: 50%;
width: 20px;
height: 20px;
border: 2px solid #ccc;
outline: none;
transition: border-color 0.3s ease-in-out;
margin-right: 5px;
}
input[type="radio"][name="moderator-experience"]:checked,
input[type="radio"][name="contribution"]:checked {
border-color: #023047;
}
label[for="moderator-experience-yes"],
label[for="moderator-experience-no"],
label[for="contribution-yes"],
label[for="contribution-no"] {
display: block;
font-family: Arial, sans-serif;
font-size: 16px;
color: #023047;
margin-bottom: 10px;
}
input[type="radio"][name="moderator-experience"],
input[type="radio"][name="contribution"] {
width: 16px;
height: 16px;
}
@media (max-width: 600px) {
form {
max-width: 90%;
margin: 0 auto;
padding: 10px;
}
input[type="text"],
input[type="email"],
textarea {
padding: 5px;
font-size: 16px;
}
textarea {
height: 100px;
}
button[type="submit"] {
font-size: 18px;
padding: 8px 16px;
}
/* radio buttons */
input[type="radio"][name="moderator-experience"],
input[type="radio"][name="contribution"] {
appearance: none;
border-radius: 50%;
width: 20px;
height: 20px;
border: 2px solid #ccc;
outline: none;
transition: border-color 0.3s ease-in-out;
margin-right: 5px;
}
input[type="radio"][name="moderator-experience"]:checked,
input[type="radio"][name="contribution"]:checked {
border-color: #023047;
}
label[for="moderator-experience-yes"],
label[for="moderator-experience-no"],
label[for="contribution-yes"],
label[for="contribution-no"] {
display: inline-block;
font-family: Arial, sans-serif;
font-size: 16px;
color: #023047;
margin-bottom: 10px;
margin-right: 10px;
}
input[type="radio"][name="moderator-experience"],
input[type="radio"][name="contribution"] {
width: 16px;
height: 16px;
}
}
/* adjust styles for smaller screens */
@media (max-width: 600px) {
/* radio buttons */
label[for="moderator-experience-yes"],
label[for="moderator-experience-no"],
label[for="contribution-yes"],
label[for="contribution-no"],
input[type="radio"][name="moderator-experience"],
input[type="radio"][name="contribution"],
input[type="text"],
input[type="email"] {
font-size: 20px;
line-height: 30px;
margin-bottom: 10px;
}
input[type="radio"][name="moderator-experience"],
input[type="radio"][name="contribution"] {
appearance: none;
border-radius: 50%;
width: 20px;
height: 20px;
border: 2px solid #ccc;
outline: none;
transition: border-color 0.3s ease-in-out;
margin-right: 5px;
}
input[type="radio"][name="moderator-experience"]:checked,
input[type="radio"][name="contribution"]:checked {
border-color: #023047;
}
label[for="moderator-experience-yes"],
label[for="moderator-experience-no"],
label[for="contribution-yes"],
label[for="contribution-no"] {
display: block;
font-family: Arial, sans-serif;
font-size: 16px;
color: #023047;
margin-bottom: 10px;
}
input[type="radio"][name="moderator-experience"],
input[type="radio"][name="contribution"] {
width: 16px;
height: 16px;
}
/* answer fields */
.answer {
display: block;
margin-bottom: 20px;
font-weight: bold;
font-family: Arial, sans-serif;
color: #023047;
}
.answer input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 3px solid #8ecae6;
box-sizing: border-box;
margin-bottom: 10px;
font-size: 16px;
font-family: Arial, sans-serif;
color: #023047;
}
.answer textarea {
width: 100%;
height: 100px;
padding: 10px;
border-radius: 5px;
border: 3px solid #8ecae6;
box-sizing: border-box;
margin-bottom: 20px;
font-size: 16px;
font-family: Arial, sans-serif;
color: #023047;
}
}
</style>
</head>
<body>
<div id="root"></div>
<h1 id="mod-text">Mod Application Questions</h1>
<form id="mod-application-form">
<label for="excitement"
>1. What makes you excited to become a part of our staff team?</label
><br />
<textarea id="excitement" name="excitement" required></textarea
><br /><br />
<label for="time-commitment"
>2. How much time can you dedicate to our server on a regular
basis?</label
><br />
<input
type="text"
id="time-commitment"
name="time-commitment"
required
/><br /><br />
<label for="messages-commitment"
>3. How many messages can you commit to writing each day as a staff
member?</label
><br />
<input
type="text"
id="messages-commitment"
name="messages-commitment"
required
/><br /><br />
<label for="rule-breaking-action"
>4. If you come across a member who is breaking our rules, what actions
would you take?</label
><br />
<textarea
id="rule-breaking-action"
name="rule-breaking-action"
required
></textarea
><br /><br />
<label for="moderator-experience"
>5. Have you had any previous experience as a moderator on other
servers?</label
><br />
<div class="radion-btns">
<div class="radion-btn">
<input
type="radio"
id="moderator-experience-yes"
name="moderator-experience"
value="yes"
required
/>
<label for="moderator-experience-yes">Yes</label><br />
</div>
<div class="radion-btns">
<input
type="radio"
id="moderator-experience-no"
name="moderator-experience"
value="no"
required
/>
<label for="moderator-experience-no">No</label>
</div>
</div>
<br /><br />
<label for="largest-membership"
>6. What is the largest number of members you've moderated on previous
servers?</label
><br />
<input
type="text"
id="largest-membership"
name="largest-membership"
required
/><br /><br />
<label for="typing-speed"
>7. What is your typing speed (in words per minute)?</label
><br />
<input
type="text"
id="typing-speed"
name="typing-speed"
required
/><br /><br />
<label for="staff-role-removal"
>8. If your staff role is taken away due to inactivity or any other
reason, how would you react?</label
><br />
<textarea
id="staff-role-removal"
name="staff-role-removal"
required
></textarea
><br /><br />
<label for="contribution"
>9. Are you willing to contribute your owo/bot coins to support events
and activities on our server?</label
><br />
<div class="radion-btns">
<div class="radion-btn">
<input
type="radio"
id="contribution-yes"
name="contribution"
value="yes"
required
/>
<label for="contribution-yes">Yes</label>
</div>
<div class="radion-btn">
<input
type="radio"
id="contribution-no"
name="contribution"
value="no"
required
/>
<label for="contribution-no">No</label>
</div>
</div>
<br />
<input
style="
background-color: #008cba;
color: #00ffee;
padding: 30px 275px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
"
type="submit"
value="Submit"
/>
</form>
<script>
document
.getElementById("mod-application-form")
.addEventListener("submit", function (event) {
event.preventDefault(); // prevent the default form submission
// get the form data and format it as a string
const formData = new FormData(event.target);
let formString = "";
for (const [name, value] of formData.entries()) {
formString += `${name}: ${value}\n`;
}
// send the form data as an email
const emailBody = encodeURIComponent(formString);
const emailLink = `mailto:mymai@gmail.com?subject=Mod%20Application&body=${emailBody}`;
window.location.href = emailLink;
});
</script>
</body>
</html>