contact.html

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-REWQ55HSVH"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-REWQ55HSVH');
</script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Contact Us | ToolsGrid</title>

  <meta name="description"
    content="Contact ToolsGrid for questions, feedback, bug reports, or tool suggestions. We welcome your ideas to help improve our free online tools.">

  <meta name="keywords" content="contact toolsgrid, feedback, bug report, tool request, online tools">

  <meta name="robots" content="index, follow">

  <meta property="og:title" content="Contact Us | ToolsGrid">
  <meta property="og:description"
    content="Get in touch with ToolsGrid to report issues, suggest new tools, or share feedback.">
  <meta property="og:type" content="website">

  <link rel="canonical" href="https://toolsgrid.co.in/contact.html">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">

  <link rel="stylesheet" href="assets/css/style.css">

  <link rel="icon" type="image/png" href="assets/img/favicon.png">
  
</head>

<body>

  <!-- NAVBAR -->
  <nav class="navbar">
    <a href="index.html" class="navbar-brand">
      🛠️ Tools<span>Grid</span>
    </a>

    <ul class="navbar-links">
      <li><a href="index.html">Home</a></li>
      <li><a href="index.html#calculators">Calculators</a></li>
      <li><a href="index.html#text-tools">Text Tools</a></li>
      <li><a href="index.html#generators">Generators</a></li>
      <li><a href="index.html#healths">Healths</a></li>
      <li><a href="about-us.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <!-- Hamburger — mobile only -->
  <button class="hamburger" id="hamburger" aria-label="Open menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>

<!-- OVERLAY -->
<div class="menu-overlay" id="menuOverlay"></div>

<!-- MOBILE MENU — slides from bottom -->
<div class="mobile-menu" id="mobileMenu">
  <div class="mobile-menu-handle"></div>
  <a href="index.html" onclick="closeMenu()">
    <div class="menu-icon">🏠</div> Home
  </a>
  <a href="index.html#calculators" onclick="closeMenu()">
    <div class="menu-icon">🧮</div> Calculators
  </a>
  <a href="index.html#text-tools" onclick="closeMenu()">
    <div class="menu-icon">📝</div> Text Tools
  </a>
  <a href="index.html#generators" onclick="closeMenu()">
    <div class="menu-icon">⚙️</div> Generators
  </a>
  <a href="index.html#healths" onclick="closeMenu()">
    <div class="menu-icon">❤️</div> Healths
  </a>
  <a href="contact.html" onclick="closeMenu()">
    <div class="menu-icon">✉️</div> Contact
  </a>
  <a href="about-us.html" onclick="closeMenu()">
    <div class="menu-icon">ℹ️</div> About
  </a>
</div>

  <!-- MAIN CONTENT -->
  <div class="container" style="padding:48px 20px 64px;">
    <div style="max-width:540px;margin:0 auto;">

      <!-- PAGE HEADER -->
      <div style="text-align:center;margin-bottom:32px;">
        <div style="font-size:48px;margin-bottom:12px;">✉️</div>

        <h1 style="font-size:28px;font-weight:800;letter-spacing:-0.5px;margin-bottom:8px;">
          Contact Us
        </h1>

        <p style="color:var(--text-muted);font-size:15px;line-height:1.7;">
          Have a question, found a problem, or want to suggest a new tool?
          We'd be happy to hear from you.
        </p>
      </div>

      <!-- CONTACT FORM -->
      <form action="https://formspree.io/f/xpqezbwq" method="POST"
        style="background:white;border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);">

        <div class="form-group">
          <label>Your Name *</label>
          <input type="text" name="name" placeholder="Your name" required>
        </div>

        <div class="form-group">
          <label>Email Address *</label>
          <input type="email" name="email" placeholder="your@email.com" required>
        </div>

        <div class="form-group">
          <label>Subject *</label>
          <select name="subject" required>
            <option value="">Select a subject</option>
            <option value="Bug Report">Bug Report</option>
            <option value="Tool Request">Tool Request</option>
            <option value="Feedback">Feedback</option>
            <option value="Other">Other</option>
          </select>
        </div>

        <div class="form-group">
          <label>Message *</label>
          <textarea name="message" rows="5" placeholder="Tell us how we can help..." style="resize:vertical;" required
            minlength="10"></textarea>
        </div>

        <!-- Spam Protection -->
        <input type="text" name="_gotcha" style="display:none;">

        <!-- Redirect After Submit -->
        <input type="hidden" name="_next" value="https://toolsgrid.co.in/thanks.html">

        <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">
          Send Message
        </button>

        <p style="font-size:12px;color:var(--text-muted);text-align:center;margin-top:14px;">
          Your information is only used to respond to your message.
        </p>

      </form>


      <!-- INFO CARDS -->
      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:24px;text-align:center;">

        <div style="background:white;border-radius:10px;padding:14px;box-shadow:var(--shadow);">
          <div style="font-size:22px;margin-bottom:4px;">⚡</div>
          <div style="font-size:12px;font-weight:600;">Quick Response</div>
          <div style="font-size:11px;color:var(--text-muted);margin-top:2px;">
            We reply as soon as possible
          </div>
        </div>

        <div style="background:white;border-radius:10px;padding:14px;box-shadow:var(--shadow);">
          <div style="font-size:22px;margin-bottom:4px;">🔒</div>
          <div style="font-size:12px;font-weight:600;">Privacy</div>
          <div style="font-size:11px;color:var(--text-muted);margin-top:2px;">
            Your details stay private
          </div>
        </div>

        <div style="background:white;border-radius:10px;padding:14px;box-shadow:var(--shadow);">
          <div style="font-size:22px;margin-bottom:4px;">🛠️</div>
          <div style="font-size:12px;font-weight:600;">ToolsGrid</div>
          <div style="font-size:11px;color:var(--text-muted);margin-top:2px;">
            Free online tools
          </div>
        </div>

      </div>

    </div>
  </div>

  <!-- FOOTER -->
  <footer>
    <div class="footer-links">
      <a href="index.html">Home</a>
      <a href="about-us.html">About</a>
      <a href="privacy-policy.html">Privacy Policy</a>
      <a href="contact.html">Contact</a>
      <a href="sitemap.xml">Sitemap</a>
    </div>

    <p>
      © <span id="yr"></span>
      <strong style="color:white;">ToolsGrid.co.in</strong>
      — Free Online Tools
    </p>

    <p style="margin-top:6px; font-size:12px; opacity:0.5;">
    Made with ❤️ in India | Free Online Tools for Everyone
  </p>
  </footer>

  <script src="assets/js/main.js"></script>
  <script>
    document.getElementById('yr').textContent = new Date().getFullYear();
  </script>

</body>

</html>