Articles in this section

See more

Connecting WPForms

Avatar
Alex Flinchum
  • Updated
Follow

WPForms is an advanced form builder for Wordpress websites and can be placed into the Wordpress functions.php file.

These forms can integrate with Lead Gen & CRM forms.

This article will detail how to connect WPForms to Lead Gen & CRM.

Article Contents

Available With:
Trial ✓  
Essential ✓  
Advanced ✓  
Ultimate ✓  
Toolbar:
FormsForms
Users:
Administrators ✓  
Company Managers    
Marketing Managers    
Sales Managers    
Salespersons    
Jr. Salespersons    


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.

    Create new 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.

    Add new native form

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.
  5. Click the hidden field.
  6. Click General.
  7. Change the Field Label value to base uri.
  8. Copy the URL in the baseURI line in the embed code in the Lead Gen & CRM embed code browser tab.
  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.

   Click to enlarge.
Example code used.
 
Note: The base uri Field Label value is case-sensitive.
 
Note: When copying the baseURI string, do not include the single quotation marks.
 
Note: For best results, make these hidden fields the first fields on your form. 
   


Adding Endpoint Embed Code to WPForms

Once you have added baseURI information to WPForms, you will 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.
  2. Click the hidden field.
  3. Click General.
  4. Change the Field Label value to endpoint.
  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.
  6. Paste the copied endpoint string in the Default Value text field in the WPForms browser tab.
  7. Update the modified WPForm.
  


Click to enlarge.
Example code used.
 
Note: The endpoint Field Label value is case-sensitive.
 
Note: When copying the endpoint string, do not include the single quotation marks.
 
Note: For best results, make these hidden fields the first fields on your form. 
 


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:

  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:
  
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.
 
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 );
  1. Click Save.
  2. Update the form in the WPForms browser tab.
  3. Fill out the form.
  4. 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.
   MapForm-cropped.gif Click to enlarge.

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 in order to be collected by Lead Gen & CRM. If you do not want fields to have visible labels, mark field labels as hidden within WPForms.

Related articles

×

Why was this help article not helpful?

Still didn't find what you are looking for?