A custom template for my webform to fetch in the Doctype (i want to change the HTML and CSS)

I am new to the webform part of frappe and am trying to change the default template of the webform in my frappe application for a Student Application doctype which has fields student_name student_age student_dob student_gender student_phone`.

As i could not find a way to change the webform template. I have created a webpage and added the following code for a registration form. Now i want to create a new document in the doctype on the basis of fields filled in the form.

<!DOCTYPE html>
    <title>Student Application Form</title>
      function formatDate() {
        var dob = document.getElementById("student_dob");
        var parts = dob.value.split("-");
        dob.value = parts[2] + "-" + parts[1] + "-" + parts[0];
    <form method="POST" action="/api/method/myapp.mymodule.student_application.submit_student_application" onsubmit="formatDate()">
      <h1>Student Application Form</h1>
      <label for="student_name">Name:</label>
      <input type="text" id="student_name" name="student_name" required>
      <label for="student_age">Age:</label>
      <input type="number" id="student_age" name="student_age" required>
      <label for="student_dob">Date of Birth:</label>
      <input type="date" id="student_dob" name="student_dob" required>
      <label for="student_gender">Gender:</label>
      <input type="radio" id="male" name="student_gender" value="male">
      <label for="male">Male</label>
      <input type="radio" id="female" name="student_gender" value="female">
      <label for="female">Female</label>
      <input type="radio" id="other" name="student_gender" value="other">
      <label for="other">Other</label>
      <label for="student_phone">Phone:</label>
      <input type="tel" id="student_phone" name="student_phone" required>
      <input type="submit" value="Submit">

It would be a great help if anyone could help, Thank you