Contact information

Trade name: Trustymall

Phone number: 5053968199

Email: sales@trustymall.us

Physical address: TRUSTYTRADE LLC, 1209 Mountain Road Place Northeast, Albuquerque NM 87110, Amerika Birleşik Devletleri

Trade name: Trustymall

Phone number: 5053968199

Email: sales@trustymall.us

Physical address: TRUSTYTRADE LLC, 1209 Mountain Road Place Northeast, Albuquerque NM 87110, United states.

/* Scoped Variables - replacing previous Liquid settings */ :root { --tm-primary: #0056b3; --tm-primary-light: #3385ff; /* Approx 15% lighter */ --tm-primary-dark: #004494; /* Approx 10% darker */ --tm-bg: #f8f9fa; --tm-card-bg: #ffffff; --tm-text: #333333; --tm-text-light: #555555; --tm-border: #e1e1e1; --tm-error: #dc3545; --tm-success: #28a745; } /* Global Resets */ body { margin: 0; padding: 0; background-color: var(--tm-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--tm-text); } .tm-wizard-section { padding: 80px 20px; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; box-sizing: border-box; } .tm-container { width: 100%; max-width: 950px; } /* Header */ .tm-header { text-align: center; margin-bottom: 60px; } .tm-header h2 { font-size: 4rem; margin: 0 0 20px 0; color: var(--tm-text); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .tm-header p { color: var(--tm-text-light); font-size: 1.5rem; max-width: 700px; margin: 0 auto; line-height: 1.6; } /* Card Wrapper */ .tm-card { background: var(--tm-card-bg); border-radius: 24px; box-shadow: 0 15px 50px rgba(0,0,0,0.08); border: 1px solid var(--tm-border); padding: 60px; overflow: hidden; box-sizing: border-box; } /* Progress Bar */ .tm-progress { display: flex; justify-content: space-between; margin-bottom: 60px; position: relative; padding: 0 30px; } .tm-progress::before { content: ''; position: absolute; top: 25px; left: 60px; right: 60px; height: 4px; background: #f0f0f0; z-index: 1; } .tm-step-indicator { position: relative; z-index: 2; text-align: center; width: 120px; } .tm-step-circle { width: 55px; height: 55px; border-radius: 50%; background: #fff; border: 4px solid #eee; color: #bbb; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px auto; font-weight: 800; font-size: 1.5rem; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .tm-step-label { font-size: 1.1rem; color: #999; font-weight: 600; transition: color 0.3s; } /* Active & Completed States */ .tm-step-indicator.active .tm-step-circle { border-color: var(--tm-primary); background: var(--tm-primary); color: #fff; transform: scale(1.15); box-shadow: 0 0 0 8px rgba(0, 86, 179, 0.15); } .tm-step-indicator.active .tm-step-label { color: var(--tm-primary); font-weight: 700; } .tm-step-indicator.completed .tm-step-circle { background: var(--tm-success); border-color: var(--tm-success); color: #fff; } .tm-step-indicator.completed .tm-step-label { color: var(--tm-success); } /* Form Steps Animation */ .tm-form-step { display: none; animation: fadeIn 0.5s ease-out; } .tm-form-step.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* Inputs & Labels */ .tm-input-group { margin-bottom: 45px; } .tm-input-group label { display: block; margin-bottom: 15px; font-weight: 700; color: var(--tm-text); font-size: 1.4rem; letter-spacing: -0.01em; } .tm-input-group input, .tm-input-group select, .tm-input-group textarea { width: 100%; padding: 20px 25px; border: 2px solid #e1e1e1; border-radius: 16px; font-size: 1.3rem; transition: all 0.3s ease; background: #fff; color: var(--tm-text); box-shadow: 0 2px 5px rgba(0,0,0,0.02); box-sizing: border-box; } .tm-input-group input:focus, .tm-input-group select:focus, .tm-input-group textarea:focus { border-color: var(--tm-primary); outline: none; box-shadow: 0 0 0 5px rgba(0, 86, 179, 0.1); transform: translateY(-1px); } /* Smooth Dropdowns */ .tm-input-group select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 2rem center; background-size: 1.5rem; cursor: pointer; } .tm-input-group textarea { min-height: 180px; resize: vertical; } .tm-input-group .tm-guidance { font-size: 1.15rem; color: var(--tm-text-light); margin-top: 12px; line-height: 1.6; } /* Radio Cards */ .tm-radio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; } .tm-radio-card { position: relative; } .tm-radio-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .tm-radio-card label { display: flex; align-items: center; padding: 25px; border: 2px solid #e1e1e1; border-radius: 16px; cursor: pointer; transition: all 0.3s; font-weight: 600; font-size: 1.3rem; height: 100%; margin: 0; background: #fff; box-sizing: border-box; } .tm-radio-card input:checked + label { border-color: var(--tm-primary); background-color: rgba(0, 86, 179, 0.04); color: var(--tm-primary); font-weight: 700; box-shadow: 0 8px 20px rgba(0, 86, 179, 0.15); transform: translateY(-3px); } /* Buttons */ .tm-actions { display: flex; justify-content: space-between; margin-top: 60px; padding-top: 40px; border-top: 1px solid #f0f0f0; } .tm-btn { padding: 20px 50px; border-radius: 60px; font-weight: 800; cursor: pointer; font-size: 1.3rem; transition: all 0.5s ease; border: none; text-transform: uppercase; letter-spacing: 1px; position: relative; overflow: hidden; z-index: 1; background-size: 200% auto; } .tm-btn-prev { background: #f1f3f5; color: #495057; } .tm-btn-prev:hover { background: #e9ecef; color: #212529; transform: translateX(-3px); } .tm-btn-next { background-image: linear-gradient(to right, var(--tm-primary) 0%, var(--tm-primary-light) 51%, var(--tm-primary) 100%); color: white; box-shadow: 0 6px 20px rgba(0,0,0,0.1); } .tm-btn-next:hover { background-position: right center; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .tm-btn-submit { background-image: linear-gradient(to right, #e67e22 0%, #f1c40f 51%, #e67e22 100%); color: white; box-shadow: 0 6px 20px rgba(230, 126, 34, 0.3); } .tm-btn-submit:hover { background-position: right center; color: #fff; transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 30px rgba(230, 126, 34, 0.4); } /* Review Section */ .tm-review-box { background: #f8f9fa; border: 1px solid #eee; border-radius: 16px; padding: 40px; } .tm-review-row { display: flex; margin-bottom: 20px; border-bottom: 1px dashed #e1e1e1; padding-bottom: 20px; } .tm-review-row:last-child { border-bottom: none; } .tm-review-label { width: 35%; font-weight: 700; color: var(--tm-text-light); font-size: 1.2rem; } .tm-review-value { width: 65%; color: var(--tm-text); font-weight: 500; font-size: 1.2rem; } /* Messages */ .tm-error-msg { color: var(--tm-error); background: #fff5f5; border: 1px solid #feb2b2; padding: 20px; border-radius: 12px; margin-top: 30px; display: none; text-align: center; font-weight: 700; font-size: 1.2rem; } .tm-success-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; display: none; backdrop-filter: blur(8px); } .tm-success-modal { background: white; padding: 60px; border-radius: 24px; text-align: center; max-width: 600px; width: 90%; box-shadow: 0 30px 80px rgba(0,0,0,0.25); } .tm-invalid { border-color: var(--tm-error) !important; box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1) !important; } @media (max-width: 768px) { .tm-wizard-section { padding: 40px 15px; } .tm-header h2 { font-size: 2.5rem; margin-bottom: 15px; } .tm-header p { font-size: 1.2rem; } .tm-card { padding: 30px 20px; border-radius: 20px; } .tm-input-group label { font-size: 1.2rem; } .tm-input-group input, .tm-input-group select, .tm-input-group textarea { font-size: 18px; padding: 16px 18px; } .tm-actions { flex-direction: column-reverse; gap: 20px; margin-top: 40px; padding-top: 30px; } .tm-btn { width: 100%; padding: 18px; font-size: 1.2rem; } .tm-review-row { flex-direction: column; } .tm-review-label { width: 100%; margin-bottom: 5px; font-size: 1.1rem; } .tm-review-value { width: 100%; font-size: 1.1rem; } .tm-step-label { display: none; } }

 

document.addEventListener("DOMContentLoaded", function() { // --- Configuration --- const SUPPORT_EMAIL = "mail.trustymall@gmail.com"; // --- State Management --- let currentStep = 1; const totalSteps = 4; const form = document.getElementById('TrustyMallForm'); const dynamicContainer = document.getElementById('tmDynamicFields'); const errorMsg = document.getElementById('tmErrorMsg'); // --- Template Mapping --- const templates = { 'order_status': 'tpl-order_status', 'return_replacement': 'tpl-return_replacement', 'product_question': 'tpl-product_question', 'received_issue': 'tpl-received_issue', 'partnership': 'tpl-partnership', 'general': 'tpl-general' }; // --- Navigation Functions --- window.nextStep = function(stepNum) { if (!validateStep(stepNum)) return; // Special Logic: If moving from Step 1 to 2, load the template if (stepNum === 1) { const type = document.getElementById('inquiryType').value; loadTemplate(type); } // Special Logic: If moving to Step 4, generate summary if (stepNum === 3) { generateSummary(); } changeStep(stepNum + 1); }; window.prevStep = function(stepNum) { changeStep(stepNum - 1); }; function changeStep(newStep) { // Animation handling const currentSection = document.getElementById(`tmStep${currentStep}`); const nextSection = document.getElementById(`tmStep${newStep}`); currentSection.classList.remove('active'); nextSection.classList.add('active'); // Update Progress Indicators document.querySelectorAll('.tm-step-indicator').forEach(el => { const s = parseInt(el.dataset.step); el.classList.remove('active', 'completed'); if (s < newStep) el.classList.add('completed'); if (s === newStep) el.classList.add('active'); }); currentStep = newStep; errorMsg.style.display = 'none'; window.scrollTo({ top: 0, behavior: 'smooth' }); } // --- Logic Functions --- function loadTemplate(type) { dynamicContainer.innerHTML = ''; // Clear previous const tplId = templates[type] || 'tpl-general'; const template = document.getElementById(tplId); if (template) { dynamicContainer.appendChild(template.content.cloneNode(true)); } } function validateStep(step) { const stepEl = document.getElementById(`tmStep${step}`); const inputs = stepEl.querySelectorAll('input, select, textarea'); let isValid = true; inputs.forEach(input => { input.classList.remove('tm-invalid'); if (input.hasAttribute('required') && !input.value.trim()) { isValid = false; input.classList.add('tm-invalid'); } // Basic Email validation if (input.type === 'email' && input.value) { const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(input.value)) { isValid = false; input.classList.add('tm-invalid'); } } }); if (!isValid) { errorMsg.textContent = "Please complete all required fields correctly."; errorMsg.style.display = 'block'; } else { errorMsg.style.display = 'none'; } return isValid; } function generateSummary() { const container = document.getElementById('tmReviewOutput'); container.innerHTML = ''; const formData = new FormData(form); let html = ''; // Inquiry Type Label Map const typeSelect = document.getElementById('inquiryType'); const typeLabel = typeSelect.options[typeSelect.selectedIndex].text; html += createReviewRow("Inquiry Type", typeLabel); // Iterate Form Data for (let [key, value] of formData.entries()) { if (key === 'inquiryType') continue; // Already handled if (!value.trim()) continue; // Skip empty // Beautify Key let label = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase()); html += createReviewRow(label, value); } container.innerHTML = html; } function createReviewRow(label, value) { return `<div class="tm-review-row"> <div class="tm-review-label">${label}</div> <div class="tm-review-value">${escapeHtml(value)}</div> </div>`; } function escapeHtml(text) { if (!text) return text; return text .replace(/&/g, "&amp;") .replace(/</g, "&lt;") .replace(/>/g, "&gt;") .replace(/"/g, "&quot;") .replace(/'/g, "&#039;"); } // --- Submission Logic (The Mailto Builder) --- window.submitForm = function() { const formData = new FormData(form); const data = Object.fromEntries(formData.entries()); // 1. Construct Subject const typeSelect = document.getElementById('inquiryType'); const typeLabel = typeSelect.options[typeSelect.selectedIndex].text; let subject = `[TrustyMall Support] ${typeLabel}`; if (data.orderNumber) subject += ` - Order ${data.orderNumber}`; // 2. Construct Body (Professional Formatting) let body = `Dear TrustyMall Support Team,\n\n`; body += `I am contacting you regarding: ${typeLabel}\n`; body += `--------------------------------------------------\n\n`; // Details Section if (data.orderNumber) body += `Order Number: ${data.orderNumber}\n`; if (data.productName) body += `Product: ${data.productName}\n`; if (data.productLink) body += `Product Link: ${data.productLink}\n`; if (data.returnReason) body += `Reason: ${data.returnReason}\n`; if (data.hasTracking) body += `Has Tracking: ${data.hasTracking}\n`; if (data.companyName) body += `Company: ${data.companyName}\n`; // The Message if (data.message) { body += `\nDetails/Message:\n${data.message}\n`; } body += `\n--------------------------------------------------\n`; body += `CUSTOMER CONTACT INFO:\n`; body += `Name: ${data.customerName}\n`; body += `Email: ${data.customerEmail}\n`; if (data.customerPhone) body += `Phone: ${data.customerPhone}\n`; body += `\n(Sent via TrustyMall Contact Portal)`; // 3. Launch Mailto const mailtoLink = `mailto:${SUPPORT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; // Try to copy to clipboard as fallback logic navigator.clipboard.writeText(body).then(() => { // Clipboard success }).catch(err => { // Clipboard fail - ignore }); window.location.href = mailtoLink; // Show Success Modal document.getElementById('tmSuccessOverlay').style.display = 'flex'; }; });