Aktuell arbeite ich für die Arbeit viel mit HubSpot und deren API. HubSpot ist im Grunde ein Online-CRM, mit denen man die Gespräche und Aktionen protokollieren kann. Außerdem bietet HubSpot ein cooles Feature, welches anhand einer Domain (oder E-Mail eines Kontaktes), dann alle notwendigen Daten von den jeweiligen Domains abgegriffen werden. Bspw. wird so das Logo, oder aber auch Werte zum Unternehmen mit Hilfe des Impressums vorausgefüllt. Ein wirklich cooles Tool. Um das Ganze zu testen, musste ich jetzt auf meiner Seite Contact Form 7 so bearbeiten, dass es die Daten auch an HubSpot übermittelt. Da es keine Dokumentation dazu gibt, habe ich selbst ein wenig herumprobiert und auch eine Lösung parat.
Zuerst habe ich mir die bestehenden Plugins im WordPress Repository angeschaut. Es gab nicht viele und alle wollten natürlich wieder eine Premium-Variante verkaufen, nervig! Eine Info am Rande: Für Helpful wird es nie eine Premium-Version geben! HubSpot hat auch ein eigenes Plugin, aber hier muss man dafür zahlen, dass man das HubSpot-Logo nicht mehr unterhalb seiner Formulare sieht. Also muss die HubSpot API her, die wie ich finde, sehr gut dokumentiert ist. Daumen hoch dafür!
Fangen wir einmal an. Zuerst müssen wir in HubSpot ein Formular anlegen, dies geschieht im Untermenüpunkt Marketing, direkt in HubSpot. Ist das Formular einmal angelegt, benötigen wir noch die formGuid und die portalId. Beides kann man in der Adresszeile ablesen, wenn man das Formular in HubSpot aufgerufen hat. Ein Beispiel könnte so aussehen: https://app.hubspot.com/forms/{portalId}/editor/{formGuid}/edit/form
Haben wir die beiden IDs einmal notiert, folgt jetzt die Magie in Contact Form 7. Contact Form 7 hat extra die Hook wpcf7_before_send_mail die wir für unser Vorhaben ansteuern können. Mit dieser Hook können wir die abgesendeten Daten abfangen und weiterverarbeiten. Contact Form 7 arbeiten hier dann ganz normal, nur das eben Daten noch nach HubSpot gesendet, oder auch in eine Datei gepackt werden können. Hier der gesamte Schnipsel inklusive Kommentaren. Wichtig ist, dass ich in Contact Form 7 folgende Felder angelegt habe: your-firstname, your-lastname, your-email und your-message.
<?php
/**
* Contact Form 7 nachdem Absenden manipulieren und Daten in das HubSpot Formular einsenden.
* Du kannst den Code in dein Plugin oder ab auch in deine functions.php packen.
*
* @author Pixelbart
*/
/**
* Hier werden die IDs und der Endpoint von HubSpot festgelegt.
*/
$hubspot_formGuid = '';
$hubspot_portalId = '';
$hubspost_endpoint = 'https://forms.hubspot.com/uploads/form/v2/{portal_id}/{form_guid}';
/**
* Hier manipulieren wir Contact Form 7
*
* @param array $contact_from
*/
function send_to_hubspot( $contact_form ) {
/**
* Hier fangen wir die aktuelle Instanz von Contact Form 7 ab. Den Request können wir
* bspw. nicht innerhalb eines Plugins mit $_POST abfangen, daher ist das sehr wichtig!
*/
$submission = WPCF7_Submission::get_instance();
if ( $submission ) {
/**
* Hier packen wir die abgesendeten Daten in einen Array.
*/
$posted_data = $submission->get_posted_data();
/**
* Hier werden die einzelnen Felder festgelegt. Du siehst auch direkt, dass der Schlüssel
* der Arrays mit den IDs der Feldern übereinstimmt. Also ganz einfach abzufangen.
*/
$email = sanitize_email( $posted_data['your-email'] );
$firstname = sanitize_text_field( $posted_data['your-firstname'] );
$lastname = sanitize_text_field( $posted_data['your-lastname'] );
$message = sanitize_text_field( $posted_data['your-message'] );
/**
* Hier legen wir den Array für HubSpot fest. gdpr habe ich hier direkt auf yes gesetzt.
* Das sollte dann innerhalb des Contact Form 7 Formulars noch erfolgen.
*/
$fields = [
'firstname' => $firstname,
'lastname' => $lastname,
'email' => $email,
'message' => $message,
'gdpr' => 'Yes',
];
hubspot_submit_form( $fields );
}
/**
* Hier geben wir die ursprünglichen Daten des Kontaktformulars weiter,
* damit Contact Form 7 das Formular normal weiterverarbeiten kann.
*/
return $contact_form;
}
/**
* Hier packen wir unsere Funktion in die Contact Form 7 Hook.
*/
add_action( 'wpcf7_before_send_mail', 'send_to_hubspot' );
/**
* Sendet Daten an ein HubSpot Formular.
*
* @see https://developers.hubspot.com/docs/methods/forms/submit_form
*
* @param array $fields Formular Felder von HubSpot.
*
* @return wp_remote_post WP_Error oder Response.
*/
function hubspot_submit_form( array $fields ) {
$ids = [
'{portal_id}' => $hubspot_portalId,
'{form_guid}' => $hubspot_formGuid,
];
/**
* Hier ersetzen wir die Platzhalter in der Endpoint, mit unseren IDs. Das kannst du dir auch
* sparen, wenn du den Endpoint direkt richtig einträgst. Wollte die Technik aber eh mal mit
* dir teilen, daher habe ich es mal eingebaut.
*/
$endpoint = str_replace( array_keys( $ids ), array_values( $ids ), $hubspot_endpoint );
/**
* Ab hier legen wir den Kontext für HubSpot fest.
*/
$hubspotutk = false;
$ip_address = false;
if ( isset( $_COOKIE['hubspotutk'] ) ) {
$hubspotutk = esc_html( $_COOKIE['hubspotutk'] );
}
if ( isset( $_SERVER['REMOTE_ADDR'] ) ) {
$ip_address = esc_html( $_SERVER['REMOTE_ADDR'] );
}
$context = [
'hutk' => $hubspotutk,
'ipAddress' => $ip_address,
'pageUrl' => esc_url( get_bloginfo( 'url' ) ),
'pageName' => esc_html( get_bloginfo( 'name' ) ),
];
$fields['hs_context'] = wp_json_encode( $context );
/**
* Hier durchlaufen wir noch einmal alle Felder und codieren sie, damit es keine Konflikte mit HubSpot gibt.
*/
foreach ( $fields as $key => $value ) {
$fields[ $key ] = rawurlencode( $value );
}
$options = [
'body' => $fields,
'headers' => [
'Content-Type' => 'application/x-www-form-urlencoded',
],
];
/**
* Hier führen wir den POST-Request durch und senden die Daten an das HubSpot-Formular.
*/
return wp_remote_post( $endpoint, $options );
}Code-Sprache: HTML, XML (xml)Ganz schön viel Stoff, trotzdem hoffe ich, dass dir das ein wenig weiterhilft. Das Ganze funktioniert einwandfrei und du kannst mit der Hook wpcf7_before_send_mail so ziemlich alles machen, was dir einfällt. Wie immer gilt: Grundsätzlich schreibe ich die Dinge als Gedankenstütze für mich auf. Ich habe das in ein Plugin und in PHP-Klassen gepackt, damit ich es einfach wiederverwenden kann. Für HubSpot gibt es sogar schon eine PHP API Client, wenn du keine Lust darauf hast, eine eigene Klasse zu schreiben.
Wenn du jetzt noch wissen möchtest, wie du einen Beitrag mit der REST API von WordPress veröffentlichst, dann solltest du hier einmal vorbeischauen. Dort habe ich dir in einem Schnipsel Schritt für Schritt erklärt, wie das Ganze funktioniert. Außerdem erfährst du dort, wie man eine Authentifizierung einbaut und nutzt.