MiniCRM Homokozó

Űrlap (átalakított)

MiniCRM-ben a "Részletesebb leírás" ablakban kapott teljes forráskódót webfejlesztője akár nagyobb mértékben is átalakíthatja. Ez a példa az űrlapot külön ablakban mutatja meg és dinamikusan megjelenített mezőt is tartalmaz. A találkozó kért időpontját csak akkor mutatja, ha az érdeklődőnek a vásárlás sürgős.


Kompatibilitás

Az alábbi HTML kód egy példa rendszerbe rögzít adatlapokat. Saját weboldalára MiniCRM rendszerében készített űrlapon kapott kódot másolja be!

MiniCRM Űrlap

Űrlap megjelenítése



Forráskód (részletes leírás)

Ebben a példában a MiniCRM űrlapjait az ingyenesen elérhető Bootstrap frameworkbe integráltuk. Más framework-be hasonló módon, annak dokumentációja és a lenti példák alapján lehet az integrációt elvégezni. A példa a Bootstrap dialógus ablak dokumentációja alapján készült. A lenti link nyitja meg az ablakot. 

<a href="#CRMForm" role="button" class="btn btn-large btn-primary" data-toggle="modal">Űrlap megjelenítése</a>

Az űrlap a MiniCRM szervereire küldi a beírt adatokat. Ehhez lenti javascript állományt kell beszúrnia weboldalának forráskódjába. A scriptre csak azokon az oldalakon van szükség, amelyeken MiniCRM űrlap található. Az űrlap scriptje mellé az egysoros beillesztő által is beszúrt naptár css-ét is beillesztettük, hogy a dátum mező "szépen" működjön az űrlapon. 

<div id="CRMForm" class="modal hide fade" tabindex="-1" role="dialog">
  <script src="https://r3.minicrm.hu/api/minicrm.js?t=1359985791"></script>
  <link href="https://r3.minicrm.hu/api/minicrm-calendar.css?t=1360164950" type="text/css" rel="stylesheet">

Tipp: Ha több űrlapot tesz egy oldalra, elég a fenti kódot egyszer beilleszteni.


Az űrlap "form" eleme tartalmazza annak egyedi azonosítóját, a FormHash attribútumban. Ez alapján ismeri fel a script a MiniCRM-es űrlapokat. Ha egy "form" elemen nincs ilyen attribútum, akkor azt nem küldi a MiniCRM szervereire. Ennek értéke határozza meg, hogy melyik rendszer és azon belül melyik űrlap beállításai legyenek érvényben, pl: kitöltendő mezők, köszönő oldal, megerősítő email, stb... 

  <form FormHash="21553-28eao3zn2t1mibmyhksj" class="form-horizontal">

Tipp: Ha az Ön által használt CMS rendszer kiveszi a form elemre tett extra paramétereket, akkor egy "MiniCRM_FormHash" nevű rejtett mezőben pótolhatja a hiányzó azonosítót. 

  <form> <input type="hidden" name="MiniCRM_FormHash" value="21553-28eao3zn2t1mibmyhksj">

Az alábbi kódrészlet készíti el a dialógus ablak fejlécéét. 

  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3 id="CRMFormLabel">Űrlap külön ablakban</h3>
  </div>
  <div class="modal-body">

Mezők körüli html kód szabadon megváltoztatható, ebben a példában a Bootstrap kinézethez szükséges formátumhoz igazodunk. A mezők "name" attribútumát NE változtassa meg! Az alapján azonosítja be a MiniCRM azt a mezőt, amibe az adatok kerülni fognak. Az "id" attribútum megváltoztatása esetén az adatok rögzítésre kerülnek, de esetleges kitöltési hibák esetén a script nem találja meg a mezőt. Ezért nem tud a hibás mezőre fókuszálni illetve arra hibát jelző css osztályt illeszteni. 

    <div class="control-group">
      <label class="control-label" for="Contact_LastName_1040">Vezetéknév</label>
      <div class="controls">
        <input type="text" name="Contact[1040][LastName]" id="Contact_LastName_1040" placeholder="pl.: Kovács">
      </div>
    </div>

A dátum mező esetén a MiniCRM űrlap generátora által készített naptár kódot is beillesztettük a mezőhöz, hogy a mezőbe kattintva a naptár megjelenjen. A Boostrap framework nem tartalmaz naptár mezőt, ezért használjuk a MiniCRM által biztosítottat. A dátum mezőt csak akkor akarjuk megmutatni, ha az érdeklődőnek sürgős a vásárlás. Ezért itt ez a mezőcsoport alapértelmezésben elrejtésre kerül (style="display: none;" a "control-group" div-en). A mezőcsoport kapott egy "DateControls" id-t, hogy később elrejtés/megjelenítés céljából könnyen megtalálható legyen. 

    <div class="control-group" id="DateControls" style="display: none;">
      <label class="control-label" for="Project_TalalkozoIdopontja_1038">Konzultáció napja</label>
      <div class="controls">
        <input type="text" id="Project_TalalkozoIdopontja_1038" type="text" name="Project[1038][TalalkozoIdopontja]" autocomplete=off>
        <script>
          try { 
            var picker = new Pikaday({ 
              field: document.getElementById("Project_TalalkozoIdopontja_1038"), 
              firstDay: 1, 
              showTimePicker: false, 
              format: "YYYY. MM. DD." 
           });} catch(e) {}
        </script>
      </div>
    </div>

