Connecting WPForms

Integrate WPForms for Wordpress websites with Lead Gen & CRM

Important Information Regarding Native Form Scripts

The Native Form script that Lead Gen & CRM provides should not be placed on your page. It is only used to complete the procedures in this document.

The provided script is only used for reference, and it should not be on the page when connecting WPForms via this method. The modified Wordpress .PHP code replaces what Lead Gen & CRM's Native Form script would normally do. If both are present, your form will not function as intended.
 

Before You Connect

The procedures in this article assume that you have done the following:

• Have the paid versions of WPForms, as the free version is not compatible
• Installed WPForms on Wordpress
• Added a WPForm to at least one Wordpress page
• Inserted site tracking code on each Wordpress page you want to track

Creating Native Forms

Before you can connect WPForms to Lead Gen & CRM, you need to create a native form. To create native forms, do the following:
 

1. Click Forms in the left toolbar.
2. Click Create Form.
   
   
    
3. Enter a name for the form.
4. Click the Native Form radio button.
5. Click the appropriate radio button to determine how contacts who fill out the form should be assigned.
6. Optionally, click the Allow a lead or contact record to be created even if an email address is not submitted checkbox.
   Note: You can choose to allow a lead or contact record to be created even if an email address is not submitted. Checking this option will allow duplicate records to be created, since email address is the unique identifier in Lead Gen & CRM.
7. Click Continue.
   
   

The created native form will open a page with an embed code. Keep this embed code window open. You will need the embed code later.

Example Native Form Code

The following is an example of native form embed code. Be aware that your code and its individual values will be different from the following example code:

<script type="text/javascript">

    var __ss_noform = __ss_noform || [];

    __ss_noform.push(['baseURI', 'https://app-3QN7QJRNDE.marketingautomation.services/webforms/receivePostback/MzawMDE1tTA2BQA/']);

    __ss_noform.push(['endpoint', 'ea960f18-cd20-4c6c-acab-4e6b6a959260']);

</script>

<script type="text/javascript" src="https://koi-3QN7QJRNDE.marketingautomation.services/client/noform.js?ver=1.24" ></script>

Adding baseURI Embed Code to WPForms

Once you have created a native form in Lead Gen & CRM, you can begin connecting WPForms.

The connection process requires that you add both baseURI and endpoint information in connected forms.

This information comes from the embed code generated by the created native form in Lead Gen & CRM.

To add baseURI information to WPForms, do the following:

1. Open another new tab in your browser.
2. Log in to WPForms in that browser tab.
3. Create or edit a WPForm.
4. Create a hidden field.
   Note: For best results, make these hidden fields the first fields on your form.
5. Click the hidden field.
6. Click General.
7. Change the Field Label value to base uri.
   Note: The base uri Field Label value is case-sensitive.
8. Copy the URL in the baseURI line in the embed code in the Lead Gen & CRM embed code browser tab.
   Note: When copying the baseURI string, do not include the single quotation marks.
9. Paste the copied baseURI URL in the Default Value text field in the WPForms browser tab.

Be aware that endpoint information is still needed to complete the connection process.

Example code used:

Adding Endpoint Embed Code to WPForms

Once you’ve added baseURI information to WPForms, you’ll need to add endpoint information. 

This information comes from the embed code generated by the created native form in Lead Gen & CRM.

To add endpoint information to WPForms, do the following:

1. Create another hidden field in the modified WPForm.
   Note: For best results, make these hidden fields the first fields on your form.
2. Click the hidden field.
3. Click General.
4. Change the Field Label value to endpoint.
   Note: The endpoint Field Label value is case-sensitive.
5. Copy the alphanumeric string of numbers and dashes in the endpoint line in the embed code in the Lead Gen & CRM embed code browser tab.
   Note: When copying the endpoint string, do not include the single quotation marks.
6. Paste the copied endpoint string in the Default Value text field in the WPForms browser tab.
7. Update the modified WPForm.

Example code used:

