html
{% set bg_color = section.settings.bg_color | default("#f3f4f6") %}
{% set pad_y = section.settings.padding_y | default(60) %}
<section id="jw-section-{{ section.id }}" style="background-color: {{ bg_color }}; padding: {{ pad_y }}px 20px;">
<div class="jw-container" data-id="{{ section.id }}">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8">
<div class="card border-0 shadow-lg p-5" style="border-radius: 16px;">
<h3 class="fontStyle3 mb-4 text-center">{{ section.settings.title | default("Contact Us") }}</h3>
<p class="fontStyle8 text-center text-muted mb-4">{{ section.settings.subtitle | default("We'd love to hear from you.") }}</p>
{# DYNAMIC FORM RENDERING #}
{% if section.blocks is defined and section.blocks|length > 0 %}
{% for block in section.blocks %}
{% switch block.type %}
{% case "siteform" %}
<div {{ jw_attributes(block) }}>
{% if block.form %}
{% set form = block.form %}
<form class="jw_dynamic_form" name="form_v_{{ form.id }}">
{# SYSTEM REQUIRED HIDDEN FIELDS #}
<input type="hidden" name="csrf_token" value="{{ form.csrf }}">
<signature style="display:none">{{ form.signature }}</signature>
<div class="row g-3">
{% for field in form.fields %}
<div class="col-12 dynamicField mb-3"
data-required="{{ field.required == 'yes' and field.state != 'hide' ? 'yes' : 'no' }}"
data-input="{{ field.type }}"
data-mode="{{ field.mode }}"
{% if field.state == 'hide' %}style="display:none"{% endif %}>
{% if field.hideLabel != "yes" %}
<label class="form-label fontStyle8 fw-bold">{{ field.label }} {% if field.required == 'yes' %}<span class="text-danger">*</span>{% endif %}</label>
{% endif %}
{# RENDER INPUT TYPES #}
{% if field.type in ["text","email","tel","number","password","date","datetime"] %}
<input type="{{ field.type == 'datetime' ? 'datetime-local' : field.type }}"
data-name="{{ field.name }}" data-input="{{ field.type }}" date-mode="{{ field.mode }}"
class="form-control jw_dynamic_input p-3"
placeholder="{{ field.placeholder }}"
tooltip="{{ field.tooltip }}"
{% if field.required == 'yes' %}required{% endif %}
{% if field.maxlength %}maxlength="{{ field.maxlength }}"{% endif %}
{% if field.minlength %}minlength="{{ field.minlength }}"{% endif %}
errmsg="{{ field.errmsg }}">
{% elseif field.type == "textarea" %}
<textarea data-name="{{ field.name }}" class="form-control jw_dynamic_input p-3" data-input="textarea" rows="4" placeholder="{{ field.placeholder }}"></textarea>
{% elseif field.type == "dropdown" %}
<select class="form-select jw_dynamic_input p-3" data-input="dropdown">
{% for opt in field.extra.options %}
<option value="{{ opt }}">{{ opt }}</option>
{% endfor %}
</select>
{% elseif field.type == "radio" %}
<div class="d-flex gap-3 mt-2">
{% for opt in field.extra.options %}
<div class="form-check jw-radio-group">
<input type="radio" class="form-check-input jw_dynamic_input" value="{{ opt }}" name="radio_{{ field.name }}">
<label class="form-check-label">{{ opt }}</label>
</div>
{% endfor %}
</div>
{% elseif field.type == "checkbox" %}
<div class="form-check mt-2">
<input type="checkbox" class="form-check-input jw_dynamic_input" name="{{ field.name }}">
<label class="form-check-label">{{ field.label }}</label>
</div>
{% endif %}
</div>
{% endfor %}
{# PAYMENT GATEWAY INJECTION (REQUIRED) #}
{% if form.payment.enabled %}
<div class="col-12 dynamicField paymentItems mb-3" data-input="radio" data-mode="normal">
<label class="form-label fontStyle8 fw-bold">{{ form.payment.label }}</label>
{% for item in form.payment.items %}
{% set rid = "payrad" ~ form.id ~ loop.index %}
<div class="form-check jw-radio-group">
<input type="radio" data-input="radio" date-mode="normal" class="form-check-input jw_dynamic_input" data-name="payItems" name="payItems" id="{{ rid }}" value="uni-{{ loop.index0 }}" required>
<label class="form-check-label" for="{{ rid }}">{{ item.itemName }}</label>
</div>
{% endfor %}
<input type="hidden" class="jw_dynamic_input submission_fpv" data-name="submission_fpv" name="submission_fpv" value="" />
</div>
{% endif %}
{# OTP FIELD INJECTION (REQUIRED) #}
{% if form.otp.enabled %}
<div class="col-12 dynamicField otpcode mb-3" style="display:none">
<label class="form-label fontStyle8 fw-bold">Enter OTP</label>
<input type="text" class="form-control jw_dynamic_input p-3">
<a href="#" class="_back2form text-decoration-none mt-2 d-inline-block fontStyle9">Change {{ form.otp.device }}</a>
</div>
{% endif %}
{# CAPTCHA INJECTION (REQUIRED) #}
{% if form.captcha_html %}
<div class="col-12 see-full mb-3">
{{ form.captcha_html | raw }}
</div>
{% endif %}
{# SUBMIT BUTTON #}
<div class="col-12 mt-4">
<input type="hidden" class="_tx_" value="{{ form.id }}">
<button type="submit" class="btn btn-primary w-100 p-3 fontStyle7 fw-bold see-button" style="background-color: var(--color1);">
{{ form.submit_label | default('Get Started') }}
</button>
</div>
</div>
</form>
{% endif %}
</div>
{% default %}
{{ render_block(block) }}
{% endswitch %}
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</section>
{% rules %}
{
"name": "Dynamic Form Capture",
"blocks": [
{
"type": "siteform",
"name": "Form Container",
"settings": []
},
{ "type": "themes" },
{ "type": "apps" }
],
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Contact Us"
},
{
"type": "text",
"id": "subtitle",
"label": "Sub Heading",
"default": "We'd love to hear from you."
},
{
"type": "color_background",
"id": "bg_color",
"label": "Background Color",
"default": "#f3f4f6"
},
{
"type": "range",
"id": "padding_y",
"label": "Vertical Padding",
"min": 0,
"max": 150,
"step": 10,
"unit": "px",
"default": 60
}
],
"presets": [
{
"blocks": [
{
"type": "siteform",
"formType": "basic",
"fields": [
{
"label": "Full Name",
"placeholder": "John Doe",
"required": "yes",
"mode": "system",
"name": "firstName",
"type": "text"
},
{
"label": "Email",
"type": "email",
"required": "yes",
"placeholder": "[email protected]",
"mode": "system",
"name": "email"
},
{
"label": "Message",
"type": "textarea",
"required": "yes",
"placeholder": "How can we help?",
"mode": "system",
"name": "message"
}
]
}
]
}
]
}
{% endrules %}