Capturing existing forms

Introduction

If a site already has hand-written forms, you do not have to rebuild them in the control panel. Wrap each one in {exp:formidable:capture}. Formidable reads the markup, creates a form with matching fields, and outputs your markup unchanged. From then on the form submits through Formidable: it is validated, stored, listed in the control panel, and can run workflows.

Wrap the form

Wrap your existing markup in the tag, point the form's action at {captured_action_url}, and add {captured_meta} inside it:

templates/default_site/contact.group/index.html
{exp:formidable:capture form_handle="contact" sync="update"}
    <form method="post" action="{captured_action_url}">
        {captured_meta}

        <label for="name">Name</label>
        <input type="text" name="name" id="name" required>

        <label for="email">Email</label>
        <input type="email" name="email" id="email" required>

        <label for="topic">Topic</label>
        <select name="topic" id="topic">
            <option value="sales">Sales</option>
            <option value="support">Support</option>
        </select>

        <button type="submit">Send</button>
    </form>
{/exp:formidable:capture}

Visit the page as a Super Admin
Capture only reads markup and writes to the database for a signed-in Super Admin, so ordinary visitors can never create or change forms. Load the page while signed in. Formidable creates the contact form with a Text, an Email and a Select field, and maps required onto the fields' rules.
Check the report
Look for fields Formidable could not match to a fieldtype:
```
php system/ee/eecli.php formidable:capture-status --form=contact
```
Or show the lists on the page while you work:
templates/default_site/contact.group/index.html
```
{if captured_skipped}{/if}
```
Force a fieldtype for any skipped field with field:HANDLE:fieldtype="tel", and leave out inputs that are not part of the form with ignore="newsletter|hp_check".
Switch parsing off for production
Once the form is captured, set sync="off". The markup still renders and submits, without being parsed on every page view.
templates/default_site/contact.group/index.html
```
{exp:formidable:capture form_handle="contact" sync="off"}
```

Showing errors in your markup

A failed submission comes back to the page with the same error variables the form tag has. Place them beside your inputs, and repopulate the inputs with {value:HANDLE}:

templates/default_site/contact.group/index.html
<input type="email" name="email" id="email" value="{value:email}" required>
{if error:email}<p class="field-error">{error:email}</p>{/if}

Captured forms in the control panel

A captured form's fields cannot be edited in the control panel, because the markup is their source, and an edit would be overwritten by the next capture. Statuses, settings, submissions and workflows all work as usual.

To manage the fields in the control panel from now on, convert the form. The builder then unlocks. There is no way back, so switch the template to sync="off", or replace it with {exp:formidable:form}, at the same time.

Every parameter and variable is in the capture tag reference.

Introduction​

Showing errors in your markup​

Captured forms in the control panel​

Introduction

Showing errors in your markup

Captured forms in the control panel