<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Body Art Consent & Release Form</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.form-section {
background-color: white;
border-radius: 0.75rem;
padding: 2rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.form-section h2 {
font-size: 1.5rem;
font-weight: 700;
color: #111827;
border-bottom: 2px solid #f3f4f6;
padding-bottom: 0.75rem;
margin-bottom: 1.5rem;
}
.input-group {
margin-bottom: 1.25rem;
}
.input-group label {
display: block;
font-weight: 600;
color: #374151;
margin-bottom: 0.5rem;
}
.input-group input[type="text"],
.input-group input[type="email"],
.input-group input[type="date"] {
width: 100%;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
transition: border-color 0.2s;
}
.input-group input:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 2px #c7d2fe;
}
.checkbox-group {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
}
.checkbox-group input {
margin-right: 0.75rem;
height: 1.25rem;
width: 1.25rem;
border-radius: 0.25rem;
}
.signature-pad {
border: 2px dashed #9ca3af;
border-radius: 0.5rem;
background-color: #f9fafb;
cursor: crosshair;
}
.risk-waiver-box {
height: 200px;
overflow-y: scroll;
border: 1px solid #e5e7eb;
padding: 1rem;
background-color: #f9fafb;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
#minorConsentSection {
display: none;
border-left: 4px solid #facc15;
padding-left: 1rem;
margin-top: 1rem;
}
.notary-box {
border: 1px solid #d1d5db;
padding: 1rem;
margin-top: 1rem;
border-radius: 0.5rem;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.modal-overlay.visible {
opacity: 1;
visibility: visible;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 0.5rem;
text-align: center;
max-width: 500px;
}
</style>
</head>
<body class="bg-gray-100 p-4 sm:p-6 md:p-8">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-gray-800">Body Art Consent & Release Form</h1>
<p class="text-gray-600 mt-2">This form is designed to meet the most restrictive
requirements in the United States.</p>
</div>
<form id="consentForm">
<!-- Section 1: Client Information & ID Verification -->
<div class="form-section">
<h2>Section 1: Client Information & ID Verification</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="input-group">
<label for="fullName">Full Legal Name</label>
<input type="text" id="fullName" name="fullName" required placeholder="As it
appears on your ID">
</div>
<div class="input-group">
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob" required>
</div>
</div>
<div class="input-group">
<label for="address">Full Physical Address</label>
<input type="text" id="address" name="address" required placeholder="Street, City,
State, ZIP">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="input-group">
<label for="phone">Phone Number</label>
<input type="text" id="phone" name="phone" required placeholder="(555) 555-
5555">
</div>
<div class="input-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required
placeholder="[email protected]">
</div>
</div>
<div class="input-group">
<label class="font-semibold">Are you under the influence of alcohol or drugs?</label>
<div class="flex items-center mt-2">
<input type="radio" id="influenceNo" name="influence" value="no" required
class="mr-2"><label for="influenceNo" class="mr-4">No</label>
<input type="radio" id="influenceYes" name="influence" value="yes" class="mr-
2"><label for="influenceYes">Yes</label>
</div>
</div>
<div class="mt-6 border-t pt-6">
<h3 class="font-semibold text-lg mb-2">Government-Issued Photo ID
Verification</h3>
<p class="text-sm text-gray-600 mb-4">A copy of your ID will be kept with this form.
We will not share this information.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="input-group">
<label for="idType">ID Type</label>
<input type="text" id="idType" name="idType" required placeholder="e.g.,
Driver's License">
</div>
<div class="input-group">
<label for="idNumber">ID Number</label>
<input type="text" id="idNumber" name="idNumber" required>
</div>
<div class="input-group">
<label for="idExpiry">Expiration Date</label>
<input type="date" id="idExpiry" name="idExpiry" required>
</div>
</div>
</div>
</div>
<!-- Section 2: Medical History -->
<div class="form-section">
<h2>Section 2: Medical History Questionnaire</h2>
<p class="text-sm text-gray-600 mb-4">Your answers are confidential and are for your
safety. Please answer all questions truthfully.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8">
<div class="checkbox-group"><input type="checkbox" id="med_pregnant"
name="med_pregnant"> <label for="med_pregnant">Are you pregnant or nursing?</label></div>
<div class="checkbox-group"><input type="checkbox" id="med_hiv"
name="med_hiv"> <label for="med_hiv">HIV/AIDS</label></div>
<div class="checkbox-group"><input type="checkbox" id="med_hepatitis"
name="med_hepatitis"> <label for="med_hepatitis">Hepatitis B/C</label></div>
<div class="checkbox-group"><input type="checkbox" id="med_skin"
name="med_skin"> <label for="med_skin">Eczema, Psoriasis, or Keloiding</label></div>
<div class="checkbox-group"><input type="checkbox" id="med_heart"
name="med_heart"> <label for="med_heart">Heart Condition / Pacemaker</label></div>
<div class="checkbox-group"><input type="checkbox" id="med_bleeding"
name="med_bleeding"> <label for="med_bleeding">Hemophilia / Bleeding
Disorder</label></div>
<div class="checkbox-group"><input type="checkbox" id="med_diabetes"
name="med_diabetes"> <label for="med_diabetes">Diabetes</label></div>
<div class="checkbox-group"><input type="checkbox" id="med_autoimmune"
name="med_autoimmune"> <label for="med_autoimmune">Autoimmune Disorder</label></div>
</div>
<div class="mt-4">
<div class="input-group">
<label for="med_allergies">Please list any known allergies (e.g., latex, metals,
pigments, soaps):</label>
<input type="text" id="med_allergies" name="med_allergies" placeholder="List
here or write 'None'">
</div>
<div class="input-group">
<label for="med_medications">Please list any medications you are currently taking
(e.g., blood thinners, Accutane):</label>
<input type="text" id="med_medications" name="med_medications"
placeholder="List here or write 'None'">
</div>
</div>
<div class="checkbox-group mt-6 bg-indigo-50 p-3 rounded-lg">
<input type="checkbox" id="truthful" name="truthful" required>
<label for="truthful" class="font-semibold text-indigo-800">I certify that I have
answered the above questions to the best of my knowledge and truthfully.</label>
</div>
</div>
<!-- Section 3: Procedure Details -->
<div class="form-section">
<h2>Section 3: Procedure Details</h2>
<div class="input-group">
<label for="procedureType">Type of Procedure</label>
<input type="text" id="procedureType" name="procedureType" required
placeholder="e.g., Tattoo, Earlobe Piercing, etc.">
</div>
<div class="input-group">
<label for="procedureDesc">Description of Design/Modification</label>
<input type="text" id="procedureDesc" name="procedureDesc" required
placeholder="e.g., 'Black ink rose', '16g titanium barbell'">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="input-group">
<label for="procedureLocation">Location on Body</label>
<input type="text" id="procedureLocation" name="procedureLocation" required
placeholder="e.g., Left forearm, right nostril">
</div>
<div class="input-group">
<label for="artistName">Artist Name</label>
<input type="text" id="artistName" name="artistName" required>
</div>
</div>
<div class="checkbox-group mt-4">
<input type="checkbox" id="designApproved" name="designApproved" required>
<label for="designApproved">I have seen and approved the final design/jewelry for
my procedure.</label>
</div>
</div>
<!-- Section 4: Risks and Waiver -->
<div class="form-section">
<h2>Section 4: Acknowledgment of Risks & Release of Liability</h2>
<p class="text-sm text-gray-600 mb-4">Please read the following carefully. Initial each
statement.</p>
<div class="risk-waiver-box">
<p>I acknowledge that I am voluntarily choosing to get a body art procedure. I
understand that this procedure involves penetrating my skin and carries inherent risks. These risks
include, but are not limited to: discomfort or pain, bleeding, bruising, swelling, infection, scarring,
and allergic reactions to pigments, metals, latex, soaps, and other materials used. I understand that
infection is always possible if I do not follow the provided aftercare instructions. I understand that
while the studio and artist take all necessary precautions to ensure a sterile environment, I must
assume responsibility for the care of my body art after I leave. I understand that tattoos are
permanent and that removal is a difficult, expensive, and not always successful process. I
understand that the final appearance of my body art can vary from the initial design due to my skin
tone, texture, and healing process. I agree to release and forever discharge the artist, the studio, and
all their employees from any and all claims, damages, or legal actions arising from or connected to
my body art procedure, or my conduct before, during, or after the procedure, except in cases of
gross negligence proven in a court of law.</p>
</div>
<div class="mt-4 space-y-3">
<div class="checkbox-group"><input type="checkbox" id="risk_permanent"
required><label for="risk_permanent">I understand the procedure is permanent.</label></div>
<div class="checkbox-group"><input type="checkbox" id="risk_infection"
required><label for="risk_infection">I understand the risk of infection.</label></div>
<div class="checkbox-group"><input type="checkbox" id="risk_scarring"
required><label for="risk_scarring">I understand the risk of scarring and
discoloration.</label></div>
<div class="checkbox-group"><input type="checkbox" id="risk_allergic"
required><label for="risk_allergic">I understand the risk of allergic reactions.</label></div>
<div class="checkbox-group"><input type="checkbox" id="risk_no_guarantee"
required><label for="risk_no_guarantee">I understand there are no guarantees on the final
appearance.</label></div>
<div class="checkbox-group bg-red-50 p-3 rounded-lg"><input type="checkbox"
id="risk_waiver" required><label for="risk_waiver" class="font-semibold text-red-800">I have
read and fully understand the liability waiver.</label></div>
</div>
</div>
<!-- Section 5: Aftercare -->
<div class="form-section">
<h2>Section 5: Aftercare Instructions</h2>
<div class="checkbox-group">
<input type="checkbox" id="aftercare" name="aftercare" required>
<label for="aftercare">I have received a copy of the aftercare instructions, I understand
them, and I agree to follow them diligently.</label>
</div>
</div>
<!-- Section 6: Minor Consent -->
<div class="form-section">
<h2>Section 6: Consent for Minors (Under 18)</h2>
<div class="input-group">
<label class="font-semibold">Is the client under 18 years of age?</label>
<div class="flex items-center mt-2">
<input type="radio" id="isMinorNo" name="isMinor" value="no" checked
onchange="toggleMinorSection()"><label for="isMinorNo" class="mr-4">No</label>
<input type="radio" id="isMinorYes" name="isMinor" value="yes"
onchange="toggleMinorSection()"><label for="isMinorYes">Yes</label>
</div>
</div>
<div id="minorConsentSection">
<h3 class="font-bold text-lg text-red-600">ATTENTION: STRICTLY
ENFORCED</h3>
<ul class="list-disc list-inside my-4 text-gray-700 space-y-2">
<li><b>TATTOOS ARE STRICTLY PROHIBITED FOR ANYONE UNDER 18,
REGARDLESS OF PARENTAL CONSENT.</b></li>
<li>For permissible piercings, the parent or legal guardian MUST be present for the
entire procedure.</li>
<li>The parent/guardian must provide a valid government-issued photo ID.</li>
<li>Proof of guardianship (e.g., original birth certificate, court order) MUST be
presented.</li>
<li>This form MUST be signed by the parent/guardian in the presence of a Notary
Public.</li>
</ul>
<div class="border-t pt-4 mt-4">
<h4 class="font-semibold text-lg mb-2">Parent / Legal Guardian Information</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="input-group">
<label for="guardianName">Guardian's Full Legal Name</label>
<input type="text" id="guardianName" name="guardianName">
</div>
<div class="input-group">
<label for="guardianIdNumber">Guardian's ID Number</label>
<input type="text" id="guardianIdNumber" name="guardianIdNumber">
</div>
</div>
</div>
<div class="notary-box">
<h4 class="font-semibold text-lg mb-2 text-center">Notary Public Section</h4>
<p class="text-sm text-center text-gray-600 mb-4">To be completed by Notary
Public ONLY.</p>
<p class="my-4">State of _______________, County of _______________</p>
<p class="my-4">On this ____ day of ___________, 20__, before me, the
undersigned Notary Public, personally appeared ________________________ (Parent/Guardian
Name), proved to me through satisfactory evidence of identification, which were
________________________, to be the person whose name is signed on the preceding or attached
document, and acknowledged to me that they signed it voluntarily for its stated purpose.</p>
<div class="mt-8 text-center">
<p>__________________________________</p>
<p>(Notary Signature)</p>
<p class="mt-4">My commission expires: _______________</p>
<p class="mt-4">[ NOTARY SEAL ]</p>
</div>
</div>
</div>
</div>
<!-- Section 7: Signatures -->
<div class="form-section">
<h2>Section 7: Signatures</h2>
<p class="text-sm text-gray-600 mb-4">By signing below, you affirm all information is
correct and you consent to the procedure.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<label class="font-semibold">Client Signature:</label>
<canvas id="clientSignature" class="signature-pad w-full h-32 mt-2"></canvas>
<button type="button" onclick="clearCanvas('clientSignature')" class="text-sm text-
indigo-600 hover:text-indigo-800 mt-1">Clear</button>
</div>
<div id="guardianSignatureArea" style="display:none;">
<label class="font-semibold">Parent/Guardian Signature:</label>
<canvas id="guardianSignature" class="signature-pad w-full h-32 mt-2"></canvas>
<button type="button" onclick="clearCanvas('guardianSignature')" class="text-sm
text-indigo-600 hover:text-indigo-800 mt-1">Clear</button>
</div>
<div>
<label class="font-semibold">Artist Signature:</label>
<canvas id="artistSignature" class="signature-pad w-full h-32 mt-2"></canvas>
<button type="button" onclick="clearCanvas('artistSignature')" class="text-sm text-
indigo-600 hover:text-indigo-800 mt-1">Clear</button>
</div>
<div>
<label class="font-semibold">Witness Signature:</label>
<canvas id="witnessSignature" class="signature-pad w-full h-32 mt-2"></canvas>
<button type="button" onclick="clearCanvas('witnessSignature')" class="text-sm
text-indigo-600 hover:text-indigo-800 mt-1">Clear</button>
</div>
</div>
<div class="input-group mt-4">
<label for="dateSigned">Date</label>
<input type="date" id="dateSigned" name="dateSigned" required>
</div>
</div>
<div class="flex justify-end space-x-4 mt-8">
<button type="button" onclick="window.print()" class="px-8 py-3 bg-gray-600 text-white
font-semibold rounded-lg hover:bg-gray-700 transition">Print Form</button>
<button type="submit" class="px-8 py-3 bg-indigo-600 text-white font-semibold
rounded-lg hover:bg-indigo-700 transition">Submit Consent</button>
</div>
</form>
</div>
<!-- Modal for confirmation -->
<div id="confirmationModal" class="modal-overlay">
<div class="modal-content">
<h3 class="text-2xl font-bold text-green-600 mb-4">Success!</h3>
<p class="text-gray-700">Your consent form has been submitted. Please do not close this
window until instructed by staff.</p>
<button onclick="closeModal()" class="mt-6 px-6 py-2 bg-indigo-600 text-white rounded-
lg">Close</button>
</div>
</div>
<script>
// Set today's date for signature field
document.getElementById('dateSigned').valueAsDate = new Date();
// Signature Pad Logic
function initializeCanvas(canvasId) {
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext('2d');
let drawing = false;
function getMousePos(canvas, evt) {
const rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function getTouchPos(canvas, touch) {
const rect = canvas.getBoundingClientRect();
return {
x: touch.clientX - rect.left,
y: touch.clientY - rect.top
};
}
function startDrawing(e) {
drawing = true;
draw(e);
}
function stopDrawing() {
drawing = false;
ctx.beginPath();
}
function draw(e) {
if (!drawing) return;
e.preventDefault();
let pos;
if (e.touches && e.touches[0]) {
pos = getTouchPos(canvas, e.touches[0]);
} else {
pos = getMousePos(canvas, e);
}
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.strokeStyle = '#111827';
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
}
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseout', stopDrawing);
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchend', stopDrawing);
canvas.addEventListener('touchmove', draw);
}
function clearCanvas(canvasId) {
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
['clientSignature', 'guardianSignature', 'artistSignature',
'witnessSignature'].forEach(initializeCanvas);
// Minor Section Toggle
function toggleMinorSection() {
const isMinor = document.getElementById('isMinorYes').checked;
const minorSection = document.getElementById('minorConsentSection');
const guardianSignatureArea = document.getElementById('guardianSignatureArea');
const guardianNameInput = document.getElementById('guardianName');
const guardianIdInput = document.getElementById('guardianIdNumber');
if (isMinor) {
minorSection.style.display = 'block';
guardianSignatureArea.style.display = 'block';
guardianNameInput.required = true;
guardianIdInput.required = true;
} else {
minorSection.style.display = 'none';
guardianSignatureArea.style.display = 'none';
guardianNameInput.required = false;
guardianIdInput.required = false;
}
}
// Form Submission
const form = document.getElementById('consentForm');
form.addEventListener('submit', function(e) {
e.preventDefault();
// Check influence radio button
if (document.getElementById('influenceYes').checked) {
alert('Service cannot be provided to anyone under the influence of alcohol or drugs.');
return;
}
// Simple validation check
let allValid = true;
const requiredInputs = form.querySelectorAll('[required]');
requiredInputs.forEach(input => {
if ((input.type === 'checkbox' || input.type === 'radio') && !input.checked) {
if (input.name === 'influence' && (document.getElementById('influenceYes').checked
|| document.getElementById('influenceNo').checked)) {
// it's fine
} else if (input.name === 'isMinor' &&
(document.getElementById('isMinorYes').checked ||
document.getElementById('isMinorNo').checked)) {
// it's fine
}
else {
allValid = false;
}
} else if (input.type !== 'checkbox' && input.type !== 'radio' && !input.value) {
allValid = false;
}
});
if (!allValid) {
alert('Please fill out all required fields and check all required boxes before submitting.');
return;
}
// Show confirmation modal
document.getElementById('confirmationModal').classList.add('visible');
});
function closeModal() {
document.getElementById('confirmationModal').classList.remove('visible');
}
</script>
</body>
</html>
