Czy mogę zaprogramować swój formularz pop over tak, by pojawiał się na stronie po kliknięciu w link lub przycisk?

Kreator formularzy GetResponse pomoże Ci w stworzeniu formularza, który pokaże się odwiedzającym w momencie otwarcia strony. Dzięki niewielkiej zmianie kodu możesz go również zaprogramować tak, by pojawiał się przy kliknięciu w dany link lub przycisk na stronie.

Tworzenie formularza pop-over

Otwórz istniejący plik lub stwórz nowy. Kliknij w dowolny szablon, a następnie w „layout” po prawej. W „widoku” wybierz pop over, dostosuj go do swoich potrzeb, a następnie zaznacz “zapisz i opublikuj”.

Konfiguarcja skryptu formularza

Jeśli chcesz, by formularz pojawiał się przy kliknięciu w wybrany link na stronie, skorzystaj z API JS. Umieść konfigurację kodu w formacie JSON wewnątrz taga [ <script>], skopiowanego  w kroku „zapisz i opublikuj” w kreatorze formularzy.

Poniżej znajdują się przykładowe fragmenty kodu, ilustrujące jak poprawnie skonfigurować formularz przez API JS.

Configuration

{

“name”: “myuniqueformname”,

“selector”: {

“clickToShow”: “#id_click_to_show_element”,

“clickToHide”: “#id_click_to_hide_element”

}

}

Description

“name” – REQUIRED – String – unique identifier

“selector” – OPTIONAL – Object

-> “clickToShow” – OPTIONAL – String – DOM element selector (html element on your website, when clicked shows form)

-> “clickToHide” – OPTIONAL – String – DOM element selector (html element on your website, when clicked close form)

Example

<!doctype html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

</head>

<body>

<a href=”#” id=”id_click_to_show_element”>Show it</a>

<script type=”text/javascript” src=”https://app.getresponse.com/view_webform_v2.js?u=Xun&webforms_id=1023903“>

{

“name”: “myuniqueform1”,

“selector”: {

“clickToShow”: “#id_click_to_show_element”

}

}

</script>

</body>

</html>

Ważne:

  1. JSON wewnątrz tagów <script> musi być poprawny, kliknij w http://jsonlint.com by sprawdzić swój skrypt.
  2. Powyższej konfiguracji nie można stosować w formularzach inline.

Możesz również użyć klucza API bezpośrednio w kodzie Javascript (odnosząc się do obiektu GRWF2)

var myform = GRWF2.get(“myuniqueformname”) – get refference to “myuniqueformname” instance of Form object

myform.show() – show form

myform.hide() – hide form

<!doctype html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

</head>

<body>

<button id=”button” >Show it</button>

<script type=”text/javascript” src=”https://app.getresponse.com/view_webform_v2.js?u=Xun&webforms_id=1023903“>{

“name”: “myuniqueform2”

}

</script>

<script>

var myform = GRWF2.get(‘myuniqueform2’),

element = document.getElementById(‘button’);

element.addEventListener(“click”, function(){

myform.show();

});

</script>

</body>

</html>

Twoja satysfakcja jest dla nas najważniejsza, nie jesteśmy jednak w stanie zapewnić wsparcia dla edycji HTML Twojej strony. Jeśli masz wątpliwości, jak ją skonfigurować, skontaktuj się ze swoim programistą.