Widget formularza (kod osadzania)

Wstęp

Kod osadzania to kilka linijek kodu HTML i JavaScript, których możesz użyć do osadzenia formularza iform4u na swojej własnej stronie internetowej. To najprostszy sposób na wyświetlenie formularza na Twojej stronie i sposób najmniej podatny na błędy. Ponadto jedną z najważniejszych cech widżetu formularza jest to, że za każdym razem, gdy dokonasz zmian w formularzu w kreatorze formularzy, osadzony formularz zostanie automatycznie zaktualizowany.

Widżet formularza został zaprojektowany tak, aby działał na dowolnej stronie internetowej. Nasz widget formularza zasadniczo tworzy ramkę iFrame w locie, a formularz zostanie do niej załadowany. Następnie, ponieważ tworzy ramkę iFrame, może również zmieniać jej rozmiar, co oznacza, że ​​nie ma potrzeby aktualizowania kodu za każdym razem, gdy wprowadzasz jakąś zmianę. Ponadto, jeśli trzymasz formularz w elemencie iFrame, zapobiegasz jego konfliktom z istniejącymi elementami JavaScript lub CSS na Twojej stronie.

Którego kodu osadzania formularza należy użyć

W tej chwili iform4u oferuje dwie możliwości opublikowania formularza na Twojej stronie internetowej:

1. Osadź z projektem : umożliwia opublikowanie formularza z motywem zastosowanym do formularza.
2. Osadź bez projektu : umożliwia opublikowanie formularza bez żadnego motywu, nawet jeśli został on zastosowany do formularza.

Zwykle pierwszą opcją jest ta, z której powinieneś skorzystać.

Jak wypełnić pole ciągiem zapytania

Możesz wypełnić pole parametrami adresu URL. Upewnij się tylko, że używasz identyfikatora pola lub aliasu pola jako klucza parametru, a wartość przypisana do tego parametru pojawi się w polu.

Uwaga: Jeśli korzystasz z formularza wieloetapowego, możesz przejść do konkretnej strony, dołączając numer strony do adresu URL, na przykład aby przejść do drugiej strony, dodaj ciąg zapytania „p=2”.

Jak odsłuchać wiadomości wysyłane przez Form Widget

Aby móc odsłuchiwać wiadomości wysyłane przez Form Widget, wystarczy dodać do swojej strony detektor zdarzeń. Na przykład, jeśli chcesz znać identyfikator zgłoszenia ze swojej strony internetowej, możesz dodać ten kod poniżej wklejonego kodu do umieszczenia na stronie:

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("Submission saved with ID", data.data.id);        }    }}

Ustawienia widgetu formularza

Widżet formularza (kod osadzania) składa się z dwóch części:

1. Kod HTML wyświetlający domyślną treść, jeśli użytkownik uzyska dostęp do formularza, gdy w jego przeglądarce jest wyłączony JavaScript. Domyślnie wyświetlany jest link do formularza w elemencie DIV.
2. Kod JavaScript odpowiedzialny za wyświetlenie formularza i inicjalizację modułu śledzenia formularzy (jeśli włączona jest funkcja Analytics).

Widget formularza pozwala na szybkie ustawienie niektórych opcji formularza:

