Embeddable Lead Capture Form

Kathryn H.
Kathryn H.
  • Updated

Overview: What are we talking about?

The embeddable lead capture form allows you to embed a custom form on your website. The data will feed back into Gingr's Lead Report, which will allow you to perform various actions on form submissions.

 

This article includes:

Helpful Hints: Before you begin

  • Lead Forms are used to collect virtual information from new and existing clients. With lead forms, you can funnel in questions from existing clients into one report as well as create lead forms for specific events to track potential new clients. 

  • With the lead form, you can collect as little or as much information as needed from the client to complete their inquiry by adding and removing the required fields. 

  • Customers who submit a lead form that do not yet have active pets WILL NOT show up in the main search bar. However, they can be searched for from Owners & Pets » View All Owners

  • You can configure user groups to receive a notification when customers submit new lead forms. Navigate to Left-hand Navigation: Reports & More » Groups and turn on the Notification: New Lead Received permission.
    • This permission can be local to only the location where the form was submitted or can be global, meaning a notification will display at all locations when a customer submits a form. 
    • For more information see our article on App Notifications. 

  • If you would like customers to not be able to use the "Contact Us" part of the Customer Portal, you can delete your Lead Form. However, please note that you will lose access to archived form submissions on the Leads Report. If you need to re-add the form simply create a new one and ensure the type is "Lead" and the name is "Lead Form". As an alternative to deleting, you could set all fields in your form to business only by selecting "Only Employees" under "Who Can See/Edit This Field?" and optionally adding contact info in select fields visible to customers. 

 

How to: Create or Edit a Lead Form 

  1. In Gingr, navigate to Admin » Customer Portal » Lead Forms.

  2. To create a new lead capture form, click the blue +Create Lead Form button on the upper-right side of the page. 

    • Form Type: Leads

    • Label: This will be the name of the form within Gingr and is not visible to customers.

    • Name: This field will populate automatically based on what's entered in the "Label" field. The name field is used internally in the database and must be unique in your system.

    • Description: This will help explain to other Gingr users what this form is used for.

  3. Click the blue Create! button to create the new Lead Form.

  4. To edit an existing Lead Form, click the black/white pencil icon by the record.

  5. For more information on adding/editing fields on your form, click here.

How to: Embed Lead Forms on your Website

We've included videos below on how to embed the lead capture form on WordPress and SquareSpace websites. While the steps will vary a bit between Content Management Systems (CMS), here are some more generalized instructions.

  1. In Gingr, navigate to Admin » Customer Portal » Lead Forms.

  2. Locate the Lead Form you wish to embed on your website and click the arrow icon next to its name to retrieve the necessary code for your website.mceclip0.png

  3. You'll need to add Gingr's embeddable code to your website. You'll want to add this to the <head> section of your website. Many CMS' call this "Code Injection" or "Custom Header Code". Locate where to embed header code on your website and paste the following code between <head> and </head>. 
    1. <script type="text/javascript" src="https://storage.googleapis.com/gingr-embeddable/assets/js/bundle.js"></script>

  4. Next, you'll want to paste another bit of code exactly where you would like your lead capture form to be displayed. You'll be pasting in HTML, or Source Code into your website. Be sure to not paste this directly into a rich-text editor or text block.

    1. This code portion is specific to which form you are trying to embed. Your Gingr application will provide the necessary code in the Generate Embed Script window.

  5. Now, save your changes. The Lead Form is now embedded where you pasted the code in step #2. See below for some example videos.

How to Embed on WordPress

 

How To Embed on SquareSpace



How to: Receive an In-App Notification When a Lead Form is Submitted

To receive an in-app notification, you must have the permission "Notification: New Lead Received" checked for your user group. Navigate to Left-hand Navigation: Reports & More » Groups and select the groups you would like to receive the notification. 

For more information see our article on App Notifications. 

 

How to: Receive an Email When a Lead Form is Submitted

To receive an email when this form is submitted:

  1. Navigate to Admin » Customer Portal » Lead Forms.

  2. Click on the name of the Lead Form to open the form for editing.

  3. From the Toolbox on the right, select Hidden Input.
    • The field will be added to the bottom of the form.

  4. Edit the Hidden Input field showing as Placeholder Label. mceclip0.png

  5. Display Label: Clear this field out, leaving it blank.

  6. Field Name: gingr_send_emails_to

  7. Default Value: Enter an email address.
    • Separate multiple email addresses with a comma.

  8. Click Save when finished to save the changes to the field.

  9. On the bottom of the Lead Form, click Save to save the changes to the Lead Form.Screen_Shot_2018-09-30_at_2.39.12_PM.png

 

How to Control Which Locations Receive Notifications for Leads

If you would like for only certain locations to receive an in-app notification when a lead form is submitted, you'll want to:

  • Add a Location Field Type to your Lead Form
  • Optionally, choose a Default Value for the Location field.

 

How to: Configure Advanced Settings

It's possible to add the code anywhere in your HTML document and provide a target to add the lead form to. This way, you don't have to paste the code exactly where you want the form displayed on the page. Here's an example HTML document that contains examples of explicit targeting: https://storage.googleapis.com/gingr-embeddable/index.html

<script>
 window.GingrForms.createForm({
     form_name: 'lead_form', 
     subdomain: '{YOUR_GINGR_SUBDOMAIN}',
     target: "div#exampleTargetContainer",
 })
</script>

As you can see, we've added a "target" property to the options object which contains a CSS selector to a DOM element, in this example a div with ID exampleTargetContainer.

It's also possible to add a form submission callback. This callback allows you to run custom JavaScript code after a form has been submitted successfully. This can be especially useful for advertising conversion tracking.

<script>
 window.GingrForms.createForm({
     submit_callback: function() { 
         alert('Form submission completed successfully!') 
     }, 
     form_name: 'lead_form', 
     subdomain: '{YOUR_GINGR_SUBDOMAIN}',
     target: "#exampleTargetContainer",
 })
</script>

As you can see, we've added a "submit_callback" property to the options object which ontains an anonymous function that alert() the user that the form was submitted successfully. You can replace "alert('Form submission completed successfully!')" with your desired code.

Was this article helpful?

0 out of 1 found this helpful

Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.