FormGrab

FormGrab is a module for EE4 to make it easy to add forms to your website. Simply create your forms in HTML, add the FormGrab tag and you are instantly capturing data.

FormGrab

Available for: EE4
Version:

Download for EE4

FormGrab - Getting Started

Install the add-on

Unzip the add-on file and copy the formgrab folder to your system/user/addons folder.

Go to the ExpressionEngine Control Panel Add-On Manager page and install FormGrab

The FormGrab Control Panel

The initial FormGrab Control Panel page will look like this.

FormGrab Control Panel

FormGrab Control Panel

To add a form, we do not build it in the Control Panel. Instead, we create the form in a template.

Create a form

Add the form code to a template:

{exp:formgrab:form
    name="contact_form"
    title="Contact Form"
}

    <div class="form-group">
        <label for="name">Name</label>
        <input name="name" type="text" class="form-control" id="name" placeholder="Your name">
    </div>
    <div class="form-group">
        <label for="email">Email address</label>
        <input name="email" type="email" class="form-control" id="email" placeholder="Your email address">
    </div>
    <div class="form-group">
        <label for="message">Message</label>
        <textarea name="message" class="form-control" id="message" rows="3"></textarea>
    </div>
<button type="submit" class="btn btn-primary">Submit</button>

{/exp:formgrab:form}
A simple, bootstrap css contact form

Notice that instead of wrapping the form in <form>...</form> tags we replace them with the {exp:formgrab:form} tag.

The {exp:formgrab:form} tag has a single mandatory parameter called name which defines the name of the form in FormGrab. The title parameter allows you to give the form a ‘friendlier’ name but is optional.

Now go to the template containing the form on your site and submit some details:

Submit the contact form

Submit the contact form

When you click on Submit the data will automatically be sent to the FormGrab module.

Back to the FormGrab Control Panel

If we return to the FormGrab Control Panel page, we can see that the data we have just submitted has been saved:

FormGrab Control Panel

FormGrab Control Panel

The new form that we have created will now appear in the left hand list with the number of new submissions.

The right hand list will show all of the submissions for the selected form.

Submissions can be filtered by date and status, and read, deleted and exported as CSV files.

Configure the form

If we click on the Edit button next the form name in the left hand list, we can edit some of the form’s details.

Configure the form

Configure the form

These include:

  • the form’s name and title
  • the form’s return url so that we can redirect the user’s to a friendlier ‘thank you’ page
  • whether the data should be saved to the add-on’s database
  • whether to send an email notification. Selected this will give you the option to set the email details (ie, where to send it, the sender details, the subject and body)

Links

Additional FormGrab documentation