> ## Documentation Index
> Fetch the complete documentation index at: https://docs.estream.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Request Access

export default function ContactForm() {
  const [submitting, setSubmitting] = useState(false);
  const [msg, setMsg] = useState("");
  async function handleSubmit(e) {
    e.preventDefault();
    setMsg("");
    setSubmitting(true);
    const form = e.target;
    const params = new URLSearchParams({
      name: form.name.value,
      email: form.email.value,
      message: form.message.value,
      businessName: form.businessName.value,
      phone: form.phone.value
    }).toString();
    try {
      const res = await fetch(`https://tmextapidev.estream.com/index.cfm/contactus?${params}`, {
        method: "POST"
      });
      if (res.ok) {
        setMsg("✅ Message sent successfully!");
        form.reset();
      } else {
        setMsg("⚠️ There was a problem sending your message.");
      }
    } catch {
      setMsg("❌ Unable to send message. Please try again later.");
    }
    setSubmitting(false);
  }
  const inputStyle = {
    width: "100%",
    marginTop: "6px",
    padding: "10px 12px",
    borderRadius: "6px",
    border: "1px solid var(--mint-color-border)",
    background: "var(--mint-color-surface)",
    color: "var(--mint-color-text)",
    fontSize: "15px",
    boxSizing: "border-box",
    transition: "background 0.2s, border-color 0.2s, color 0.2s"
  };
  return <>
      <style>{`
        /* DARK MODE ONLY */
        @media (prefers-color-scheme: dark) {
          .contact-box {
            background: #1e1e20 !important;
            box-shadow: 0 4px 24px rgba(0,0,0,0.6);
          }
          .contact-box input,
          .contact-box textarea {
            background: #2b2b2d !important;
            border-color: #3a3a3c !important;
            color: #f2f2f2 !important;
          }
          .contact-box label {
            color: #e7e7e7 !important;
          }
          .contact-box button {
            background: #0a84ff !important;
          }
        }
      `}</style>
      <div className="api-access-container">
        <p>Request for Access.</p>
        <p>Before you can use the API, you’ll need credentials.</p>
        <h3>To request access</h3>
        <ol>
          <li>Submit an internal access form or contact the eStream Admin.</li>
          <li>
            Provide the following details.
            <ul>
              <li>Intended use case (integration, analytics, automation)</li>
              <li>Desired environment (QA or Production)</li>
              <li>Email for notifications</li>
            </ul>
          </li>
        </ol>

        <h3>Once approved, you’ll receive:</h3>
        <ul>
          <li>
            A unique <strong>username/password</strong>
          </li>
          <li>Environment URLs</li>
          <li>
            Assigned <strong>rate limit plan</strong>
          </li>
        </ul>
      </div>
      <div className="contact-box" style={{
    margin: "32px auto",
    padding: "32px 24px 24px",
    background: "var(--mint-color-bg)",
    maxWidth: "100%",
    borderRadius: "12px",
    boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
    transition: "background 0.2s, box-shadow 0.2s"
  }}>
        <form onSubmit={handleSubmit}>
          <label style={{
    display: "block",
    marginBottom: "18px",
    fontWeight: "500",
    color: "var(--mint-color-text)"
  }}>
            Name
            <input required name="name" placeholder="Your full name" style={inputStyle} />
          </label>

          <label style={{
    display: "block",
    marginBottom: "18px",
    fontWeight: "500",
    color: "var(--mint-color-text)"
  }}>
            Business Name
            <input required name="businessName" placeholder="Your business name" style={inputStyle} />
          </label>

          <label style={{
    display: "block",
    marginBottom: "18px",
    fontWeight: "500",
    color: "var(--mint-color-text)"
  }}>
            Phone
            <input required name="phone" placeholder="Your phone number" style={inputStyle} />
          </label>

          <label style={{
    display: "block",
    marginBottom: "18px",
    fontWeight: "500",
    color: "var(--mint-color-text)"
  }}>
            Email
            <input required name="email" type="email" placeholder="Your email address" style={inputStyle} />
          </label>

          <label style={{
    display: "block",
    marginBottom: "18px",
    fontWeight: "500",
    color: "var(--mint-color-text)"
  }}>
            Message
            <textarea required name="message" placeholder="For Intended Use only" rows={6} style={inputStyle} />
          </label>

          <button type="submit" disabled={submitting} style={{
    width: "100%",
    padding: "12px 0",
    backgroundColor: "var(--mint-color-accent)",
    color: "#fff",
    border: "none",
    borderRadius: "6px",
    fontSize: "16px",
    fontWeight: "600",
    cursor: submitting ? "not-allowed" : "pointer",
    marginTop: "8px",
    transition: "background 0.2s"
  }}>
            {submitting ? "Sending..." : "Submit"}
          </button>

          {msg && <div style={{
    marginTop: "16px",
    fontWeight: "bold",
    color: "var(--mint-color-text)"
  }}>
              {msg}
            </div>}
        </form>
      </div>
    </>;
}

Have a question or feedback? Send us a message below.

<ContactForm />

> *Note: This form is for demonstration only. For real submissions, please contact [support@telemapper.com](mailto:support@telemapper.com).*