Contact form

Build fields in the inspector (text, email, tel, etc.), set a Form key for your handler, and configure the success message.

Информация

Requires PageBuilder Pro.

What the PageBuilder form adds

• Field set in a repeater, not hard-coded HTML
• form_key ties the block to your handler (AjaxForm, snippet)
• Success message and redirect live in the inspector

Typical placement

• Lead form on a landing page
• Feedback on contacts
• Lead magnet: email gate for a PDF

Page examples

• Landing: Hero → Features → Contact form
• Contacts: Contact with map → Contact form

form_key and fields

Form key must match your site handler (snippet, AjaxForm). Fields repeater sets name, type, required per row.

Similar sections

• CTA with a single link instead of fields
• Contact for tel:/mailto: without submit

Block parameters

Parameter	Value
key	contact_form
Layer	Pro
Category	conversion (conversion)
Chunk	pagebuilderpro_contact_form
Requires	pro

Inspector fields

Fill these fields in the section inspector. Field types are documented in the field types reference.

Title (title)

Type text. Optional.

Intro (intro)

Type textarea. Optional.

Form key (form_key)

Type text. Required.

Fields (fields)

Type repeater. Required. Repeatable rows. "Add" button in the inspector.

Each row:

Field	Type	Label	Required
name	text	Field name	yes
label	text	Label	yes
type	select	Type	yes
required	yesno	Required	no

Submit label (submit_label)

Type text. Optional.

Success message (success_message)

Type textarea. Optional.

Redirect URL (redirect_url)

Type url. Optional.

Site output

pb-contact-form. Submit via pbForm / pbFetch on the front end.

Section data

Example payload after save. Media, video, and map values may be enriched on output:

{
  "title": "Section title",
  "intro": "Short intro before the main content.",
  "form_key": "contact",
  "fields": [
    {
      "_rowId": "00000000-0000-4000-8000-000000000001",
      "name": "Jane Doe",
      "label": "Happy customers",
      "type": "text",
      "required": true
    }
  ],
  "submit_label": "Submit",
  "success_message": "Thank you! We will contact you shortly.",
  "redirect_url": "https://example.com/thanks"
}

Chunk template

Fenom chunk pagebuilderpro_contact_form:

{var $formKey = $form_key|default:'contact'}
{var $status = $form_status|default:'idle'}
<section class="pb-section pb-section--contact-form pb-contact-form{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="contact_form"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-contact-form__inner">
    {if $title}
      <h2 class="pb-heading pb-contact-form__title">{$title|escape}</h2>
    {/if}
    {if $intro}
      <p class="pb-contact-form__intro">{$intro|escape}</p>
    {/if}

    {if !$formit_available}
      <p class="pb-contact-form__fallback" role="status">The form is temporarily unavailable. Install FormIt or ajaxForm.</p>
    {elseif $status == 'success'}
      <div class="pb-contact-form__success" role="status">
        <p>{$success_message|default:'Thank you! We will contact you shortly.'|escape}</p>
      </div>
    {else}
      {if $status == 'error'}
        <div class="pb-contact-form__summary" role="alert">
          <p>Check the required fields and try again.</p>
        </div>
      {/if}
      <form class="pb-contact-form__form" method="post" action="">
        <input type="hidden" name="pb_form_key" value="{$formKey|escape}" />
        <input type="hidden" name="nospam" value="" tabindex="-1" autocomplete="off" aria-hidden="true" class="pb-contact-form__honeypot" />
        <div class="pb-contact-form__fields">
          {foreach $fields as $field}
            {var $fname = $field.name|default:''}
            {var $flabel = $field.label|default:$fname}
            {var $ftype = $field.type|default:'text'}
            {var $frequired = $field.required|default:0}
            {var $fvalue = $form_values[$fname]|default:''}
            {var $ferror = $form_errors[$fname]|default:''}
            <div class="pb-contact-form__field{if $ferror} pb-contact-form__field--error{/if}">
              <label class="pb-contact-form__label" for="pb-{$formKey|escape}-{$fname|escape}">
                {$flabel|escape}{if $frequired}<span class="pb-contact-form__required" aria-hidden="true">*</span>{/if}
              </label>
              {if $ftype == 'textarea'}
                <textarea
                  class="pb-contact-form__control"
                  id="pb-{$formKey|escape}-{$fname|escape}"
                  name="{$fname|escape}"
                  rows="4"
                  {if $frequired}required aria-required="true"{/if}
                  {if $ferror}aria-invalid="true"{/if}
                >{$fvalue|escape}</textarea>
              {else}
                <input
                  class="pb-contact-form__control"
                  id="pb-{$formKey|escape}-{$fname|escape}"
                  type="{if $ftype == 'email'}email{elseif $ftype == 'phone'}tel{else}text{/if}"
                  name="{$fname|escape}"
                  value="{$fvalue|escape}"
                  {if $frequired}required aria-required="true"{/if}
                  {if $ferror}aria-invalid="true"{/if}
                />
              {/if}
              {if $ferror}
                <p class="pb-contact-form__error" id="pb-{$formKey|escape}-{$fname|escape}-error">
                  {if $ferror == 'email'}Enter a valid email address.{else}This field is required.{/if}
                </p>
              {/if}
            </div>
          {/foreach}
        </div>
        <button class="pb-button pb-contact-form__submit" type="submit">
          {$submit_label|default:'Submit'|escape}
        </button>
      </form>
    {/if}
  </div>
</section>

JSON definition

PageBuilderPro/core/components/pagebuilderpro/sections/contact_form.json

See also

• Section catalog
• Fields overview
• Frontend output