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>

Chancellor	This email address is being protected from spambots. You need JavaScript enabled to view it.
Vice Chancellor and Secretary	This email address is being protected from spambots. You need JavaScript enabled to view it.
Board Chair	This email address is being protected from spambots. You need JavaScript enabled to view it.
Treasurer	This email address is being protected from spambots. You need JavaScript enabled to view it.

Archives	This email address is being protected from spambots. You need JavaScript enabled to view it.
Webmaster, EFA Forum	This email address is being protected from spambots. You need JavaScript enabled to view it.
Genealogist	This email address is being protected from spambots. You need JavaScript enabled to view it.
Membership	This email address is being protected from spambots. You need JavaScript enabled to view it.
Y-DNA Project	This email address is being protected from spambots. You need JavaScript enabled to view it.

The Y-DNA Project

The Warrior Regiment

Membership New or Renewal

Officers

Coordinators

Contact Us