...
✅ WEB ja WordPressi uudised, teemad, pistikprogrammid. Siin jagame näpunäiteid ja parimaid veebisaidi lahendusi.

MailChimpi integreerimine kontaktivormi 7 pistikprogrammiga

27

Kontaktivorm 7 on kahtlemata WordPressi üks populaarsemaid pistikprogramme. Selle artikli kirjutamise ajal on pistikprogrammis üle 5 miljoni aktiivse installi. Selle populaarsus seisneb lihtsuses, hõlpsas konfiguratsioonis ja paindlikkuses. Pistikprogrammi saab laiendada vastavalt nende vajadustele ilma pistikprogrammi koodi puudutamata.

Hiljuti küsis üks meie lugejatest MailChimpi integreerimise kohta kontakti vorm 7 pistikprogrammiga. Nad soovivad uudiskirja vormi jaoks kasutada pistikprogrammi Kontaktivorm 7. Sellel on e-posti väli ja vormi eduka esitamise korral peaks sisestatud e-kiri nende MailChimpi tellijate nimekirja lisama.

Kontaktivorm 7 pakub oma funktsionaalsuse laiendamiseks kohandatud DOM-i sündmusi. Kasutades ühte nende Dom-sündmustest, mis on „wpcf7mailsent", saate integreerida MailChimpi tellimiskoodi.

Hankige MailChimpi API võti ja vaatajaskonna ID

Enne kui hakkame tegelikult koodi kirjutama, peate kõigepealt haarama oma koodis nõutavad MailChimp API võtme ja vaatajaskonna ID. Haarake need üksikasjad, järgides alltoodud samme.

Logige sisse oma MailChimpi kontole. Valige kasutaja ikoonilt konto.

MailChimpi integreerimine kontaktivormi 7 pistikprogrammiga

Järgmisel lehel klõpsake nuppu Extra-> API võtmed.

MailChimpi integreerimine kontaktivormi 7 pistikprogrammiga

Klõpsake jaotises Teie API võtmed nuppu Loo võti ja kopeerige oma API võti.

MailChimpi integreerimine kontaktivormi 7 pistikprogrammiga

Järgmisena hankige vaatajaskonna ID, millele peate oma tellijad lisama. Selleks klõpsake menüül Vaatajaskond ja valige seejärel rippmenüüst Sihtrühma haldamine suvand Seaded.

MailChimpi integreerimine kontaktivormi 7 pistikprogrammiga

Klõpsake jaotises Seaded vaatajaskonna nime ja vaikeväärtusi.

MailChimpi integreerimine kontaktivormi 7 pistikprogrammiga

Järgmisel lehel leiate oma vaatajaskonna ID.

MailChimpi integreerimine kontaktivormi 7 pistikprogrammiga

Looge vorm, kasutades kontaktivormi 7 pistikprogrammi

Kui olete oma MailChimpi mandaatidega valmis, peate järgmisena looma oma tellimisvormi. Minge menüüsse Kontaktivormid ja looge see. Teie kood on umbes selline nagu allpool olev ekraanipilt.

MailChimpi integreerimine kontaktivormi 7 pistikprogrammiga

Kuna meil on tegemist uudiskirja vormiga, paneme paika edusõnumi, mis sobib teie lõppeesmärgiga. Minge vahekaardile „Sõnumid” ja määrake see nagu allpool.

MailChimpi integreerimine kontaktivormi 7 pistikprogrammiga

Nüüd kopeerige loodud lühikood ja asetage see kuhu soovite, ja näete vormi koos e-posti väljaga ja esitamise nupuga. Meie eesmärk on see, et kui kasutajad sisestavad e-kirja ja vajutavad nuppu Esita, lisatakse see e-kiri teie MailChimpi tellijate nimekirja. Kirjutame sellele koodi.

Lisage JavaScripti fail WordPressi

Nagu varem öeldud, kasutan kontakti vorm 7 pistikprogrammi Dom sündmust ‘wpcf7mailsent’. See tähendab, et peame kirjutama väikese tüki JavaScripti koodi. Esiteks peab see sisaldama JS-faili, näiteks custom.jsteie WordPressi saidil. Samuti peame kasutama Ajaxi, nii et lisan JS-failile WordPressi Ajaxi URL-i ja nonce. functions.phpLisage oma aktiivsetesse teemadesse allolev kood.

<?php
...
...
function custom_enqueue_scripts() {
   // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array(), false, true );
 
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'subscribe_user' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
 
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );

Ülaltoodud kood sisaldab custom.jssaidi faili ja lisab muutujale Ajax URL, nonce võtme.

Teie custom.jsfailil on järgmine JavaScripti kood.