Adding the WordPress connection to WPForms

Once you’ve added baseURI and endpoint information to WPForms, you’ll need to enable Wordpress to capture it, which requires some additional code.
The simplest way to do this is by uploading the plugin file found here. Note that this is offered as a way to add the code to WordPress, and the other steps are necessary, aside from copying the PHP code. If there is any issue with using this plugin on your setup, your developer will need to explore adding the PHP code below manually.

1. Download the plugin zip file attached to this article at the bottom.
2. In WordPress go to Plugins, and choose to upload a plugin
3. Upload the zip file.
4. View your Plugins in WordPress and enable this plugin

If this gives you issues, or you prefer to add the code in your own way, please see the steps below. By using either the plugin or a child theme, it will prevent the code from being removed if your theme updates its functions.php file.

Adding .PHP Code to WPForms

Once you have added baseURI and endpoint information to WPForms, you will need to add .PHP code to Wordpress.

There are certain things to consider when adding .PHP code to Wordpress, however:

• You need to add .PHP code only once. If you add this code for each form, it would cause any number of issues. In addition, the main advantages of adding code to Wordpress are that you need only add the code once without editing it and do not modify the .PHP code otherwise. As such, when adding additional forms, you will only need to make a new native form in Lead Gen & CRM and add the two hidden fields to your WPForm.
   
• You should add the .PHP code to a Wordpress child theme, if at all possible. Modifying code works best with a Wordpress child theme. Modifying a child theme allows you to modify Wordpress without breaking its functionality. 

To modify Wordpress .PHP code, do the following:

Important: Changes to the functions.php file in Wordpress can result in your site crashing. Be sure you have FTP access in order to backup and revert to your old functions.php file if needed.

1. Open another new tab in your browser.
2. Log in to Wordpress in that browser tab.
3. Click Editor, located under Appearance in the left menu.
4. Click the functions.php file in the right menu.
5. Copy-and-paste the following block of code at the bottom of the functions.php file:

function wpf_dev_process_complete( $fields, $entry, $form_data, $entry_id ) {

    $body = [];
    $submitToSharpSpring = false;

    $entry = wpforms()->entry->get( $entry_id );
    $new_json = str_replace("\\n", "\\" . "\\n", "$entry->fields");
    $entry_fields = json_decode( $new_json, true );

    function dupeCheck($fieldName, $bodyData) {
        $cleanLabel = substr(preg_replace("/[^a-zA-Z0-9]+/", "", $fieldName), 0, 24);
        for ($x = 0; $x <= 20; $x++) {
        if(array_key_exists($cleanLabel, $bodyData)) {
            $cleanLabel = $cleanLabel . $x;
        } else { break; }
        } 
        return $cleanLabel;
 }

    foreach($entry_fields as $formField):

        $fieldName = $formField["name"];

        // handle checkboxes
        if ($formField["type"] == "checkbox") {
           $body[dupeCheck($fieldName, $body)] = str_replace("\\n", ",", $formField["value"]);

        // Handle WP Forms Fancy name field
        } elseif ($formField["type"] == "name") {
           $body[dupeCheck(($fieldName . "FieldFirstName"), $body)] = $formField["first"];
           $body[dupeCheck(($fieldName . "FieldMiddleName"), $body)] = $formField["middle"];
           $body[dupeCheck(($fieldName . "FieldLastName"), $body)] = $formField["last"];

        // Handle WP Forms Fancy address field
        } elseif ($formField["type"] == "address") {
           $body[dupeCheck(($fieldName . "FieldAddress1"), $body)] = $formField["address1"];
           $body[dupeCheck(($fieldName . "FieldAddress2"), $body)] = $formField["address2"];
           $body[dupeCheck(($fieldName . "FieldCity"), $body)] = $formField["city"];
           $body[dupeCheck(($fieldName . "FieldState"), $body)] = $formField["state"];
           $body[dupeCheck(($fieldName . "FieldPostalCode"), $body)] = $formField["postal"];
           $body[dupeCheck(($fieldName . "FieldCountry"), $body)] = $formField["country"];

        // Convert Date/Time data to SharpSpring format
        } elseif ($formField["type"] == "date-time") {
            if ($formField["time"] != "") {
                $body[dupeCheck($fieldName, $body)] = str_replace(array("T", "Z"), array(" ", ""), gmdate("Y-m-d\TH:i:s\Z", $formField["unix"]));
            } else {
                $body[dupeCheck($fieldName, $body)] = str_replace(array("T", "Z"), array(" ", ""), gmdate("Y-m-d", $formField["unix"]));
            }    

        // Capture endpoint data and handle other hidden fields
        } elseif ($formField["type"] == "hidden") {
            if ( $fieldName == "base uri" ) {
                $base_uri = $formField["value"];
            } else if ( $fieldName == "endpoint") {
                $endpoint = $formField["value"];
                $submitToSharpSpring = true;
            } else {
                $body[dupeCheck($fieldName, $body)] = $formField["value"];

            } 

        } else {
            $body[dupeCheck($fieldName, $body)] = $formField["value"];
        }        

    endforeach;

    $body["trackingid__sb"] = $_COOKIE["__ss_tk"]; //DO NOT CHANGE THIS LINE... it collects the tracking cookie to establish tracking
    if ($submitToSharpSpring) {
        $post_url = $base_uri . $endpoint;

        $request = new WP_Http();
        $response = $request->post( $post_url, array( "body" => $body ) );
    }
}
add_action( 'wpforms_process_complete', 'wpf_dev_process_complete', 10, 4 );

