タグ: 『お問い合わせフォーム』

ご検討頂き、誠にありがとうございます サービスやソリューション、その他のご質問や資料請求のご希望等ございましたら、下記のお問い合わせフォームへご記入ください。お問い合わせに関しては速やかにご返信に致します。 フォームに技術的な問題が発生した場合は、hello@esolia.co.jp または +813-4577-3380 までご連絡ください。 ご姓* お名前 * メールアドレス * お問い合わせ内容 * 送信する 送信中... (function() { const form = document.getElementById('contact-form'); const submitButton = document.getElementById('submit-button'); const loadingEl = document.getElementById('form-loading'); const errorEl = document.getElementById('form-error'); const errorMessage = document.getElementById('error-message'); const fallbackContact = document.getElementById('fallback-contact'); // Capture referrer URL on page load const referrerField = document.getElementById('referrer-url'); if (referrerField && document.referrer) { referrerField.value = document.referrer; } function showFallbackContact() { fallbackContact.classList.remove('hidden'); } function validateField(fieldId, validator, errorMsg) { const field = document.getElementById(fieldId); const errorEl = document.getElementById(${fieldId}-error); const value = field.value.trim(); if (!validator(value)) { field.classList.add('border-red-500'); field.classList.remove('border-gray-300', 'dark:border-gray-600'); field.setAttribute('aria-invalid', 'true'); errorEl.textContent = errorMsg; errorEl.classList.remove('hidden'); return false; } else { field.classList.remove('border-red-500'); field.classList.add('border-gray-300', 'dark:border-gray-600'); field.setAttribute('aria-invalid', 'false'); errorEl.textContent = ''; errorEl.classList.add('hidden'); return true; } } const fields = { id: 'lastname', validator: (val) => val.length > 0, error: 'ご姓を入力してください' }, { id: 'firstname', validator: (val) => val.length > 0, error: 'お名前を入力してください' }, { id: 'email', validator: (val) => /^(?!.\.\.)(?!.\.-)[a-zA-Z0-9@a-zA-Z0-9\.[a-zA-Z]{2,}$/.test(val), error: '有効なメールアドレスを入力してください' }, { id: 'message', validator: (val) => val.length > 0, error: 'お問い合わせ内容を入力してください' } ]; fields.forEach(field => { const input = document.getElementById(field.id); input.addEventListener('blur', () => { validateField(field.id, field.validator, field.error); }); }); form.addEventListener('submit', async function(e) { e.preventDefault(); let isValid = true; fields.forEach(field => { if (!validateField(field.id, field.validator, field.error)) { isValid = false; } }); if (!isValid) return; submitButton.disabled = true; submitButton.textContent = '送信中...'; loadingEl.classList.remove('hidden'); errorEl.classList.add('hidden'); try { const formData = new FormData(form); const response = await fetch('/api/contact-submit', { method: 'POST', body: formData }); if (response.redirected) { window.location.href = response.url; } else if (!response.ok) { const errorText = await response.text(); throw new Error(errorText || '送信に失敗しました。もう一度お試しください。'); } } catch (error) { console.error('フォーム送信エラー:', error); errorMessage.textContent = error.message; errorEl.classList.remove('hidden'); submitButton.disabled = false; submitButton.textContent = '送信する'; loadingEl.classList.add('hidden'); showFallbackContact(); } }); })();