document.addEventListener( 'wpcf7mailsent', function( event) {
 
    if ('YOUR_CONTACT_FORM_ID' == event.detail.contactFormId) {
        var inputs = event.detail.inputs;
 
        for (var i = 0; i < inputs.length; i++) {
            if ('your-email' == inputs[i].name) {
 
                var data = {
                    'action': 'subscribe_user_by_ajax',
                    'email': inputs[i].value,
                    'security': blog.security
                };
                jQuery.post(blog.ajaxurl, data, function(response) {
                    console.log(response);
                });
                break;
            }
        }
    }
}, false );

Asendage kohatäide ‘YOUR_CONTACT_FORM_ID’ oma tegeliku väärtusega. Selle ID saate oma kontaktivormi lühinumbrilt. See on vajalik, kuna meie kood peaks toimuma ainult uudiskirja vormil, mitte teistel kontaktivormidel.

MailChimpi integreerimine kontaktivormi 7 pistikprogrammiga

String ‘sinu-e-post’ on nimi, mille olen oma meiliväljale andnud. See jääb nii, nagu ta on. Kui märkasite, et olen seda toimingut kasutanud nimega ‘subscribe_user_by_ajax’, mida kasutatakse meie Ajaxi tagasihelistusmeetodi helistamiseks, kus kirjutan MailChimpi tellimuse jaoks koodi.

MailChimpi integreerimine kontaktivormi 7 pistikprogrammiga

Siiani oleme loonud uudiskirja vormi, kirjutanud JS-koodi, mis täidetakse vormi edukal esitamisel. Järgmine osa on võtta e-kiri ja saata see MailChimpile, kasutades MailChimp API-d. JS-koodis kasutasime toimingut ‘subscribe_user_by_ajax’, nii et kirjutame selle jaoks Ajaxi tagasihelistamiskoodi.

Lisage allolev kood oma teema functions.phpfaili.

<?php
...
...
 
function subscribe_user_by_ajax_callback() {
    check_ajax_referer('subscribe_user', 'security');
    $email = $_POST['email'];
    $audience_id = 'YOUR_MAILCHIMP_AUDIENCE_ID';
    $api_key = 'YOUR_MAILCHIMP_API_KEY';
    $data_center = substr($api_key,strpos($api_key,'-')+1);
    $url = 'https://'. $data_center .'.api.mailchimp.com/3.0/lists/'. $audience_id .'/members';
    $auth = base64_encode( 'user:'. $api_key );
    $arr_data = json_encode(array(
        'email_address' => $email,
        'status' => 'subscribed' //pass 'subscribed' or 'pending'
    ));
 
    $response = wp_remote_post( $url, array(
            'method' => 'POST',
            'headers' => array(
                'Content-Type' => 'application/json',
                'Authorization' => "Basic $auth"
            ),
            'body' => $arr_data,
        )
    );
 
    if (is_wp_error( $response)) {
       $error_message = $response->get_error_message();
       echo "Something went wrong: $error_message";
    } else {
        $status_code = wp_remote_retrieve_response_code( $response );
        switch ($status_code) {
            case '200':
                echo $status_code;
                break;
            case '400':
                $api_response = json_decode( wp_remote_retrieve_body( $response ), true );
                echo $api_response['title'];
                break;
            default:
                echo 'Something went wrong. Please try again.';
                break;
        }
    }
    wp_die();
}
add_action('wp_ajax_subscribe_user_by_ajax', 'subscribe_user_by_ajax_callback');
add_action('wp_ajax_nopriv_subscribe_user_by_ajax', 'subscribe_user_by_ajax_callback');

Asendage kohatäited ‘YOUR_MAILCHIMP_AUDIENCE_ID’ ja ‘YOUR_MAILCHIMP_API_KEY’ oma tegelike MailChimpi mandaatidega. Ülaltoodud kood võtab meili ja saadab selle MailChimpi tellimuse API lõpp-punkti. Samuti määrasin olekuks „tellitud”, mis tähendab, et meil tellitakse otse teie loendisse. Kui soovite kasutajale tellimuse kinnitamiseks saata kinnitusmeili, määrake olekuks ootel.

Kõik on seotud MailChimpi integreerimisega kontakti vormi 7 pistikprogrammiga. Loodan, et õpetus meeldis teile. Tahaksin kuulda teie mõtteid ja ettepanekuid allpool olevas kommentaaride jaotises.

seotud artiklid

See veebisait kasutab teie kasutuskogemuse parandamiseks küpsiseid. Eeldame, et olete sellega rahul, kuid saate soovi korral loobuda. Nõustu Loe rohkem