Connect partnership form to email
This commit is contained in:
Codex
@@ -59,3 +59,5 @@ footer{background:radial-gradient(circle at 15% 0,rgba(112,64,232,.16),transpare
|
||||
.revenue-visual{position:relative;min-height:710px;display:grid;place-items:center}.revenue-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(142,86,255,.44),rgba(91,46,180,.12) 48%,transparent 70%);filter:blur(12px)}.revenue-phone{position:relative;z-index:2;width:min(385px,78vw);min-height:700px;padding:28px 25px;color:#fff;background:linear-gradient(165deg,#17171d,#070708 65%);border:1px solid rgba(255,255,255,.22);border-radius:54px;box-shadow:0 45px 110px rgba(0,0,0,.6),inset 0 0 0 7px #020203;overflow:hidden}.revenue-phone:before{content:"";position:absolute;top:13px;left:50%;width:112px;height:27px;background:#000;border-radius:20px;transform:translateX(-50%)}.phone-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin:20px 7px 42px;color:#aaa;font-size:11px;letter-spacing:.17em}.phone-top i{width:9px;height:9px;background:#7e48ef;border-radius:50%;box-shadow:0 0 15px #8d5aff}.phone-top b{letter-spacing:2px}.phone-greeting{display:flex;flex-direction:column}.phone-greeting>span{color:#9a70f4;font-size:11px;font-weight:750;letter-spacing:.18em}.phone-greeting strong{margin-top:15px;font-size:30px;line-height:1.25}.phone-greeting small{margin-top:8px;color:#777}.revenue-amount{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:24px}.revenue-amount strong{font:700 38px/1 Georgia,serif;letter-spacing:-.04em}.revenue-amount span{color:#76717c;font-size:10px}.revenue-chart{height:125px;margin:18px 0 20px;padding:10px 14px 0;display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid #333;background:linear-gradient(180deg,rgba(128,77,235,.08),transparent)}.revenue-chart div{flex:1;min-height:25%;background:linear-gradient(180deg,#a776ff,#6030d7);border-radius:7px 7px 0 0;box-shadow:0 0 18px rgba(128,77,235,.18)}.revenue-chart div:nth-child(2){height:38%}.revenue-chart div:nth-child(3){height:50%}.revenue-chart div:nth-child(4){height:63%}.revenue-chart div:nth-child(5){height:77%}.revenue-chart div:nth-child(6){height:96%;background:linear-gradient(180deg,#c5a7ff,#7b43ed)}.revenue-list{display:grid;gap:9px}.revenue-list>div{display:grid;grid-template-columns:35px 1fr 28px;align-items:center;padding:13px 14px;border:1px solid #24242b;border-radius:13px;background:#111116}.revenue-list i{color:#8051df;font:600 11px Georgia;font-style:normal}.revenue-list span{font-size:13px}.revenue-list b{color:#a776ff;text-align:right}.revenue-float{position:absolute;z-index:3;min-width:215px;padding:17px 19px;display:flex;flex-direction:column;gap:6px;color:#111;background:rgba(255,255,255,.94);border-radius:18px;box-shadow:0 20px 55px rgba(0,0,0,.28);backdrop-filter:blur(10px)}.revenue-float small{color:#746f7a;font-size:11px}.revenue-float strong{font-size:14px}.revenue-float strong em{margin-left:12px;color:#4b257d;font-size:11px;font-style:normal}.revenue-float.top{right:-22px;top:125px}.revenue-float.bottom{left:-38px;bottom:105px;background:linear-gradient(135deg,#a97aff,#d2b9ff)}
|
||||
@media(max-width:1040px){.economy-section{min-height:auto}.economy-grid{grid-template-columns:1fr;gap:55px}.economy-copy h2{max-width:850px}.revenue-visual{min-height:660px}.revenue-float.top{right:8%}.revenue-float.bottom{left:8%}}
|
||||
@media(max-width:760px){.economy-grid{padding-top:80px;padding-bottom:80px}.economy-copy h2{font-size:clamp(48px,15vw,68px)}.economy-copy>p:not(.eyebrow){font-size:16px}.economy-actions{align-items:flex-start;flex-direction:column;gap:18px}.revenue-visual{min-height:660px}.revenue-phone{min-height:650px;padding:25px 20px;border-radius:42px}.revenue-float{min-width:170px;padding:13px}.revenue-float.top{right:-5px;top:100px}.revenue-float.bottom{left:-5px;bottom:90px}.phone-greeting strong{font-size:25px}.revenue-amount strong{font-size:31px}.revenue-chart{height:110px}.revenue-list>div{padding:11px 12px}}
|
||||
|
||||
.form-honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
|
||||
|
||||
@@ -1,3 +1,29 @@
|
||||
"use client";import { FormEvent,useState } from "react";
|
||||
const interests=["真人授权 AI 分身","年轻时期 AI 分身","原创数字人 IP","内容增长","评论与私聊运营","粉丝变现","MCN / Agency 合作"];
|
||||
export function ContactForm(){const [sent,setSent]=useState(false);function submit(e:FormEvent){e.preventDefault();setSent(true)}if(sent)return <div className="success" role="status"><i>✓</i><p className="eyebrow">INQUIRY SAVED</p><h2>合作意向已记录。</h2><p>这是网站原型的交互演示。正式上线时，可将表单接入邮箱、CRM 或企业协作工具。</p><button className="link" type="button" onClick={()=>setSent(false)}>继续填写一份 <b>→</b></button></div>;return <form className="form" onSubmit={submit}><div className="form-row"><label>你的称呼<input required placeholder="怎么称呼你"/></label><label>合作身份<select required defaultValue=""><option value="" disabled>请选择</option><option>个人创作者</option><option>艺人 / 经纪团队</option><option>原创数字人 IP / 项目方</option><option>MCN / Agency</option><option>品牌或平台</option></select></label></div><label>主要账号或作品链接<input required type="url" placeholder="https://"/></label><div className="form-row"><label>主要平台<select required defaultValue=""><option value="" disabled>请选择</option><option>Facebook</option><option>Instagram</option><option>TikTok</option><option>YouTube</option><option>其他</option></select></label><label>粉丝规模<select required defaultValue=""><option value="" disabled>请选择</option><option>尚未创建</option><option>1 万以下</option><option>1–10 万</option><option>10–100 万</option><option>100 万以上</option></select></label></div><fieldset><legend>感兴趣的合作方向</legend><div className="checks">{interests.map(x=><label key={x}><input type="checkbox"/><span>{x}</span></label>)}</div></fieldset><label>你现在最想解决的问题<textarea rows={5} placeholder="例如：想从零打造一个面向拉美市场的原创数字人 IP……"/></label><label className="consent"><input required type="checkbox"/><span>我同意团队仅为评估本次合作而使用以上信息。</span></label><button className="btn primary submit" type="submit">提交合作意向 <b>→</b></button><p className="note">原型演示：当前不会向外部系统发送数据。</p></form>}
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const interests = ["真人当前形象 AI 分身","年轻时期 AI 分身","原创数字人 IP","内容增长","评论与私信运营","粉丝变现","全链路转化分析"];
|
||||
const returnUrl = "https://ai-creator-partnership.liuxiaorong2025.chatgpt.site/contact?sent=1";
|
||||
|
||||
export function ContactForm(){
|
||||
const [sent,setSent]=useState(false);
|
||||
useEffect(()=>{if(new URLSearchParams(window.location.search).get("sent")==="1")setSent(true)},[]);
|
||||
|
||||
if(sent)return <div className="success" role="status"><i>✓</i><p className="eyebrow">INQUIRY SENT</p><h2>合作意向已发送。</h2><p>信息已提交至合作团队邮箱。我们会评估你的账号基础与合作目标，并在有合作空间时与你联系。</p><button className="link" type="button" onClick={()=>{window.history.replaceState({},"","/contact");setSent(false)}}>继续填写一份 <b>→</b></button></div>;
|
||||
|
||||
return <form className="form" action="https://formsubmit.co/liuxiaorong2018@gmail.com" method="POST">
|
||||
<input type="hidden" name="_subject" value="COZCREATOR：收到新的创作者合作意向"/>
|
||||
<input type="hidden" name="_template" value="table"/>
|
||||
<input type="hidden" name="_next" value={returnUrl}/>
|
||||
<input type="text" name="_honey" className="form-honey" tabIndex={-1} autoComplete="off"/>
|
||||
<div className="form-row"><label>你的称呼<input name="称呼" required placeholder="怎么称呼你"/></label><label>合作身份<select name="合作身份" required defaultValue=""><option value="" disabled>请选择</option><option>个人创作者</option><option>艺人 / 经纪团队</option><option>原创数字人 IP / 项目方</option><option>MCN / Agency</option><option>品牌或平台</option></select></label></div>
|
||||
<label>联系邮箱或 WhatsApp<input name="联系方式" required placeholder="方便我们与你联系"/></label>
|
||||
<label>主要账号或作品链接<input name="账号或作品链接" required type="url" placeholder="https://"/></label>
|
||||
<div className="form-row"><label>主要平台<select name="主要平台" required defaultValue=""><option value="" disabled>请选择</option><option>Facebook</option><option>Instagram</option><option>TikTok</option><option>YouTube</option><option>其他</option></select></label><label>粉丝规模<select name="粉丝规模" required defaultValue=""><option value="" disabled>请选择</option><option>尚未创建</option><option>1 万以下</option><option>1–10 万</option><option>10–100 万</option><option>100 万以上</option></select></label></div>
|
||||
<fieldset><legend>感兴趣的合作方向</legend><div className="checks">{interests.map(x=><label key={x}><input name="合作方向" value={x} type="checkbox"/><span>{x}</span></label>)}</div></fieldset>
|
||||
<label>你现在最想解决的问题<textarea name="合作需求" rows={5} placeholder="例如：想从零打造一个面向拉美市场的原创数字人 IP……"/></label>
|
||||
<label className="consent"><input required type="checkbox"/><span>我同意团队仅为评估本次合作而使用以上信息。</span></label>
|
||||
<button className="btn primary submit" type="submit">提交合作意向 <b>→</b></button>
|
||||
<p className="note">提交后，合作意向将发送至团队邮箱。</p>
|
||||
</form>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user