• Id : Identyfikator formularza w aplikacji. Na przykład:'id': 132
• Sid : Identyfikator przesłania. Użyj tej opcji, aby edytować wcześniej zebrane formularze. Aby znaleźć identyfikator zgłoszenia, przejdź do Menedżera zgłoszeń . Na przykład:'sid': 964
• Kontener : identyfikator elementu HTML, do którego zostanie wstawiona ramka iframe formularza. Domyślnie wskazuje na identyfikator DIV zawierający link do formularza. Na przykład:'container': 'c132'
• Szerokość : określa szerokość ramki iframe formularza. Na przykład:'width': '100%'
• Wysokość : Określa wysokość ramki iframe formularza. Zwykle kod osadzania ma ustawioną wartość w pikselach. Wartość ta jest obliczana przez Konstruktora Formularzy w momencie jego tworzenia. Na przykład:'height': '846px'
• Automatyczna zmiana rozmiaru : Domyślnie opcja jest włączona. Wskazuje, czy element iframe może automatycznie zmieniać rozmiar do rzeczywistej wysokości formularza. Na przykład, gdy wyświetlane są komunikaty sprawdzające. Jeśli ustawione na false, rozmiar formularza nie będzie się zmieniał, a jego wysokość zostanie zdefiniowana w opcji „height”. Na przykład:'autoResize': !0
• Motyw : domyślnie jest włączony. To wartość całkowita (1 lub 0), która umożliwia włączenie lub wyłączenie motywu na bieżąco. Na przykład:'theme': 1
• Niestandardowy JS: Domyślnie opcja jest włączona. To wartość całkowita (1 lub 0), która umożliwia włączenie lub wyłączenie ładowania zewnętrznych plików JavaScript w locie. Na przykład:'customJS': 1
• Nagrywanie : Domyślnie opcja jest włączona. Jest wartością całkowitą (1 lub 0), która umożliwia włączenie lub wyłączenie modułu śledzenia formularzy na bieżąco. Na przykład:'record': 1
• Resetuj : Domyślnie opcja jest włączona. Jest wartością całkowitą (1 lub 0), która umożliwia włączenie lub wyłączenie resetowania formularza po przesłaniu formularza. Na przykład:'reset': 0
• Strona : W formularzu wieloetapowym ta opcja określa stronę, którą chcemy domyślnie wyświetlić. 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 wynosi 0. Dodaj lub odejmij liczbę pikseli do OffsetTop przed obliczeniem lokalizacji formularza. Pozwala to skorygować lokalizację formularza, gdy elementy HTML na stronie (np. 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 skorzystać z tej opcji. Wartości domyślne to obiekt JSON, w którym kluczem jest identyfikator pola formularza, a jego wartość to zawartość pola. Na przykład:

'defaultValues': {    'text_0': 'This is my default value'}

Należy pamiętać, że pola wyboru i przyciski opcji zostaną zaznaczone za pomocą wartości logicznych. Na przykład:

'defaultValues': {    'text_0': 'This is my default value',    'checkbox_0': true}

Widżet 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 interfejsu użytkownika.

Domyślnie dostępny jest obiekt jQuery. Możesz więc wchodzić w interakcję z formularzem w bardzo prosty sposób, używając następujących wierszy kodu:

$( document ).ready(function() {  // Here we can interact with the Form});

Element formularza

Element Form - formEl - jest obiektem jQuery, do którego można uzyskać dostęp, aby uzyskać informacje i/lub bezpośrednio nimi manipulować. Na przykład, będziemy znać wysokość naszego formularza za pomocą następujących linii kodu:

$( document ).ready(function() {  console.log('The form height is', formEl.height());});

Nasłuchiwanie wydarzeń

Pewne zdarzenia są wyzwalane, gdy Form coś robi.

• view : To zdarzenie zostanie wywołane po wyświetleniu formularza.
• fill : To zdarzenie zostanie wywołane przy pierwszej interakcji z formularzem. Na przykład wypełniając pole tekstowe lub wybierając przycisk radiowy.
• błąd : To zdarzenie zostanie wywołane, gdy serwer zgłosi błąd sprawdzania poprawności.
• sukces : To zdarzenie zostanie wywołane po pomyślnym przesłaniu formularza.
• nextStep : To zdarzenie będzie wyzwalane za każdym razem, gdy przejdziesz do następnego kroku w formie wieloetapowej.
• poprzedniKrok : To zdarzenie zostanie wywołane za każdym razem, gdy cofniesz się o jeden krok w formularzu wieloetapowym.

Bardzo prostym przykładem wykrywania niepowodzenia formularza może być:

$( document ).ready(function() {    formEl.on('error', function(event) {        /* Track a server validation error */          /* What happens here would be dependent on your analytics product! */    });});

Mechanizm reguł wyzwala także następujące zdarzenia, gdy pole jest wyświetlane lub ukrywane przy użyciu reguł warunkowych:

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

• ef.show : To zdarzenie zostanie wywołane po wyświetleniu pola.
• ef.hidden : To zdarzenie zostanie wywołane, gdy pole zostanie ukryte.

Następnie, aby wejść w interakcję z tymi zdarzeniami, po prostu napisz detektory zdarzeń. Na przykład:

$( document ).ready(function() {  $('#text_1').on('ef.shown', function(e) {    console.log("This text field has been shown.")  });  $('#text_1').on('ef.hidden', function(e) {    console.log("This text field has been hidden.")  });});

Obsługa zdarzeń: poprzedni i następny krok

Oprócz zdarzeń iform4u oferuje dwie procedury obsługi zdarzeń, które umożliwiają cofanie się i przewijanie strony w formularzu wieloetapowym, gotowym do użycia przy użyciu JavaScript. Na przykład teraz zobaczymy, jak przekazać stronę bez naciskania przycisku „Dalej”, korzystając z funkcji automatycznego przechodzenia.

Automatyczne przechodzenie w formularzach wieloetapowych

Domyślnie podczas tworzenia formularza wieloetapowego automatycznie dodawane są dwa przyciski nawigacyjne: „Wstecz” i „Dalej” na dole formularza. Przyciski te umożliwiają poruszanie się po formularzu aż do ostatniej strony, na której zwykle znajduje się przycisk Wyślij.

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

Jednakże w niektórych przypadkach możesz chcieć przejść bezpośrednio do następnej strony bez naciskania jakichkolwiek przycisków. W tym celu użyjemy procedury obsługi zdarzeń „nextStep”.

Uwaga: niektóre przypadki użycia, w których ta funkcja jest przydatna, to ankiety i/lub testy, w których nie można zmieniać odpowiedzi i pozwalają one na jak najszybsze wypełnienie ankiety.

Na przykład za pomocą poniższych linii kodu poinformujemy nasz formularz, że za każdym razem, gdy zostanie wybrany przycisk opcji, formularz przejdzie na następną stronę:

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

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

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

Prześlij wiele plików JavaScript i CSS do naszego formularza

Mając obiekt jQuery, możemy użyć funkcji jQuery.when().done() do załadowania wielu obiektów JavaScript i wykorzystania ich, gdy będą gotowe do użycia. Zobaczmy następujący przykład.

Wyświetl element DatePicker interfejsu użytkownika jQuery w polu daty

Na przykład w poniższych wierszach kodu pokażemy 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 for show the datepicker        $('input[type=date]').each(function () {            $(this).attr('type', 'text').after(                $(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')                    .datepicker({                        // Consistent format with the HTML5 picker                        dateFormat: 'mm/dd/yy',                        changeMonth: true,                        changeYear: true,                        altField: this,                        altFormat: "yy-mm-dd"                    })            )            .hide();        });    });});

Jak widać:

• Ładujemy 2 pliki w ramach funkcji When() : jquery-ui.css i jquery-ui.min.js .
• Wstawiliśmy funkcję, która uruchomi się po załadowaniu dwóch poprzednich plików na stronę w ramach funkcji Does() .
• Funkcja zasadniczo uruchamia 3 instrukcje:
  1. Znajdź wszystkie pola typu „ data ” i przekonwertuj każde pole „ data ” na „ tekst ”.
  2. Sklonuj każde pole daty w polu tekstowym, w którym jest wyświetlany element DatePicker.
  3. Ukrywa pole Date, gdyż jego wartość zostanie ustalona automatycznie przez DatePicker, na podstawie atrybutów: altField i altFormat .