Integrating “Forminator pro” forms with aNinja using Javascript code

Integrating “Forminator pro” forms with aNinja allows you to push leads data to aNinja with every form submission.

In this article we’re using a Javascript code for the integration.

Integrating Forminator pro with aNinja

To add a custom JavaScript field to your Forminator pro form, follow these steps:

  • Log in to your WordPress site
  • And navigate to the Forminator Pro plugin.
  • In the Forminator Pro dashboard, select the form that you want to integrate with aNinja.
  • Then, in the form builder, click on the “Custom HTML/JS” field to add it to your form.
  • Once the field is added, click on the “Edit HTML” button to open the HTML editor.
  • And add your JavaScript code in the editor.

Here’s an example – you want to map the form fields to aNinja fileds (see fields mapping section below)

<script>

$ = jQuery;

$(document).ready(function() {

$(‘body’).on(‘submit’, ‘#forminator-module-5704‘, function (e) {

       var contact_name = $(“input[name=’name-1′]”).val();

       var contact_email1 = $(“input[name=’email-1′]”).val();

       var contact_phone1 = $(“input[name=’phone-1′]”).val();

       var time_to_contact = $(“select[name=’select-1′]”).val();

       var method_to_contact = $(“select[name=’select-2′]”).val();

       var comments = $(“input[name=’textarea-1′], textarea”).val();

       $.ajax({

            type: ‘post’,

            url: “https://aninja.com/api/v1/contactform/?apikey=YOURAPIKEY“,

            data: {

                ‘contact_name’: contact_name,

                ‘contact_phone1’: contact_phone1,

                ‘contact_email1’: contact_email1,

                ‘custom_comments’: comments,

                ‘custom_best_method_to_contact’: method_to_contact,

                ‘custom_best_time_to_contact’: time_to_contact,

            },

            success: function (data) {

                //alert(‘success’);

                console.log(‘Lead succesfully injected to aninja’);

            }

        });

});

});

</script>

  • Lastly, click “Save” to save your changes.

Fields mapping

Map the data on the aNinja fields and Form fields.

These are the default aNinja fields:

For the Custom Fields, just prefix the field name with “Custom.” e.g. Custom.Source

Where does the data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that was pushed from the form.

  • Lead’s contacts appear in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

WPForms integration with aNinja

With WPForms integration, you can push forms responses to your aNinja account using webhooks, as soon as someone submits a new form on your website.

Webhooks allows you to automatically send information from your form to aNinja.

WPForms integration with aNinja

To configure webhook integration settings within the WPForms plugin, follow these steps:

Installing the Webhooks Addon
Setting Up a Webhook
  • Create a new form or edit an existing form in the WPForms form builder.
  • Click on the “Settings” tab at the top of the form builder.
  • Under Webhooks, toggle the Enable webhooks option on.

Enabling webhooks for a form

  • Click on the pencil to give a name to your webhook
  • Then fill out the settings for this connection:
  • Under “Request URL”, enter the below aNinja webhook URL:

https://aninja.com/api/v1/contactform/?apikey=YOUR_API_KEY 

  • Under “RequestMethod” enter “POST”

The webhooks settings in the form builder

  • Under “Request Body” define the keys and values that will be sent in the body of your webhook’s request.:

    • aNinja fields in the parameter box

    • Form fields from the dropdown.

Check the fields mapping section below to map to the correct aNinja fields.

  • Once you have added all the fields you want to include, click “Save” at the bottom of the “Webhooks” panel to save your changes.
  • Go ahead and test the form on your website. The submissions will be pushed to your aNinja account with the lead data captured in the form.

Fields mapping

Map the data on the aNinja fields and Form fields.

These are the default aNinja fields:

For the Custom Fields, just prefix the field name with “Custom.

Where does the data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that you have imported.

  • Lead’s contacts appear in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Godaddy API Form integration

With the simple Javascript code, you can forward your web form leads into your aNinja account. In this article, we show you how the Godaddy API Form integration can be done.

Godaddy API Form integration

The following example is specific to GodDaddy websites.

  • First, log in to your GoDaddy account
  • Then, go to the Product page.
  • Scroll down to Websites + Marketing
  • And, select Manage next to your website to open your site.
  • Select Edit Website or Edit Site to open your website builder.
  • Then, select the form page.
  • Here, you want to search for the HTML section and select Add.
  • Click Embed custom code on the page.

User-added image

  • Click inside the new section to open up the HTML editor.

