Widget Formularza (Kod Osadzania)

Wprowadzenie

Kody osadzania to kilka linii HTML i JavaScript, które możesz użyć do osadzenia formularza iform4u na swojej własnej stronie internetowej. Jest to najłatwiejszy sposób na wyświetlenie formularza na Twojej stronie oraz metoda najmniej podatna na błędy. Ponadto, jedną z najważniejszych rzeczy dotyczących widgetu formularza jest to, że za każdym razem, gdy dokonasz zmiany w swoim formularzu w kreatorze formularzy, osadzony formularz zostanie automatycznie zaktualizowany.

Widget Formularza został zaprojektowany tak, aby działać na każdej stronie internetowej. Nasz Widget Formularza zasadniczo tworzy iFrame na bieżąco, a formularz zostanie załadowany w nim. Następnie, ponieważ tworzy iFrame, może go również zmieniać rozmiar, co oznacza, że nie ma potrzeby aktualizowania kodu za każdym razem, gdy dokonasz jakiejś zmiany. Ponadto, gdy formularz jest umieszczony wewnątrz iFrame, zapobiegasz konfliktom z istniejącymi elementami JavaScript lub CSS na Twojej stronie.

Który Kod Osadzania Formularza Powinienem Użyć

Obecnie iform4u oferuje dwie opcje publikowania formularza na Twojej stronie internetowej:

1. Osadzanie z Projektem: Pozwala na opublikowanie formularza z motywem, który został zastosowany do formularza.
2. Osadzanie bez Projektu: Pozwala na opublikowanie formularza bez żadnego motywu, nawet jeśli zastosowałeś go do swojego formularza.

Zazwyczaj pierwsza opcja jest tą, której powinieneś użyć.

Jak Wypełnić Pole za Pomocą Querystring

Możesz wypełnić pole za pomocą parametrów URL. Upewnij się, że używasz ID pola lub Alias pola jako klucza parametru, a wartość przypisana do tego parametru pojawi się w polu.

Uwaga: Jeśli używasz formularza wieloetapowego, możesz przejść do konkretnej strony, dodając numer strony do URL, na przykład aby przejść do drugiej strony, dodaj query string "p=2".

Jak Słuchać postMessages Wysyłanych przez Widget Formularza

Aby móc słuchać wiadomości wysyłanych przez Widget Formularza, wystarczy dodać nasłuchiwacz zdarzeń do Twojej strony internetowej. Na przykład, jeśli potrzebujesz znać ID zgłoszenia ze swojej własnej strony, możesz dodać poniższy kod poniżej wklejonego kodu osadzania:

window.addEventListener("message", receiveMessage, false);function receiveMessage(event) {    if (event.data) {        var data = JSON.parse(event.data);        if (typeof data.action !== "undefined" && data.action === "success") {            console.log("Zgłoszenie zapisane z ID", data.data.id);        }    }}

Ustawienia Widgetu Formularza

Widget Formularza (kod osadzania) składa się z dwóch części:

1. Kod HTML, który wyświetla domyślną zawartość, jeśli użytkownik uzyska dostęp do formularza, gdy JavaScript jest wyłączony w jego przeglądarce. Domyślnie wyświetlany jest link do Twojego formularza w elemencie DIV.
2. Kod JavaScript, który odpowiada za wyświetlanie formularza i inicjalizację Śledzenia Formularza (jeśli Analityka jest włączona).

Widget formularza pozwala na ustawienie niektórych opcji formularza na bieżąco:

