inpharmaticist.github.io/layouts/shortcodes/nostr-contact.html

<div class="nostr-contact-wrapper not-prose">
  <style>
    .nostr-contact-wrapper {
      max-width: 600px;
      margin: 2rem 0;
      font-family: inherit;
      color: #000;
    }
    .nostr-contact-wrapper .form-group {
      margin-bottom: 1.5rem;
    }
    .nostr-contact-wrapper label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 600;
      font-size: 0.9rem;
      color: #000;
    }
    .dark .nostr-contact-wrapper label {
      color: #fff;
    }
    .nostr-contact-wrapper input,
    .nostr-contact-wrapper textarea {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #e5e7eb;
      border-radius: 0.375rem;
      background: white;
      font-size: 1rem;
      color: #000;
    }
    .nostr-contact-wrapper input::placeholder,
    .nostr-contact-wrapper textarea::placeholder {
      color: #6b7280;
    }
    .nostr-contact-wrapper input:focus,
    .nostr-contact-wrapper textarea:focus {
      outline: 2px solid #3b82f6;
      outline-offset: -1px;
    }
    .dark .nostr-contact-wrapper input,
    .dark .nostr-contact-wrapper textarea {
      background: #1f2937;
      border-color: #4b5563;
      color: #fff;
    }
    .nostr-contact-wrapper small {
      display: block;
      margin-top: 0.25rem;
      color: #374151;
      font-size: 0.875rem;
    }
    .dark .nostr-contact-wrapper small {
      color: #9ca3af;
    }
    .nostr-contact-wrapper button {
      background: #111827;
      color: white;
      padding: 0.75rem 1.5rem;
      border-radius: 0.375rem;
      font-weight: 600;
      width: 100%;
      cursor: pointer;
      border: none;
    }
    .nostr-contact-wrapper button:hover {
      background: #374151;
    }
    .dark .nostr-contact-wrapper button {
      background: #fff;
      color: #000;
    }
    .dark .nostr-contact-wrapper button:hover {
      background: #e5e7eb;
    }
    .nostr-contact-wrapper button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    #nc-status {
      margin-top: 1rem;
      padding: 1rem;
      border-radius: 0.375rem;
      display: none;
    }
    #nc-status.success {
      display: block;
      background: #f0fdf4;
      border: 1px solid #86efac;
      color: #166534;
    }
    .dark #nc-status.success {
      background: #064e3b;
      border-color: #059669;
      color: #d1fae5;
    }
    #nc-status.error {
      display: block;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
    }
    .dark #nc-status.error {
      background: #7f1d1d;
      border-color: #dc2626;
      color: #fee2e2;
    }
  </style>

  <form id="nostr-contact-form" onsubmit="return false;">
    <div class="form-group">
      <label for="nc-name">Name</label>
      <input type="text" id="nc-name" required>
    </div>
    <div class="form-group">
      <label for="nc-contact">Contact Info</label>
      <input type="text" id="nc-contact" placeholder="email@example.com" required>
      <small>How you want to be contacted back</small>
    </div>
    <div class="form-group">
      <label for="nc-message">Message</label>
      <textarea id="nc-message" rows="5" required></textarea>
    </div>
    <button type="submit" id="nc-submit">Send Message</button>
  </form>
  <div id="nc-status"></div>

  <script src="https://unpkg.com/nostr-tools@1.17.0/lib/nostr.bundle.js"></script>
  <script>
    (function() {
      // Debug: Log what we received
      const rawNpub = {{ .Get "npub" | default "npub1c0r3ytrr4afgrlhrhyec6y9wvkckdllx7ul3cfevtsgjqcrhx8tsdzqs7w" | jsonify }};
      console.log("Raw npub string:", rawNpub);
      console.log("NostrTools loaded?", typeof window.NostrTools);
      
      const RECIPIENT_NPUB = rawNpub;
      let RECIPIENT_HEX;
      
      try {
        if (!window.NostrTools) throw new Error("NostrTools not loaded");
        if (!window.NostrTools.nip19) throw new Error("nip19 not available");
        
        const decoded = window.NostrTools.nip19.decode(RECIPIENT_NPUB);
        console.log("Decoded result:", decoded);
        RECIPIENT_HEX = decoded.data;
      } catch(e) {
        console.error("Decode error:", e.message);
        console.error("Full error:", e);
      }
  
      // Rest of your code...
      document.getElementById('nostr-contact-form').addEventListener('submit', async (e) => {
        // ... keep existing submit handler code ...
      });
    })();
  </script>

</div>