Membership New or Renewal

: Category: Uncategorised

<!DOCTYPE html>

<head>

<title>Ewing Family Association — Membership Form (Replica)</title>

<style>

:root{

--bg:#f7f7f9; --card:#ffffff; --ink:#1d2433; --muted:#6b7280; --accent:#234d8e;

--accent-2:#0f7ae5; --border:#e5e7eb; --error:#c1121f; --ok:#107e39;

}

*{box-sizing:border-box}

body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.45}

header{background:#0b1b33; color:#fff; padding:24px}

header .brand{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}

header h1{margin:0; font-size:22px; letter-spacing:.2px}

header .motto{font-style:italic; opacity:.9}

main{max-width:900px; margin:32px auto; padding:0 16px}

.card{background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,.04)}

.card header{background:transparent; color:inherit; padding:20px; border-bottom:1px solid var(--border)}

.card .content{padding:20px}

h2{margin:0 0 6px 0; font-size:22px}

p.lead{margin:0; color:var(--muted)}

fieldset{border:none; margin:0; padding:0}

.grid{display:grid; gap:14px}

.cols-2{grid-template-columns:1fr 1fr}

.cols-3{grid-template-columns:repeat(3,1fr)}

.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

label{font-size:14px; color:#111827}

.req::after{content:" *"; color:var(--error)}

input[type="text"], input[type="email"], input[type="tel"], textarea, select{

width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font:inherit; background:#fff

}

textarea{min-height:120px; resize:vertical}

.hint{font-size:12px; color:var(--muted)}

.counter{font-size:12px; color:var(--muted); text-align:right}

.section-title{margin:24px 0 4px; font-weight:700; letter-spacing:.2px}

.btnbar{display:flex; gap:10px; justify-content:space-between; margin-top:18px}

.btn{appearance:none; border:1px solid var(--border); background:#fff; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600}

.btn.primary{background:var(--accent); color:#fff; border-color:transparent}

.btn.ghost{background:#fff}

.btn.warn{border-color:#d1d5db}

.btn:disabled{opacity:.6; cursor:not-allowed}

.error{color:#fff; background:var(--error); padding:10px 12px; border-radius:10px; display:none}

.ok{color:#fff; background:var(--ok); padding:10px 12px; border-radius:10px; display:none}

.invisible{display:none !important}

table.summary{width:100%; border-collapse:collapse; overflow:hidden; border-radius:10px; border:1px solid var(--border)}

table.summary th, table.summary td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top}

table.summary th{width:260px; background:#fbfbfc; font-weight:600}

.captcha{display:flex; align-items:center; gap:10px; padding:12px; border:1px dashed #cbd5e1; border-radius:10px; background:#f8fafc}

footer{margin:28px 0 60px; text-align:center; color:var(--muted); font-size:12px}

.nav{margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; font-size:13px}

.nav a{color:#c8d6ff; text-decoration:none}

.nav a:hover{text-decoration:underline}

.badge{display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff}

</style>

</head>

<body>

<h1>Ewing Family Association</h1>

<span class="motto">Audaciter!</span>

</div>

<a href="#">About Us</a>

<a href="#">Membership</a>

<a href="#">Join/Renew</a>

<a href="#">Resources</a>

</nav>

</header>

<main>

<h2>New or Renewal EFA Membership</h2>

<p class="lead">Please fill in your membership data below. Items marked with <span class="req"></span> are required.</p>

</header>

<div class="error" id="err1" role="alert">Please correct the highlighted fields.</div>

<div class="section-title">Action Requested</div>

<label><input type="radio" name="action" value="New Membership" required> New Membership</label>

<label><input type="radio" name="action" value="Renewal"> Renewal</label>

</div>

<div class="section-title">Journal Delivery</div>

<span>Send traditional paper version?</span>

</div>

<div class="section-title">Member Information</div>

<div>

<label class="req" for="memberName">Member Name</label>

</div>

<div>

<label for="institution">Institution Name</label>

</div>

<div>

<label for="spouse">Spouse Name</label>

</div>

<div>

<label class="req" for="street">Street Address</label>

</div>

<div>

</div>

<div>

<label class="req" for="state">State/Region</label>

</div>

<div>

<label for="country">Country</label>

</div>

<div>

<label class="req" for="zip">Zip/Postal Code</label>

</div>

<div>

<label class="req" for="email">Email</label>

</div>

<div>

<label for="phone">Phone</label>

</div>

<div>

<label for="connection" class="req">Please briefly share your Ewing connection</label>

<span class="hint">Max 288 characters</span>

</div>

<div class="section-title">Library Memberships (optional)</div>

<p class="hint">You may sponsor up to four libraries (full address and contact info appreciated).</p>

<div>

<label for="lib1">Library 1</label>

</div>

<div>

<label for="lib2">Library 2</label>

</div>

<div>

<label for="lib3">Library 3</label>

</div>

<div>

<label for="lib4">Library 4</label>

</div>

<button class="btn warn" type="button" id="reset1">Reset</button>

<div>

</div>

</fieldset>

</div>m

</div>

<h2>Information Summary</h2>

<p class="lead">Please check your details. Use “Back” to make changes.</p>

</header>

<p id="sumDesc" class="hint">If everything looks correct, confirm you are human and submit.</p>

<label for="human"><strong>Are you human?</strong> (check this box to proceed)</label>

</div>

<div class="error" id="err2" role="alert" style="margin-top:12px;">Please check the “Are you human?” box before submitting.</div>

<div>

<button class="btn primary" type="button" id="submit2">Submit and go to Payment</button>

</div>

<h2>Thank you!</h2>

<p class="lead">We’ve received your membership request.</p>

</header>

<p>To finalize your membership or renewal, please arrange payment. You may pay electronically (e.g., via the Association’s payment page)

or by mailing a check or money order. Be sure to include your name, address, and email so your application is credited correctly.</p>

<div class="ok" style="display:block; margin-top:12px;" role="status">Submission recorded (demo).</div>

<button class="btn" type="button" id="startOver">Start Over</button>

</div>

Before 2008, the Ewing Family Association<br style="box-sizing: border-box;">

was known as Clan Ewing in America.</span></p>

</div>

</div>

</footer>

</main>

// Utilities

const q = sel => document.querySelector(sel);

const byId = id => document.getElementById(id);

const step1 = byId('step1-card'), step2 = byId('step2-card'), step3 = byId('step3-card');

const fields = {

action: () => (document.querySelector('input[name="action"]:checked')||{}).value || "",

paper: () => (document.querySelector('input[name="paper"]:checked')||{}).value || "",

memberName: () => byId('memberName').value.trim(),

institution: () => byId('institution').value.trim(),

spouse: () => byId('spouse').value.trim(),

street: () => byId('street').value.trim(),

city: () => byId('city').value.trim(),

state: () => byId('state').value.trim(),

country: () => byId('country').value.trim(),

zip: () => byId('zip').value.trim(),

email: () => byId('email').value.trim(),

phone: () => byId('phone').value.trim(),

connection: () => byId('connection').value.trim(),

lib1: () => byId('lib1').value.trim(),

lib2: () => byId('lib2').value.trim(),

lib3: () => byId('lib3').value.trim(),

lib4: () => byId('lib4').value.trim(),

};

// Character counter

const maxConn = 288;

const conn = byId('connection');

const counter = byId('connCounter');

const updateCounter = () => {

const left = Math.max(0, maxConn - conn.value.length);

counter.textContent = left;

};

conn.addEventListener('input', updateCounter);

updateCounter();

// Validation helper (adds red border to invalid fields)

function setInvalid(el, isInvalid){

if(!el) return;

el.style.borderColor = isInvalid ? "var(--error)" : "var(--border)";

el.style.outline = isInvalid ? "2px solid rgba(193,18,31,.15)" : "none";

}

function validateStep1(){

let ok = true;

// Required radios

const action = document.querySelector('input[name="action"]:checked');

const paper = document.querySelector('input[name="paper"]:checked');

if(!action){ ok = false; }

if(!paper){ ok = false; }

// Required inputs

const requiredIds = ['memberName','street','city','state','zip','email','connection'];

requiredIds.forEach(id=>{

const el = byId(id);

const empty = !el.value.trim();

setInvalid(el, empty);

if(empty) ok = false;

});

// Email quick check

const emailVal = byId('email').value.trim();

const emailBad = emailVal && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(emailVal);

setInvalid(byId('email'), emailBad || !emailVal);

if(emailBad) ok = false;

byId('err1').style.display = ok ? 'none' : 'block';

return ok;

}

function showStep(which){

step1.classList.add('invisible');

step2.classList.add('invisible');

step3.classList.add('invisible');

which.classList.remove('invisible');

window.scrollTo({top:0, behavior:'smooth'});

}

function buildSummary(){

const rows = [

['Action Requested', fields.action()],

['Send Paper Copy of Journal?', fields.paper()],

['Member Name', fields.memberName()],

['Institution Name', fields.institution()],

['Spouse Name', fields.spouse()],

['Street Address', fields.street()],

['City', fields.city()],

['State/Region', fields.state()],

['Country', fields.country()],

['Zip/Postal Code', fields.zip()],

['Email', fields.email()],

['Phone', fields.phone()],

['Conn. Info', fields.connection()],

['Library 1', fields.lib1()],

['Library 2', fields.lib2()],

['Library 3', fields.lib3()],

['Library 4', fields.lib4()],

];

const table = byId('summaryTable');

table.innerHTML = rows.map(([k,v]) => `

<tr>

<td>${(v||'').replace(/</g,'<').replace(/>/g,'>').replace(/\n/g,'<br>')}</td>

</tr>

`).join('');

}

// Buttons

byId('next1').addEventListener('click', ()=>{

if(!validateStep1()) return;

buildSummary();

showStep(step2);

});

byId('back2').addEventListener('click', ()=> showStep(step1));

byId('submit2').addEventListener('click', ()=>{

const human = byId('human').checked;

byId('err2').style.display = human ? 'none' : 'block';

if(!human) return;

// Demo “submit”: show thank-you step.

// To integrate with a backend, collect payload and POST it below.

// Example:

// const payload = Object.fromEntries(Object.keys(fields).map(k=>[k, fields[k]()]));

// fetch('/your-endpoint', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload) });

showStep(step3);

});

byId('reset1').addEventListener('click', ()=>{

document.querySelectorAll('input[type="text"], input[type="email"], input[type="tel"], textarea').forEach(el=>{ el.value=''; setInvalid(el,false); });

document.querySelectorAll('input[type="radio"]').forEach(el=> el.checked=false);

byId('err1').style.display='none';

updateCounter();

});

byId('startOver').addEventListener('click', ()=>{

byId('reset1').click();

showStep(step1);

});

</script>

</body>

</html>