• ID: ID formularza w aplikacji. Na przykład: 'id': 132
• Sid: ID zgłoszenia. Użyj tej opcji, aby edytować wcześniej zebrane zgłoszenie formularza. Aby znaleźć ID zgłoszenia, przejdź do Menedżera Zgłoszeń. Na przykład: 'sid': 964
• Kontener: ID elementu HTML, w którym zostanie wstawiony iFrame formularza. Domyślnie wskazuje na ID DIV, który zawiera link do formularza. Na przykład: 'container': 'c132'
• Szerokość: Określa szerokość iFrame formularza. Na przykład: 'width': '100%'
• Wysokość: Określa wysokość iFrame formularza. Zazwyczaj kod osadzania jest ustawiony na wartość w pikselach. Ta wartość jest obliczana przez Kreatora Formularzy w momencie jego tworzenia. Na przykład: 'height': '846px'
• Automatyczna Zmiana Rozmiaru: Domyślnie włączona. Określa, czy iFrame może automatycznie zmieniać rozmiar do rzeczywistej wysokości formularza, na przykład gdy wyświetlane są komunikaty walidacji. Jeśli ustawiona na false, formularz nie będzie się zmieniał, a jego wysokość będzie określona w opcji "wysokość". Na przykład: 'autoResize': !0
• Motyw: Domyślnie włączony. Jest to wartość całkowita (1 lub 0), która pozwala włączać lub wyłączać motyw na bieżąco. Na przykład: 'theme': 1
• Niestercustomizowany JS: Domyślnie włączony. Jest to wartość całkowita (1 lub 0), która pozwala włączać lub wyłączać ładowanie zewnętrznych plików JavaScript na bieżąco. Na przykład: 'customJS': 1
• Rekord: Domyślnie włączony. Jest to wartość całkowita (1 lub 0), która pozwala włączać lub wyłączać Śledzenie Formularza na bieżąco. Na przykład: 'record': 1
• Reset: Domyślnie włączony. Jest to wartość całkowita (1 lub 0), która pozwala włączać lub wyłączać resetowanie formularza po jego wysłaniu. Na przykład: 'reset': 0
• Strona: W formularzu wieloetapowym ta opcja określa stronę, którą chcemy wyświetlić domyślnie. Na przykład, aby wyświetlić drugą stronę: 'page': 2
• Formularz: Określa ścieżkę do osadzenia formularza. Nie zawiera żadnych parametrów.
• addToOffsetTop: Domyślnie 0. Dodaje lub odejmuje liczbę pikseli do OffsetTop przed obliczeniem lokalizacji formularza. Pozwala to na poprawne ustawienie lokalizacji formularza, gdy elementy HTML na stronie (takie jak nagłówek) mają właściwość CSS: "fixed". Na przykład: 'addToOffsetTop': '-60'
• Wartości Domyślne: Jeśli chcesz wstępnie wypełnić pola formularza wartościami domyślnymi, możesz użyć tej opcji. Wartości domyślne to obiekt JSON, gdzie klucz to ID pola formularza, a wartość to zawartość pola. Na przykład:

'defaultValues': {    'text_0': 'To jest moja wartość domyślna'}

Pamiętaj, że pola wyboru i przyciski radiowe będą zaznaczone za pomocą wartości logicznych. Na przykład:

'defaultValues': {    'text_0': 'To jest moja wartość domyślna',    'checkbox_0': true}

Interakcja z Formularzem za Pomocą JavaScript

Widget Formularza zawiera wiele funkcji i opcji, które można skonfigurować w zewnętrznym pliku JavaScript.

Uwaga: Aby załadować plik JavaScript, musisz przejść do Formularze -> Akcje -> Ustawienia -> Ustawienia UI.

Domyślnie dostępny jest obiekt jQuery. Dlatego możesz w bardzo prosty sposób interagować z formularzem, używając następujących linii kodu:

