feat: form block two-column layout — contact info left, form right
This commit is contained in:
浅念
+17
-4
@@ -27,7 +27,7 @@ BLOCKS = {
|
||||
'pricing':{'name':'服务方案','icon':'＄','fields':['title','items'],'defaults':{'title':'服务方案','items':[{'name':'标准方案','price':'联系我们','features':['专业咨询','售后服务'],'href':'/contact/'}]}},
|
||||
'map':{'name':'位置导航','icon':'⌖','fields':['title','address','url','embed'],'defaults':{'title':'欢迎来访','address':'请填写实际办公地址','url':'','embed':''}},
|
||||
'form_link':{'name':'询盘表单入口','icon':'✉','fields':['title','description','button','href'],'defaults':{'title':'提交询盘','description':'欢迎联系我们获取报价和资料','button':'联系销售','href':'/contact/'}},
|
||||
'form':{'name':'询盘表单','icon':'✉','fields':['title','description','button_text','button_href'],'defaults':{'title':'Get a Quote','description':'Send us your requirements and our team will reply within 24 hours.','button_text':'Contact Us','button_href':'/contact-us/'}},
|
||||
'form':{'name':'询盘表单','icon':'✉','fields':['title','description','button_text','button_href','kicker','info_title','info_text','items'],'defaults':{'title':'Get a Quote','description':'Send us your requirements and our team will reply within 24 hours.','button_text':'Contact Us','button_href':'/contact-us/','kicker':'CONTACT US','info_title':'Get in Touch','info_text':'We reply within one business day.','items':[{'icon':'✉','title':'Email','text':'sales@hesupipe.com'},{'icon':'◉','title':'Phone / WhatsApp','text':'+86 371 5555 0000'},{'icon':'⌖','title':'Address','text':'Zhengzhou, Henan, China'},{'icon':'◷','title':'Working Hours','text':'Mon-Fri 8:00-18:00 (GMT+8)'}]}},
|
||||
'trust_bar':{'name':'信任条','icon':'✓','fields':['title','items'],'defaults':{'title':'','items':[{'icon':'✓','title':'Certified quality','text':'Inspected before every shipment'},{'icon':'◎','title':'Global export','text':'Delivering to worldwide markets'},{'icon':'▤','title':'Full documentation','text':'Specs and export files on hand'},{'icon':'✉','title':'Responsive service','text':'Replies within one business day'}]}},
|
||||
'applications_band':{'name':'应用展示带','icon':'⊞','fields':['title','subtitle','items'],'defaults':{'title':'Built for real-world projects','subtitle':'APPLICATIONS','items':[{'icon':'◉','title':'Water supply','text':'Municipal piping and treatment networks.'},{'icon':'◍','title':'Drainage','text':'Gravity and pressure sewer systems.'},{'icon':'✦','title':'Gas','text':'PE pipelines for fuel gas distribution.'},{'icon':'◆','title':'Mining','text':'Abrasion-resistant slurry and vent lines.'}]}},
|
||||
}
|
||||
@@ -424,18 +424,31 @@ def render_blocks(blocks, site, page, entries):
|
||||
if form_endpoint and str(form_endpoint).startswith('https://'):
|
||||
action=escape(str(form_endpoint),quote=True);method='POST'
|
||||
elif email:
|
||||
action=f'mailto:{escape(email)}?subject=Inquiry from website';method='POST'
|
||||
action=f'mailto:{escape(email)}?subject=Inquiry';method='POST'
|
||||
else:
|
||||
action=href;method='GET'
|
||||
kicker=escape(resolve('kicker','CONTACT US'))
|
||||
info_title=escape(resolve('info_title','Get in Touch'))
|
||||
info_text=escape(resolve('info_text','We reply within one business day.'))
|
||||
info_items=''
|
||||
for item in (block.get('items') or []):
|
||||
icon=escape(str(item.get('icon','')).strip() or '✦')
|
||||
it=escape(str(item.get('title','')).strip())
|
||||
tx=escape(str(item.get('text','')).strip())
|
||||
if it or tx:
|
||||
info_items+=f'<div class="sf-contact-item"><span class="sf-contact-icon" aria-hidden="true">{icon}</span><div><strong>{it}</strong><p>{tx}</p></div></div>'
|
||||
form_html=(
|
||||
f'<div class="sf-contact-grid">'
|
||||
f'<div class="sf-contact-info"><span class="sf-kicker">{kicker}</span><h2>{info_title}</h2><p class="sf-contact-desc">{info_text}</p><div class="sf-contact-list">{info_items}</div></div>'
|
||||
f'<div class="sf-form-card"><h2 class="sf-form-title">{title}</h2><p class="sf-form-text">{desc}</p>'
|
||||
f'<form class="sf-form-grid" action="{action}" method="{method}">'
|
||||
f'<div class="sf-form-field"><label>Your Name *</label><input name="name" required maxlength="200" autocomplete="name" placeholder="John Smith"></div>'
|
||||
f'<div class="sf-form-field"><label>Email *</label><input name="email" type="email" required maxlength="200" autocomplete="email" placeholder="you@company.com"></div>'
|
||||
f'<div class="sf-form-field"><label>Phone / WhatsApp</label><input name="phone" maxlength="50" autocomplete="tel" placeholder="+86 ..."></div>'
|
||||
f'<div class="sf-form-field sf-form-full"><label>Message *</label><textarea name="message" required maxlength="5000" rows="4" placeholder="Tell us your product requirements, quantity and destination port."></textarea></div>'
|
||||
f'<div class="sf-form-field sf-form-full"><label>Message *</label><textarea name="message" required maxlength="5000" rows="4" placeholder="Product, quantity, destination port."></textarea></div>'
|
||||
f'<input name="website" tabindex="-1" autocomplete="off" class="sf-honeypot" aria-hidden="true" style="position:absolute;left:-9999px">'
|
||||
f'<button class="sf-button sf-form-submit" type="submit">Send Inquiry →</button></form></div>')
|
||||
f'<button class="sf-button sf-form-submit" type="submit">Send Inquiry →</button></form></div>'
|
||||
f'</div>')
|
||||
parts.append(start+form_html+end)
|
||||
elif typ=='layout':
|
||||
columns=block['columns'];gap=block.get('gap',24)
|
||||
|
||||
@@ -113,3 +113,15 @@
|
||||
.sf-theme-trade-pro .sf-form-note{color:var(--sf-tp-color-text-muted,#8494a6);font-size:13px;margin:0 0 20px}
|
||||
.sf-theme-trade-pro .sf-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
|
||||
@media (max-width:620px){.sf-theme-trade-pro .sf-form-grid{grid-template-columns:1fr}}
|
||||
|
||||
/* ── 联系双栏：左信息右表单 ── */
|
||||
.sf-theme-trade-pro .sf-contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:calc(var(--sf-tp-space-12,48px) + var(--sf-tp-space-4,16px));align-items:start}
|
||||
.sf-theme-trade-pro .sf-contact-info .sf-kicker{display:block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:740;color:var(--sf-accent-c,var(--accent,#0874df));margin-bottom:12px}
|
||||
.sf-theme-trade-pro .sf-contact-info h2{font-size:calc(var(--sf-title-size,32px) * .75);margin:0 0 12px}
|
||||
.sf-theme-trade-pro .sf-contact-desc{color:var(--sf-tp-color-text-muted,#5a6a7e);line-height:1.6;margin:0 0 24px}
|
||||
.sf-theme-trade-pro .sf-contact-list{display:grid;gap:calc(var(--sf-tp-space-5,20px))}
|
||||
.sf-theme-trade-pro .sf-contact-item{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center}
|
||||
.sf-theme-trade-pro .sf-contact-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--sf-btn-c,var(--sf-tp-color-surface-brand,#0874df));color:#fff;font-size:18px}
|
||||
.sf-theme-trade-pro .sf-contact-item strong{display:block;margin-bottom:2px}
|
||||
.sf-theme-trade-pro .sf-contact-item p{margin:0;color:var(--sf-tp-color-text-muted,#5a6a7e);font-size:var(--sf-text-size,14px)}
|
||||
@media(max-width:900px){.sf-theme-trade-pro .sf-contact-grid{grid-template-columns:1fr;gap:24px}}
|
||||
|
||||
Reference in New Issue
Block a user