Creating an HTML-Based Registration Form with AI (ChatGPT-4.0)
The development of an HTML-based registration form for the 2024 Fiji Dental Association Conference was conceived out of a need to simplify the registration process and make tasks more efficient for the registration team. Using AI, specifically ChatGPT-4.0, this project aimed to create a form that not only made registration easy and efficient but also automated several key functions.
The Initial Concept
The idea was to develop a registration form that could:
- Collect user information: Basic details such as name, email, and preferences.
- Calculate totals: Based on user selections, the form would compute the total cost or other relevant metrics.
- Automate email submission: Upon completion, the form would redirect to the default email client with pre-filled entries, making the process seamless for the user.
The Development Process
- Designing the Form Structure:
- The first step was to outline the form’s structure using HTML. This included creating input fields for user details and selection options.
- CSS was used to style the form, ensuring it was user-friendly and visually appealing.
- Integrating AI for Dynamic Functionality:
- ChatGPT-4.0 was instrumental in generating JavaScript code snippets that handled the dynamic aspects of the form.
- The AI provided solutions for calculating totals based on user inputs. This involved writing functions that would update the total cost in real-time as users made their selections.
- Handling Form Submission:
- One of the most complex parts was automating the email submission process. The goal was to have the form data pre-filled in an email template upon submission.
- ChatGPT-4.0 assisted in generating the necessary JavaScript code to achieve this. The code captured the form data, formatted it, and then triggered the default email client with the pre-filled information.
Overcoming Challenges
Throughout the development, several challenges were encountered:
- Ensuring Accuracy: It was crucial that the calculations were accurate and updated in real-time. This required multiple iterations and testing.
- Email Automation: Making sure the email client opened with the correct pre-filled data was tricky. Different email clients handle pre-filled data differently, so the code had to be adaptable.
The Final Product
The final registration form was a testament to the power of AI in web development. It successfully:
- Collected user data efficiently.
- Performed real-time calculations.
- Automated the email submission process, enhancing user experience.
This form was used for the 2024 Fiji Dental Association Conference registration, making the registration process easy and efficient for all participants.
Fiji Dental Association Annual Dental Conference and AGM Registration 2024 – Printable Form
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#registrationForm {
max-width: 600px;
margin: auto;
}
#registrationForm label {
display: block;
margin-bottom: 5px;
}
#registrationForm input,
#registrationForm select {
width: 100%;
margin-bottom: 10px;
}
#total-cost {
font-weight: bold;
margin-bottom: 20px;
}
.button {
display: inline-block;
padding: 10px;
color: white;
text-decoration: none;
border-radius: 4px;
margin-bottom: 20px;
}
#printDetailedButton {
background-color: #FF9800;
}
#summary, #detailed-summary {
display: none;
}
@media print {
#printDetailedButton, #registerLink, #registrationForm {
display: none;
}
#summary, #detailed-summary {
display: block;
}
}
<h2>Fiji Dental Association Annual Dental Conference and AGM Registration 2024</h2>
Name:
Email:
Phone:
Practice Clinic Name:
<strong>Conference Options:</strong>
Fiji Dental Association Member:
$0 (Not applicable)
Full Package $200
Scientific Session only $100
Dinner Function only $100
Non-member:
$0 (Not applicable)
Full Package $280
Scientific Session only $150
Dinner only $135
<p><strong>Dinner Function Only</strong></p>
Number of Accompanying Adults (Cost per adult: $135):
Number of Accompanying Children (5 to 15 years, Cost per child: $67.50):
Number of Accompanying Children (4 years and below, Free):
<div id="total-cost">Total Cost: $0.00</div>
<p>Payment Details: All to be paid into the Association's bank account:<br>
Name: Fiji Dental Association<br>
Account Number: 22635800<br>
Bank: Westpac<br>
Branch: Thomson St. Branch, Suva<br>
Swift Code: WPACFJFX</p>
<p>Clicking Register will redirect to your email app.<br>
A scanned copy of the deposit slip/evidence of payment is to be attached in the email, addressed to the Conference Registration Team:<br>
Treasurer: Dr. Tanveen Kaur, <a href="mailto:tk_achewzu@hotmail.com">tk_achewzu@hotmail.com</a><br>
and<br>
Secretary: Dr. Raman Reddy, <a href="mailto:kvraman.reddy@gmail.com">kvraman.reddy@gmail.com</a><br>
THANK YOU</p>
<a id="registerLink" href="#" class="button" style="background-color: #4CAF50">Register</a>
<a id="printDetailedButton" href="#" class="button" style="background-color: #FF9800">Print Detailed Form</a>
<div id="summary"></div>
<div id="detailed-summary"></div>
function calculateTotal() {
var fdaMember = document.getElementById("fda-member").value;
var nonMember = document.getElementById("non-member").value;
var numAdults = document.getElementById("num-adults").value;
var numChildren515 = document.getElementById("num-children-5-15").value;
var numChildren4Below = document.getElementById("num-children-4-below").value;
var total = 0;
if (fdaMember === 'full_package_200') total += 200;
if (fdaMember === 'scientific_session_100') total += 100;
if (fdaMember === 'dinner_function_100') total += 100;
if (nonMember === 'full_package_280') total += 280;
if (nonMember === 'scientific_session_150') total += 150;
if (nonMember === 'dinner_only_135') total += 135;
total += numAdults * 135;
total += numChildren515 * 67.5;
document.getElementById("total-cost").innerText = "Total Cost: $" + total.toFixed(2);
return total.toFixed(2);
}
document.getElementById("fda-member").addEventListener("change", calculateTotal);
document.getElementById("non-member").addEventListener("change", calculateTotal);
document.getElementById("num-adults").addEventListener("input", calculateTotal);
document.getElementById("num-children-5-15").addEventListener("input", calculateTotal);
document.getElementById("num-children-4-below").addEventListener("input", calculateTotal);
function submitForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var clinicName = document.getElementById("clinic-name").value;
var fdaMember = document.getElementById("fda-member").value;
var nonMember = document.getElementById("non-member").value;
var numAdults = document.getElementById("num-adults").value;
var numChildren515 = document.getElementById("num-children-5-15").value;
var numChildren4Below = document.getElementById("num-children-4-below").value;
var totalCost = calculateTotal();
var subject = "name: " + name + " FDA Conf Reg2024";
var emailBody = "Here is a copy of your registration information:%0D%0A%0D%0A" +
"Name: " + name + "%0D%0A" +
"Email: " + email + "%0D%0A" +
"Phone: " + phone + "%0D%0A" +
"Practice Clinic Name: " + clinicName + "%0D%0A" +
"FDA Member Option: " + fdaMember + "%0D%0A" +
"Non-Member Option: " + nonMember + "%0D%0A" +
"Number of Accompanying Adults: " + numAdults + "%0D%0A" +
"Number of Accompanying Children (5 to 15 years): " + numChildren515 + "%0D%0A" +
"Number of Accompanying Children (4 years and below): " + numChildren4Below + "%0D%0A%0D%0A" +
"Total Cost: $" + totalCost + "%0D%0A%0D%0A" +
"Thank you for filling out the form. Please remember to upload evidence of payment.";
window.location.href = "mailto:tk_achewzu@hotmail.com,wwwfijidaorg@gmail.com,kvraman.reddy@gmail.com?subject=" + encodeURIComponent(subject) + "&body=" + emailBody;
}
function printDetailedForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var clinicName = document.getElementById("clinic-name").value;
var numAdults = document.getElementById("num-adults").value;
var numChildren515 = document.getElementById("num-children-5-15").value;
var numChildren4Below = document.getElementById("num-children-4-below").value;
var fdaMemberOptions = [
"$0 (Not applicable)",
"Full Package $200",
"Scientific Session only $100",
"Dinner Function only $100"
];
var nonMemberOptions = [
"$0 (Not applicable)",
"Full Package $280",
"Scientific Session only $150",
"Dinner only $135"
];
var detailedSummary = `
<h3>Detailed Registration Form</h3>
<p><strong>Name:</strong> ${name}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Phone:</strong> ${phone}</p>
<p><strong>Practice Clinic Name:</strong> ${clinicName}</p>
<p><strong>FDA Member Options:</strong></p>
<ul>
${fdaMemberOptions.map(option => `<li> ${option}</li>`).join('')}
</ul>
<p><strong>Non-Member Options:</strong></p>
<ul>
${nonMemberOptions.map(option => `<li> ${option}</li>`).join('')}
</ul>
<p><strong>Number of Accompanying Adults (Cost per adult: $135):</strong> ${numAdults}</p>
<p><strong>Number of Accompanying Children (5 to 15 years, Cost per child: $67.50):</strong> ${numChildren515}</p>
<p><strong>Number of Accompanying Children (4 years and below, Free):</strong> ${numChildren4Below}</p>
<p><strong>Total Cost:</strong> $${calculateTotal()}</p>
<p><strong>Payment Details:</strong> All to be paid into the Association's bank account:<br>
Name: Fiji Dental Association<br>
Account Number: 22635800<br>
Bank: Westpac<br>
Branch: Thomson St. Branch, Suva<br>
Swift Code: WPACFJFX<br>
A scanned copy of the deposit slip/evidence of payment is to be attached in the email, addressed to the Conference Registration Team:<br>
Treasurer: Dr. Tanveen Kaur, <a href="mailto:tk_achewzu@hotmail.com">tk_achewzu@hotmail.com</a><br>
and<br>
Secretary: Dr. Raman Reddy, <a href="mailto:kvraman.reddy@gmail.com">kvraman.reddy@gmail.com</a><br>
THANK YOU</p>
`;
document.getElementById("detailed-summary").innerHTML = detailedSummary;
window.print();
}
calculateTotal(); // Initial calculation to set the total cost when the page loads
Developing this HTML-based registration form with the help of ChatGPT-4.0 was a rewarding experience. It highlighted the potential of AI in simplifying complex tasks and improving functionality. Despite the challenges, the end result was a robust and user-friendly form that met all the initial requirements.
This project not only enhanced my coding skills but also demonstrated the practical applications of AI in everyday tasks. The journey was filled with learning and growth, making the final success even more satisfying.
Dr Naidu's Dental & Medical Clinic- Nadi , Fiji 