6. Click Save.
7. Update the form in the WPForms browser tab.
8. Fill out the form.
9. Submit the form once.

Mapping Native Forms

Once you have created a native form, added native form embed code, and modified Wordpress' functions.php file, you can map the fields in the native form. Mapping form fields provides Lead Gen & CRM with information on what those form fields refer to. To map native forms, do the following:

1. Click Refresh this Page in the Lead Gen & CRM embed code browser tab.
2. Click a field drop-down menu in the Field Mappings page that appears.
3. Select the option that most closely matches the field.
4. Repeat as necessary for every form field.
5. Click Save Mappings.

Whenever you fill out the form for the first time, you generate mapping data. As such, do not expect the lead to appear in the system until after the first entry. The second person to fill out the form will be imported as a lead.
 

Special Considerations for WPForms

When mapping fields and connecting WPForms, consider the following:

• Certain fields will not work. File Upload fields will not work with native forms, including WPForms.
   
• You may see some fields that are not on your form. For example, if you are using WPForms’ default Name field, your form may only show the First Name and Last Name fields. However, this field has options to include other fields, such as Suffix or Middle Name. Skip mapping those fields if they are not on your form. This applies to any of WPForms’ fields that contain multiple fields within themselves. Lead Gen & CRM only collects what is mapped.
   
• Your field names will appear the same as in WPForms, but any non-alphanumeric characters will be removed. For example, if your WPForm field is What is your favorite color?, the mapping screen will show Whatisyourfavoritecolor. This only appears on the mapping screen. Once mapping is saved, this will not be seen elsewhere.
   
• Changing native form or WPForm information will require remapping. For example, if you change the label on a field of your WPForm after mapping, you will need to reset the mapping and remap the form using the new field name.
   
• If multiple fields on your form have the same label, all subsequent copies after the first will have a number following the field name. For example, the second copy will have 0 following the field name, followed by 1 on the third, and so on. This can include hidden fields, and this ensures that your data comes through if there is a hidden field with the same name.
   
• Field names will show only the first 24 characters when mapping. This helps to prevent issues with WPForms fields that have lengthy names. 
   
• Fields on your form must have labels to be collected by Lead Gen & CRM. If you do not want fields to have visible labels, mark field labels as hidden within WPForms.

Download the Plugin
 

Questions?