User-added image

  • Here, in the “Custom Code” box, paste the Javascript code in the following example.
    • You want to replace the fields names used in the example with your form fields names.
    • Also, check the fields mapping table section to map your form fields to aNinja’s.

Example:

<script src = “https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script>
$(document).ready(function () {

window.parent.submitted = false;
$(window.parent.document).on(‘submit’, ‘[data-aid=”CONTACT_FORM_CONTAINER_REND“] form’, function (e) {
// Avoid mutliple submissions during 5 seconds period to avoid duplicates
if (window.parent.submitted) {
return;
}
window.parent.submitted = true;
setTimeout(() => {
window.parent.submitted = false;
}, ‘5000’);

let contact_name = ”;
if ($(‘input[data-aid=”CONTACT_FORM_NAME“]’, window.parent.document)) {
contact_name = $(‘input[data-aid=”CONTACT_FORM_NAME“]’, window.parent.document).val();
}
let contact_email1 = ”;
if ($(‘input[data-aid=”CONTACT_FORM_EMAIL“]’, window.parent.document)) {
contact_email1 = $(‘input[data-aid=”CONTACT_FORM_EMAIL“]’, window.parent.document).val();
}
let contact_phone1 = ”;
if ($(‘input[data-aid=”CONTACT_FORM_PHONE“]’, window.parent.document)) {
contact_phone1 = $(‘input[data-aid=”CONTACT_FORM_PHONE“]’, window.parent.document).val();
}
let address_street1 = ”;
if ($(‘input[data-aid=”Address (Street, City, Zip Code)”]’, window.parent.document)) {
address_street1 = $(‘input[data-aid=”Address (Street, City, Zip Code)”]’, window.parent.document).val();
}
let custom_message = ”;
if ($(‘textarea[data-aid=”CONTACT_FORM_MESSAGE“]’, window.parent.document)) {
custom_message = $(‘textarea[data-aid=”CONTACT_FORM_MESSAGE“]’, window.parent.document).val();
}

// Ajax call
$.ajax({
type: ‘POST’,
url: “https://aninja.com/api/v1/contactform/?apikey=<YOUR_APIKEY>“,
data: $.param({contact_name : contact_name}) + “&”+ $.param({contact_email1 : contact_email1}) + “&”+ $.param({contact_phone1 : contact_phone1}) + “&”+ $.param({address_street1 : address_street1})+ “&”+ $.param({custom_message : custom_message}),
success: function (data) {
alert(‘success’);
}
});
});
});
</script>

Fields mapping Table

The following are standard fields you can map to, in addition to any custom fields created in your application that you can see under Settings > Custom fields.

For the Custom fields:

Where does the imported data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that you have imported.

  • Lead’s contacts appear in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Need help with Godaddy API Form integration? Leave us an email at support@aninja.com. And we will happily assist you.

Saving bulk import mappings

You can save bulk import mappings and reload the mapping when you want to import a similar file.

Saving then reusing the bulk import mapping is useful if you regularly do bulk imports into aNinja and have many fields to map.

First let’s start by listing the steps to follow for a successful bulk import of data.

How to do a Bulk Import of data

Here are the steps to follow for a successful bulk import:

1- Sanitizing the contacts file before the Import

You want to sanitize your contacts file and make sure the data is properly formatted and structured to avoid errors when importing it.

2- Bulk Import using a CSV or Excel file

Importing the file is like storing the data which allows for easy querying and manipulation of the data.

3- Mapping leads data to aNinja

The correct mapping allows the data to be stored in the right places and easily retrieved when needed.

Saving the fields mappings

Save bulk import mappings to skip manually mapping the fields each time you have a file with similar format to import.

Before uploading a file, you can save your mapped fields and reuse them later for automatic mapping.

All you have to do is give your mapping a name and click on Save mapping.

Saving bulk import mappings

Note!

Make sure that the contact names are not empty in the file, as it is the only required field for the import.

Don’t forget to click on upload to complete the import of data.

Loading a saved mapping

The file you’re trying to upload must have the same headers as the saved mapping and are listed in the same order.

Click on the mapping name from the load mapping drop down.

The system automatically does the mapping.

If it was successful, it displays this message:

Go ahead and click Upload to complete the import of the fields.

If the mapping failed, you receive this alert:

This means that the file you’re trying to upload doesn’t have the same number or order of headers as the saved mapping.

