Site Builder

Editing: modules-contact-social.php

writable 0666

<?php
/**************************************************************************
 *  CONTACT FORM MODULE  – purple mailto popup
 *  ----------------------------------------------------------------------
 *  • Visible only when profile["email"] is a valid address
 *  • Bonus: hides the form on free‑tier listings unless you remove the check
 **************************************************************************/

/* 1) Load profile.json when parent hasn’t supplied $profile */
if (!isset($profile) || !is_array($profile)) {
    $json = dirname(__DIR__, 2) . '/profile.json';
    $profile = is_readable($json) ? json_decode(file_get_contents($json), true) : [];
}

$email = $profile['email'] ?? '';
$handle= $profile['handle'] ?? '';
$isPremium = !empty($profile['premium']) && strtolower($profile['premium'])!=='off';

if (!$isPremium || !filter_var($email, FILTER_VALIDATE_EMAIL)) { return; } // nothing to show
?>

<section class="cf-shell">
  <form id="cfForm" class="cf-form" onsubmit="return cfSend(event);">
    <header class="cf-head">
      Book a Show / Ask a Question
      <span>Contact <?= htmlspecialchars($handle) ?></span>
    </header>

<div class="cf-body">
      
      <div class="cf-group">
        <div>
          <label class="cf-label" for="cfFirst">First</label>
          <input class="cf-input" id="cfFirst" name="first" maxlength="32" required>
        </div>
        <div>
          <label class="cf-label" for="cfLast">Last</label>
          <input class="cf-input" id="cfLast" name="last" maxlength="32" required>
        </div>
      </div>

<div class="cf-group">
        <div>
          <label class="cf-label" for="cfEmail">Your E‑mail</label>
          <input class="cf-input" id="cfEmail" name="email" type="email" maxlength="60" required>
        </div>
        <div>
          <label class="cf-label" for="cfPhone">Phone</label>
          <input class="cf-input" id="cfPhone" name="phone" maxlength="18">
        </div>
      </div>

<div class="cf-group">
        <div>
          <label class="cf-label" for="cfWhen">Call When</label>
          <select class="cf-select" id="cfWhen" name="when">
            <option value="" selected>–</option>
            <option>Anytime</option><option>Morning</option>
            <option>Afternoon</option><option>Evening</option>
          </select>
        </div>
        <div>
          <label class="cf-label" for="cfZone">Zone</label>
          <select class="cf-select" id="cfZone" name="zone">
            <option value="" selected>–</option>
            <option>ET</option><option>CT</option><option>MT</option><option>PT</option>
          </select>
        </div>
      </div>

<a id="cfToggle" href="#" class="cf-toggle">+ Additional Information</a>
      <div id="cfExtra" class="cf-extra">
        <label class="cf-label" for="cfAddl">Details / Additional Info</label>
        <textarea class="cf-textarea" id="cfAddl" name="details" rows="3"></textarea>
      </div>

/* ---------- card ---------- */
.cf-form{
  background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}

/* header ribbon */
.cf-head{
  background:#9C27B0;color:#fff;text-align:center;
  padding:1.1rem .8rem;font-weight:700;font-size:1.25rem;line-height:1.2;
}
.cf-head span{display:block;font-size:.85rem;font-weight:600;opacity:.9;margin-top:.25em}

/* body */
.cf-body{padding:1rem;color:#000}
.cf-group{display:flex;flex-wrap:wrap;gap:1em;margin-top:1em}
.cf-group:first-of-type{margin-top:0}
.cf-group>div{flex:1 1 160px;min-width:130px}

/* controls */
.cf-label{display:block;font-weight:600;color:#000;margin-bottom:.5em;font-size:.95rem}
.cf-input,.cf-select,.cf-textarea{
  width:100%;padding:.6em .8em;border:1px solid #CCC;border-radius:6px;
  font-size:1rem;background:#F9F9F9;transition:border-color .2s,background .2s;
}
.cf-input:focus,.cf-select:focus,.cf-textarea:focus{
  border-color:#64B5F6;background:#FFF;outline:none
}
.cf-textarea{resize:vertical;min-height:120px}

/* toggle link */
.cf-toggle{display:block;text-align:right;font-size:.9rem;color:#000;font-weight:600;
           text-decoration:underline;margin-top:1em}
.cf-toggle:hover{text-decoration:none}
.cf-extra{display:none;margin-top:.8rem}

/* send button */
.cf-btn-wrap{text-align:right;margin-top:1.4rem}
.cf-button{
  background:#9C27B0;color:#fff;font-weight:700;padding:.7em 2em;border:none;
  border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.12);cursor:pointer;font-size:1rem
}
.cf-button:hover{background:#7B1FA2}

/* mobile tweak */
@media(max-width:480px){
  .cf-group>div{flex:1 1 100%}
}
</style>

/* build mailto and fire */
function cfSend(ev){
  ev.preventDefault();
  const v=id=>document.getElementById(id).value.trim();
  const rows=[
    `Name: ${v('cfFirst')} ${v('cfLast')}`,
    `E‑mail: ${v('cfEmail')||'—'}`,
    v('cfPhone')?`Phone: ${v('cfPhone')}`:'',
    v('cfWhen') ?`Call When: ${v('cfWhen')}`:'',
    v('cfZone') ?`Zone: ${v('cfZone')}`:''
  ].filter(Boolean);

if(v('cfAddl')) rows.push('','Additional Information:',v('cfAddl'));
  const body=encodeURIComponent(rows.join('\n'));
  const subject=encodeURIComponent('Contact <?= addslashes($handle) ?>');
  location.href=`mailto:<?= rawurlencode($email) ?>?subject=${subject}&body=${body}`;
  return false;
}
</script>

Site Builder

Editing: modules-contact-social.php

Site Builder