$( document ).ready(function() {  // Tutaj możemy interagować z formularzem});

Element Formularza

Element Formularza - formEl - jest obiektem jQuery, do którego możesz uzyskać dostęp, aby uzyskać informacje i/lub bezpośrednio go manipulować. Na przykład, dowiemy się, jaka jest wysokość naszego formularza za pomocą następujących linii kodu:

$( document ).ready(function() {  console.log('Wysokość formularza to', formEl.height());});

Słuchanie Zdarzeń

Niektóre zdarzenia są wyzwalane, gdy Formularz coś robi.

• view: To zdarzenie zostanie wyzwolone, gdy formularz zostanie wyświetlony.
• fill: To zdarzenie zostanie wyzwolone za pierwszym razem, gdy użytkownik interaguje z formularzem. Na przykład, poprzez wypełnienie pola tekstowego lub zaznaczenie przycisku radiowego.
• error: To zdarzenie zostanie wyzwolone, gdy serwer zgłosi błąd walidacji.
• success: To zdarzenie zostanie wyzwolone, gdy formularz zostanie pomyślnie wysłany.
• nextStep: To zdarzenie zostanie wyzwolone za każdym razem, gdy przechodzisz do następnego kroku w formularzu wieloetapowym.
• previousStep: To zdarzenie zostanie wyzwolone za każdym razem, gdy wracasz o jeden krok w formularzu wieloetapowym.

Bardzo podstawowy przykład wykrywania, gdy formularz się nie powiedzie, wyglądałby następująco:

$( document ).ready(function() {    formEl.on('error', function(event) {        /* Śledzenie błędu walidacji serwera */          /* To, co się tutaj dzieje, zależy od Twojego produktu analitycznego! */    });});

Silnik Reguł wyzwala również następujące zdarzenia, gdy pole jest pokazywane lub ukrywane za pomocą reguł warunkowych:

Aby zaimplementować tę funkcję, silnik reguł wyzwoli następujące zdarzenia:

• ef.shown: To zdarzenie zostanie wyzwolone, gdy pole zostanie pokazane.
• ef.hidden: To zdarzenie zostanie wyzwolone, gdy pole zostanie ukryte.

Następnie, aby interagować z tymi zdarzeniami, po prostu napisz nasłuchiwacze zdarzeń. Na przykład:

$( document ).ready(function() {  $('#text_1').on('ef.shown', function(e) {    console.log("To pole tekstowe zostało pokazane.")  });  $('#text_1').on('ef.hidden', function(e) {    console.log("To pole tekstowe zostało ukryte.")  });});

Obsługiwacze Zdarzeń: previousStep i nextStep

Oprócz zdarzeń, iform4u oferuje dwa obsługiwacze zdarzeń, które pozwalają na cofanie się i przechodzenie do przodu w formularzu wieloetapowym, gotowe do użycia za pomocą JavaScript. Na przykład, teraz zobaczymy, jak przejść do następnej strony bez naciskania przycisku "Dalej" za pomocą funkcji automatycznego przechodzenia.

Automatyczne Przechodzenie w Formularzach Wieloetapowych

Domyślnie, gdy tworzysz formularz wieloetapowy, automatycznie dodawane są dwa przyciski nawigacyjne: "Poprzedni" i "Następny" na dole formularza. Te przyciski pozwalają na nawigację przez formularz, aż dotrzesz do ostatniej strony, gdzie zazwyczaj umieszczony jest przycisk "Wyślij".

Uwaga: iform4u pozwala na dodanie wielu przycisków "Wyślij" na różnych stronach lub częściach formularza.

Jednak w niektórych przypadkach możesz chcieć przejść bezpośrednio do następnej strony bez naciskania żadnych przycisków. Do tego użyjemy obsługiwacza zdarzeń „nextStep”.

Uwaga: Niektóre przypadki użycia, w których ta funkcja jest przydatna, to ankiety i/lub testy, gdzie nie jest dozwolone zmienianie odpowiedzi i pozwala na jak najszybsze ukończenie ankiety.

Na przykład, za pomocą następujących linii kodu, poinformujemy nasz Formularz, że za każdym razem, gdy zostanie zaznaczony przycisk radiowy, formularz przejdzie do następnej strony:

$( document ).ready(function() {    $('input[type=radio]').on('change', nextStep);});

Na koniec, jeśli chcesz ukryć przyciski nawigacyjne, możesz dodać następujące linie do motywu CSS przypisanego do Twojego formularza:

.previous, .next {    display: none !important;}

Ładowanie Wielu Plików JavaScript i CSS w Naszym Formularzu

Dzięki posiadaniu obiektu jQuery, możemy korzystać z jQuery.when().done(), aby załadować wiele obiektów JavaScript i korzystać z nich, gdy będą gotowe do użycia. Zobaczmy poniższy przykład.

Wyświetlanie DatePicker jQuery UI w Polu Daty

Na przykład, za pomocą następujących linii kodu, wyświetlimy DatePicker jQuery UI w polach daty formularza:

$( document ).ready(function() {    $.when(        $('head').append('<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />'),        $.getScript( "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ),        $.Deferred(function( deferred ){            $( deferred.resolve );        })    ).done(function(){        $('body').css('padding-bottom', '200px'); // Padding dla wyświetlenia datepicker        $('input[type=date]').each(function () {            $(this).attr('type', 'text').after(                $(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')                    .datepicker({                        /* Spójny format z pickerem HTML5 */                        dateFormat: 'mm/dd/yy',                        changeMonth: true,                        changeYear: true,                        altField: this,                        altFormat: "yy-mm-dd"                    })            )            .hide();        });    });});

Jak widzisz:

• Ładujemy 2 pliki w funkcji when(): jquery-ui.css i jquery-ui.min.js.
• Wstawiliśmy funkcję, która będzie działać, gdy poprzednie dwa pliki zostaną załadowane na stronie w funkcji done().
• Funkcja zasadniczo wykonuje 3 instrukcje:
  1. Znajdź wszystkie pola typu " date" i zamień każde pole " date" na " text".
  2. Skopiuj każde pole daty na pole tekstowe, które wyświetla DatePicker.
  3. Ukryj pole daty, ponieważ jego wartość zostanie automatycznie ustawiona przez DatePicker za pomocą atrybutów: altField i altFormat.