Here, you can:

  • Either, choose another mapping if you’ve already saved that format
  • Or, you want to do the mapping manually and save it for future use.

 

 

Mapping fields for a successful data import

It’s important to understand the data types for successful fields mapping during the import of data.

Whether you’re importing your contacts in a CSV file, or through API (Forms, Ad campaigns, etc…); saving your data in the right place allows you to easily manipulate it and create Smartlists, search for leads, and launch automation.

Data Types

Mapping fields for a successful data import:

aNinja has both Standard fields which are the built-in default fields and Custom fields, which you customize to your needs.

All the imported data is located in the Lead view.

Standard Fields

aNinja standard fields are found under the categories: Lead’s Contacts, Company, and Address.

The Contact name is the only required field and it’s essential to complete the import.

Custom Fields

Prefix your field’s name with “Custom.” so it is saved as a custom field on the lead page.

When importing leads in bulk in a CSV file to aNinja, if you can’t see the fields you need, you can create them manually upon import.

Or, before the bulk import, go to Settings > Custom FieldsWhen doing a bulk import, aNinja anticipates which Custom fields you might want to create and marks them as ‘New’. Mapping to a field marked ‘New’ automatically creates a new Custom Field within aNinja.

Types of Custom Fields

When you create a custom field in Settings > Custom fields, you can designate its type:

Text – For text input
Link – For fields with any link/URL
Date – Date in YYYY-MM-DD format
Dropdown – Fields with multiple options dropdown

Then, you can use it on the lead page and assign it a value to be able to group/search for specific leads when needed.

Where does the imported data appear

After the import, you can search your aNinja CRM for the imported leads. You can also search for any custom field and any other info that you have imported.

In the lead view, the left side is where the lead’s data appears:

 

Standalone / Curl Applications Integration

With Standalone / Curl Applications Integration you can forward leads into your aNinja account simply using a programming code or an API. In this article, we show you how the Standalone / Curl Applications Integration can be done.

Standalone / Curl Applications

The following example is in PHP, but can be repurposed to your language of choice (Python, Ruby, Java, etc..)

Sample PHP API push

/**
* Basic snippet for posting with command line curl
*/
$apikey = '123456';

