WordPress Elementor Contact Forms Leads Integration

If you using Elementor Contact Forms on your WordPress website for your Travel Business and want to bring the contact form submission leads automatically inside your Sembark Travel CRM software, this guide is for you.

Requirements

Before you proceed, please check if your meet the following requirements.

1. Sembark Travel CRM Account.
2. WordPress website with Elementor Forms
3. Access Token generated from Sembark Travel CRM.

Once you have the above requirements completed, you can proceed.

Send Form Submissions

Now, lets send the data from your Contact Form submissions to Sembark API.

1. Attach Elementor Hook

Please put the following code snippet inside a functions.php file located inside your themes folder. Please ensure the your already have Elementor Contact Forms Requirements on your website, otherwise this will not work.

<?php
# https://developers.elementor.com/docs/hooks/forms/
function send_elementor_form_data_to_api($form_data) {

  /**
  * TODO 1: Get this token from the Sembark CRM Admin account
  */
  $access_token = "<<<ACCESS_TOKEN_HERE>>>";

  $form_name = $record->get_form_settings('form_name');

  // Replace MY_FORM_NAME with the name you gave your form
  // if ( 'MY_FORM_NAME' !== $form_name ) {
  //   return;
  // }

  /**
  * TODO 2: Update this mapping to set the payload for Sembark API
  */
  // On the right side, you have your form data
  // On the left side, you have Sembark's Acceptable Keys
  // Reference: https://sembark.com/travel-software/apis/trip-plan-requests/#request-body
  $raw_fields = $record->get('fields');
  $payload = [];
  foreach ($raw_fields as $id => $field ) {
    $payload[$id] = $field['value'];
  }
  // Map any fields that we need

  // Send the request
  $response = wp_remote_post('https://api.sembark.com/integrations/v1/trip-plan-requests', [
    'body' =>  wp_json_encode($payload),
    'data_format' => 'body',
    'headers' => [
       'Content-Type' => 'application/json',
       'Accept' => 'application/json',
       'Authorization' => 'Bearer ' . $access_token
    ]
  ]);
  if ( is_wp_error( $response ) ) {
    $error_message = $response->get_error_message();
    // TODO: Handle the error
  }
}

add_action('elementor_pro/forms/new_record', 'send_elementor_form_data_to_api', 10, 2);

?>

As you can see in the snippet, we have 2 more todos to complete.

2. Access Token

Now we will update the $access_token with a value which you can get from Sembark Dashboard. Check the Authorization Documentation on how to generate an access token.

Once you have generated a token, replace the <<<ACCESS_TOKEN_HERE>>> with it in the above snippet.

  /**
  * TODO 1: Get this token from the Sembark CRM Admin account
  */
-  $access_token = "<<<ACCESS_TOKEN_HERE>>>";
+  $access_token = "your_generated_access_token_here";

3. Field Mapping

The final step is to map your Elementor Contact Form Fields to the Sembark API's request fields. You already have some fields (e.g. First Name, Last Name, Email etc.) from your Elementor Forms. We will map these fields to the fields expected by Sembark APIs.

Sembark APIs accept data in particular key-value format. Incase of Leads API, following fields are available. For an up-to-date information of fields, please visit the respective APIs documentation page.

type payload = {
  name: string; // Guest Name, required (max: 191)
  phone_number: string; // Guest Phone Number, required (max: 191)
};

Now assuming you have following fields in your Contact Form and you want to send them to Sembark Leads API.

• Name
• Email
• Contact Number
• Destination
• Comments
• Package Category

Now we will map these Contact Form's fields to appropriate available fields in Sembark Leads API.

We will put these Sembark Fields in the mapping inputs of your contact-form fields respectively. As you can see, Package Category is left blank as it doesn't have a corresponding field in the Sembark API.

Now let's update our code snippet to include this mapping.

  /**
  * TODO 2: Update this mapping to set the payload for Sembark API
  */
  // On the right side, you have your form data
  // On the left side, you have Sembark's Acceptable Keys
  // Reference: https://sembark.com/travel-software/apis/trip-plan-requests/#request-body
  $payload = [
+    'name' => $form_data['Name'],
+    'phone_number' => $form_data['Contact Number'],
+    'destination' => $form_data['Destination'],
+    'comments' => $form_data['Comments'],
  ];

+ // Add the other form fields as it is
+ $payload = array_merge(
+   $payload, // mapped fields
+   array_diff_keys(
+    $form_data,
+    array_flip(['Name', 'Contact Number', 'Destination', 'Comments'] // remove these keys as they are mapped
+   )
+ );

Once you have updated the snippet with above steps, it is time to test the flow.

Test Your Submission

To test the submission, simply fill out the Elementor Contact/Lead form on your Wordpress Website and test the data inside your Sembark Dashboard under Trips > Trip Plan Requests tab from top header navigation.

If you need more help, please recheck the above steps or contact our support channel for your organization.