A "Response_..." id-jű "div" elem alapértelmezésként nem látszik. Ha egy űrlap kitöltésében a MiniCRM hibát észlel, akkor a talált hibát ide írja be. Pl.: hiányzó kötelező mező, hibás formátumú emailcím, stb... Ebben a példában a CSS osztályt az eredetiről "alert alert-error"-ra módosítottuk, hogy a keretrendszer megjelenésébe illeszkedjen. 

    <div id="Response_21553-28eao3zn2t1mibmyhksj" style="display: none;" class="alert alert-error"></div>

Az űrlap elküldését indító gomb, amire szintén a keretrendszer által igényelt CSS osztály került. 

    <input type="submit" class="btn btn-primary" value="Feliratkozás" />

A dialógus ablak kódja után következik a rövid script, ami a feltételesen mutatandó mező mutatását és elrejtését végzi. A lenti példában jQuery-t használtunk, az esetlegesen megjegyzett mezőértékeket az oldal betöltődésekor kivesszük. A dátum mezők akkor látszanak, ha az Azonnal értéket (<option value="1776">Azonnal</option>) választja a látogató. 

<script>
  $(function() {
    $("#Project_Enum1071_1038").val("");
    $("#Project_TalalkozoIdopontja_1038").val("");
    $("#Project_Enum1071_1038").change(function() {
      var $DateControls = $("#DateControls"),
        $this = $(this);
      if($this.val() == "1776") {
        $DateControls.show(300);
      } else {
        $DateControls.hide(300);
      }
    });
  });
</script>

Forráskód (egyben)

A lenti kód példa

Az alábbi HTML kód egy példa rendszerbe rögzít adatlapokat. A rendszerből kapott teljes HTML kód az egysoros beillesztéssel megegyező megjelenést biztosítja. A lenti példa az előző (forráskód) alapján készült, az oldal megjelenéséhez igazodó módosításokkal és egyedi megoldásokkal. Ha saját weboldalára készít űrlapot, a MiniCRM rendszerében létrehozott űrlapon kapott kódot kezdje el módosítani igényei szerint! 
<a href="#CRMForm" role="button" class="btn btn-large btn-primary" data-toggle="modal">Űrlap megjelenítése</a>

<div id="CRMForm" class="modal hide fade" tabindex="-1" role="dialog">
  <script src="https://r3.minicrm.hu/api/minicrm.js?t=1359985791"></script>
  <link href="https://r3.minicrm.hu/api/minicrm-calendar.css?t=1360164950" type="text/css" rel="stylesheet">
  <form FormHash="21553-28eao3zn2t1mibmyhksj" class="form-horizontal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3 id="CRMFormLabel">Űrlap külön ablakban</h3>
  </div>
  <div class="modal-body">
    <div class="control-group">
      <label class="control-label" for="Contact_LastName_1040">Vezetéknév</label>
      <div class="controls">
        <input type="text" name="Contact[1040][LastName]" id="Contact_LastName_1040" placeholder="pl.: Kovács">
      </div>
    </div>          

    <div class="control-group">
      <label class="control-label" for="Contact_FirstName_1040">Keresztnév</label>
      <div class="controls">
        <input type="text" name="Contact[1040][FirstName]" id="Contact_FirstName_1040" placeholder="pl.: József">
      </div>
    </div>          

    <div class="control-group">
      <label class="control-label" for="Contact_Email_1040">Email</label>
      <div class="controls">
        <input type="text" name="Contact[1040][Email]" id="Contact_Email_1040" placeholder="pl.: felhasznalo@example.com">
      </div>
    </div>          

    <div class="control-group">
      <label class="control-label" for="Contact_Phone_1040">Telefon</label>
      <div class="controls">
        <input type="text" name="Contact[1040][Phone]" id="Contact_Phone_1040" placeholder="pl.: 06 (1) 123-4567">
      </div>
    </div>          

    <div class="control-group">
      <label class="control-label" for="Project_Enum1071_1038">Sürgősség</label>
      <div class="controls">
        <select  name="Project[1038][Enum1071]" id="Project_Enum1071_1038">
          <option value="" selected></option>
          <option value="1776">Azonnal</option>
          <option value="1777">Később</option>
          <option value="1778">Sokára</option>
        </select>
      </div>
    </div>          

    <div class="control-group" id="DateControls" style="display: none;">
      <label class="control-label" for="Project_TalalkozoIdopontja_1038">Konzultáció napja</label>
      <div class="controls">
        <input type="text" id="Project_TalalkozoIdopontja_1038" type="text" name="Project[1038][TalalkozoIdopontja]" autocomplete=off>
        <script>
          try { 
            var picker = new Pikaday({ 
              field: document.getElementById("Project_TalalkozoIdopontja_1038"), 
              firstDay: 1, 
              showTimePicker: false, 
              format: "YYYY. MM. DD." 
           });} catch(e) {}
        </script>
      </div>
    </div>          
  
    <div id="Response_21553-28eao3zn2t1mibmyhksj" style="display: none;" class="alert alert-error"></div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal">Mégse</button>
    <input type="submit" class="btn btn-primary" value="Feliratkozás" />
  </div>
  </form>
</div>

<script>
  $(function() {
    $("#Project_Enum1071_1038").val("");
    $("#Project_TalalkozoIdopontja_1038").val("");
    $("#Project_Enum1071_1038").change(function() {
      var $DateControls = $("#DateControls"),
        $this = $(this);
      if($this.val() == "1776") {
        $DateControls.show(300);
      } else {
        $DateControls.hide(300);
      }
    });
  });
</script>