function doCurl($apikey = null, $data = []) {
$data = http_build_query($data);

$api_base = 'https://aninja.com/api/v1';

$api_endpoint= '/contactform/?apikey='.$apikey.'';

$cmd = 'curl -sL --data ''.$data.'' "'.$api_base.'/'.$api_endpoint.'"';

Fields mapping Table

The following are standard fields you can map to, in addition to any custom fields created in your application that you can see under Settings > Custom fields.

Where does the imported data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that you have imported.

  • Lead’s contacts appear in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Need help with teh Integration? Leave us an email at support@aninja.com. And we will happily assist you.

Javascript API Integration

With Javascript API Integration you can forward leads into your aNinja account simply using a programming code or an API. In this article, we show you how Javascript API Integration can be done.

Javascript applications

The following example is of an API request in Javascript. You can customize off of the following examples to suit your actual code/use case.

Example use cases: Squarespace, Shopify

ajax({
type: 'POST',
url: "https://aninja.com/api/v1/contactform/?apikey=YOUR_API_KEY_HERE",
data:$.param({contact_name : contact_name}) + "&"+ $.param({contact_email1 : contact_email1}) + "&"+ $.param({contact_phone1 : contact_phone1})+ "&"+ $.param({company_name : company_name}),
success: function (data) {
alert('success');
}
});

Fields mapping Table

The following are standard fields you can map to, in addition to any custom fields created in your application that you can see under Settings > Custom fields.

Where does the imported data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that you have imported.

  • Lead’s contacts appear in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Need help with Javascript API Integration? Leave us an email at support@aninja.com. And we will happily assist you.

Webflow Integration using Zapier

Webflow integration can be done either through Zapier or through webhook. In this article, we’re going to show you the Webflow integration using Zapier.

Find your aNinja embed code before you get started. It is the form integration endpoint from aNinja. This is different for each form.

Sending Webflow form submissions to aNinja through Zapier

  • Log in to your Zapier account
  • Click on Make a Zap
  • ‍Choose Webflow as your Trigger App event
  • Connect the Webflow account. Make sure you are logged in to Webflow on the same browser.
  • Select Form Submission as Webflow trigger
  • Choose your Webflow Account
  • Set up Webflow Form Submission by selecting the site you want to receive notifications from and the Form Name
  • Test Trigger
  • For Action, choose Webhook.
  • For Event, select POST
  • Set up action
  • URL: Copy here the aNinja Form Embed code.Webflow Integration using Zapier
  • Payload Type: form

Mapping Fields

Map the Data on the aNinja fields and Form fields

These are the default aNinja fields:

Testing the Integration

  • Click Fetch & Continue to test the Webflow connection. Make sure you have at least one recent form submission created or submit a new form submission on your website before testing the connection. If there’s an issue with the connection troubleshoot your Webflow connection with Zapier (see below).
  • Check aNinja if the test lead got through.
  • Rename the Zap.
  • Publish Zap

Where does the imported data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field and any other info that is collected from the forms. All the data appear in the Lead View.

  • Lead’s contact (Name, address, email, phone, and email) appears in the leads contact section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Need help with the Webflow Integration using Zapier? Leave us an email at support@aninja.com. We’re more than happy to assist you.

Webflow Webhook Integration

Webflow integration can be done either through Zapier or through webhook. In this article we’re going to show you the Webflow through webhook

What’s a Webhook

A webhook is a lightweight API that powers one-way data sharing, triggered by events. And it delivers data to other applications as it happens, meaning you get data immediately. All you have to do is give the webhook provider (e.g.Webflow) a URL to deliver requests to (e.g. aNinja’s URL).

So, with Webflow Webhook Integration you can forward leads into your aNinja account simply by setting up a Webhook for your form submission. Find your aNinja API key before getting started.

Setting up a webhook in Webflow

  • First, log in to your Webflow account.
  • Then, go to your Webflow Project Settings.Webflow Webhook Integration
  • Choose Integrations.Webflow Webhook Integration
  • Click + Add webhook (at the bottom)
  • Here, you need to find your aNinja API key
  • Lastly, set the webhook on “Form submissions” and use the endpoint URL:

https://leads.aninja.com/handlers/webflow/redirect.php?apikey=YOUR_ANINJA_API_KEY <– replace with your aNinja API key.

Fields mapping

Map the Data on the aNinja fields and Form fields

These are the default aNinja fields:

Where does the imported data appear

After the integration, you can search your aNinja CRM for the imported leads. The name and email appear in the lead’s contact section in the lead view. Need help with Webflow Webhook Integration? Leave us an email at support@aninja.com. And we will happily assist you.

Mapping fields for Leads Bulk Import

aNinja offers different ways to create leads in your account. Importing leads in a CSV file is one of them.

Before the import, you want to sanitize the contacts file to ensure proper mapping.

The correct mapping of leads’ data to aNinja fields saves your data in the right place which makes searching for it easy.

You can also save bulk import mappings and reload it when you have a similar file to import (same order and number of headers).

Mapping leads data to aNinja fields

  • For the bulk import, go to Settings > Bulk Import
  • Select the contact’s file.
    • If in your CSV file there are records with no contact names, you receive an alert so you go back to the file and add the names. Then try to upload it again.
  • Now, map the data to aNinja fields:

  • The contact name is the only required field.
    • You can either map it to one field or join 2 fields in case the first name and last name are saved in 2 separate columns in your CSV file.
  • It’s important to map the data in your contacts file with the correct aNinja fields to be able to find them in the right place in the lead view.

You can even create custom fields if they’re not already there.

Standard fields
  • Contact_name: is a required field and it’s essential to complete the import.
  • Primary contact’s email: contact_email1. You can also add a second email (contact_email2).
  • Primary contact’s phone: contact_phone1.You can also add a second phone number (contact_phone2).
    • Here we recommend choosing the mobile number to be the primary contact phone as the system grabs the primary phone number to be used when texting.

Custom fields

You can create custom fields immediately when doing the mapping if they were not listed among the fields. Just prefix the field with “Custom.” e.g. Custom.Source

Saving field mappings

It’s optional. You can save the fields mapping and reload it when you have a similar file to import (same order and number of headers).

It’s useful if you regularly do bulk imports into aNinja and have many fields to map.

Don’t forget to click Upload to import the data.

Where does the imported data appear

After the import, you can search your aNinja CRM for the imported leads: Lead Contacts, Custom fields, and Addresses. Type your search on the top navigation bar.

  • Lead’s contacts appear under Contacts in the lead view.
  • Opportunities also appear in the opportunity section in the lead view.
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear under Custom fields in the lead view.

Have any specific questions on the best ways to import your data? Please, email our Support team at support@aninja.com.