Search code examples
wordpressapiwebhookstypeform

Typeform WordPress Integration

I have a form in Typeform, So if an user enter his details the details should be send via webhook api and it should be stored in my Wordpress website that's what I'm looking for . 1st doing API so I'm looking for some code or functions to get datas from the Form url of the typeform. Without Plugin so I want to learn through codes ..

Solution

  • API endpoint

    First you need to build your own API endpoint to receive Typeform Webhook payload. I assume you will be building this in PHP since you are using Wordpress.

    You can create a webhook.php file in your Wordpress installation, eg. in /wp-content directory:

    <?php
$headers = getallheaders();
$header_signature = $headers["Typeform-Signature"];
$secret = "abc123";  // replace with a unique webhook secret

$payload = @file_get_contents("php://input");
$hashed_payload = hash_hmac("sha256", $payload, $secret, true);
$base64encoded = "sha256=".base64_encode($hashed_payload);

if ($header_signature !== $base64encoded) {
  die("invalid signature");
}

// now you can process webhook payload
// see https://developer.typeform.com/webhooks/example-payload/
$data = json_decode($payload);
$definition = $data->form_response->definition;  // form definition
$answers = $data->form_response->answers;        // respondent answers

// you could save it to your wordpress database
// code below depends on what questions you have in your typeform
require_once "../wp-load.php";
global $wpdb; // see https://developer.wordpress.org/reference/classes/wpdb/
$wpdb->insert('my_typeform_data', array(
    'name'         => $answers[0]->text,
    'phone_number' => $answers[1]->phone_number
));

    Setup webhook

    Now you can setup webhook for your typeform:

    • click Connect in top menu
    • click Webhooks
    • click Click Add a webhook button
    • enter URL to your webhook script, eg. https://example.com/wp-content/webhook.php
    • click Save webhook button

    To secure your webhook:

    • click Edit button next to your webhook
    • enter custom secret (see the $secret variable above)

    For testing:

    • click the View deliveries button next to your webhook
    • click Send test request button