MiFaZ-Partnerprogramm
MiFaZ - Schnittstelle - Formular-Variante
Hier finden Sie ein vollständiges Beispiel für ein Formular, dass Sie auf Ihrer Webseite einbinden können.
Formular - Ansicht
Quelltext des Formulars
<style type="text/css">
.locationname,.floattext
{
float:left;
}
#ortseingabe
{
border: 1px dotted black;
margin:10px;
}
.locationname
{
width:70px;
}
.pmifaz
{
clear:left;
margin: 5px;
}
</style>
<form method="post" name="inputform" action="http://www.mifaz.de/widget/suchanfrage.html?nospecify=1" target="_blank">
<div id="ortseingabe">
<p class="pmifaz">
Ich
<select class="" name="offeringLooking" size="1" id="offeringLooking">
<option value="2" selected="selected">biete & suche</option>
<option value="1">biete</option>
<option value="0">suche</option>
</select>
eine Mitfahrgelegenheit.
</p>
<p class="pmifaz">
<div class="locationname"><label for="loc0">Startort:</label></div>
<div class="locationinput"><input name="loc0" class="locinput" id="loc0" type="text"></div>
</p>
<p class="pmifaz">
<div class="locationname"><label for="loc1">Zielort:</label></div>
<div class="locationinput"><input name="loc1" class="locinput" id="loc1" type="text"></div>
</p>
<p class="pmifaz">
<input name="regdat" value="1" class="" id="regdatreg" checked="checked" type="radio">
<label for="regdatreg"><strong>öfter</strong></label>
</p>
<p class="pmifaz">
<input name="regdat" value="2" class="" id="regdatsingle" type="radio">
<select tabindex="1" name="dtag" id="dtag" size="1"
onchange="getElementById('regdatreg').checked=false; getElementById('regdatsingle').checked=true;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10" selected="selected">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="dmonat" id="dmonat" size="1"
onchange="getElementById('regdatreg').checked=false; getElementById('regdatsingle').checked=true;">
<option value="1">Januar</option>
<option value="2">Februar</option>
<option value="3">März</option>
<option value="4">April</option>
<option value="5">Mai</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11" selected="selected">November</option>
<option value="12">Dezember</option>
</select>
<select name="djahr" id="djahr" size="1"
onchange="getElementById('regdatreg').checked=false; getElementById('regdatsingle').checked=true;">
<option value="2009" selected="selected">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
Toleranz +/-
<select name="datetolerance" size="1"
onchange="getElementById('regdatreg').checked=false; getElementById('regdatsingle').checked=true;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
Tage
</p>
<div class="divttime">
<p class="pmifaz">
<select class="" name="ttime" size="1">
<option selected="selected" value="0">Bitte wähle</option>
<option value="1">Ungefähre Abfahrtszeit</option>
<option value="2">Ungefähre Ankunftszeit</option>
</select>
Zwischen <select name="timebeginhourstart" id="timebeginhourstart">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7" selected="selected">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
:<select name="timebeginminutestart" id="timebeginminutestart">
<option value="00" selected="selected">00</option>
<option value="15">15</option><option value="30">30</option><option value="45">45</option></select>
und <select name="timebeginhourend" id="timebeginhourend">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8" selected="selected">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
:<select name="timebeginminuteend" id="timebeginminuteend">
<option value="00" selected="selected">00</option>
<option value="15">15</option><option value="30">30</option><option value="45">45</option></select>
Uhr.
</p>
</div>
<div class="nonsmoking">
<p class="pmifaz">
<input name="nonsmoking" value="1" class="" id="nonsmoker" type="radio" />
<label for="nonsmoker">nur Nichtraucher</label>
<input name="nonsmoking" value="2" class="" id="smokingisok" type="radio" />
<label for="smokingisok">Rauchen im Auto</label>
<input name="nonsmoking" value="3" class="" id="smokingnomatter" checked="checked" type="radio" />
<label for="smokingnomatter">egal</label>
</p>
</div>
<div class="driver">
<p class="pmifaz">
<input name="driver" value="1" class="" id="maleprefer" type="radio" />
<label for="maleprefer">männlicher Anbieter bevorzugt</label>
<input name="driver" value="2" class="" id="femaleprefer" type="radio" />
<label for="femaleprefer">weiblicher Anbieter bevorzugt</label>
<input name="driver" value="3" class="" id="maleorfemale" checked="checked" type="radio" />
<label for="maleorfemale">egal</label>
</p>
</div>
<p class="pmifaz">
<input type="submit" value="Suchen" id="searchbutton" />
</p>
</div>
</form>
Dokumentation
Sie können alle Felder im Formular entfernen, die Sie nicht benötigen, bis natürlich auf den Startort und den Zielort
Sie können den Zielort auch unveränderlich festlegen, indem Sie ihn einfach als HIDDEN-Formularfeld übergeben.
Der Parameter nospecify=1 im Action-Tag unterbindet eine Abfrage nach Ortsteilen. Gibt der Anwender z.B. München ein, wird bei nospecify=1 nicht weiter hinterfragt. Wird der Parameter weggelassen, muss der Anwender ggf. erst einen Ortsteil spezifizieren
Die oben angegebenen Styles können Sie nach Belieben in Ihre eigene css-Datei einbauen. Sie können die Styles und deren Namen völlig Ihren Bedürfnissen bzw. denen Ihrer Website :-) anpassen.
Das Action-Tag führt auf das MiFaZ-Verzeichnis /widget/. Dort wird ein stark vereinfachte enges Template zur Anzeige benutzt, was sich auch gut zur Anzeige innerhalb IFrames eignet. Sie können aber natürlich auch direkt auf die MiFaZ Hauptseite verlinken. Das Design des MiFaZ-Widget-Template können Sie mit den gleichen Parametern, wie beim Widget ändern. Doku folgt hier noch...