[GELÖST] FormBuilder: image statt button, value setzen, focus / blur

[antiheld2000]

hi ho,

mehrere fragen zu formBuilder

1. ich würde gerne statt des standard-submit-buttons eines mit formbuilder gebauten formulares eine bilddatei benutzen. also so z. b.:

ist das möglich? wo kann ich das ganze einstellen?

2. ich kann ja den input-feldern einen value vordefinieren:
value_Firma='Bitte geben Sie Ihre Firma ein'
enthält der name jedoch ein leerzeichen, so weiss ich nicht wie ich den value vordefinieren kann. unter- bzw. bindestrich funktioniert nicht, leerzeichen erzeugt einen smarty error. wie spreche ich diese felder an?

3. ähnliches bei Emailfeld "Von (Email)"-feld. ich weiss nicht, wie ich dort den value setzen kann, da ich das feld nicht mit z. b.
value_Email='Bitte geben Sie Ihre E-Mail ein'
ansprechen kann.

4. wie kann ich denn jedem iput type="text" und jeder textarea dieses js anhängen?
onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;"
oder hat jemand eine schicke jquery variante parat ;o)

wenn hier jemand licht ins formBuilder-dunkel bringen könnte wäre grandios!

dank & gruss
anti

[NaN]

Also ehrlich gesagt hab ich den Formbuilder immer gemieden und lieber ein entsprechendes Modul geschrieben, dass das macht, was ich will. Es ist schwierig ein Fombuilder-Modul zu entwickeln, das dem Benutzer volle Flexibilität bei der Gestaltung seiner Formulare lässt und ihm gleichzeitig Arbeit abnimmt. Ich glaube der Bedarf an einem zufriedenstellenden Formulargenerator ist bei jedem CMS sehr hoch. Allein für Joomla fallen mir gleich fünf unterschiedliche Module ein... die ich allesamt zum Kotzen fand. Ich versuche seit einiger Zeit ebenfalls ein Formular-Modul für CMSms zu schreiben und verstehe jetzt, dass es besonders bei solchen Modulen zu äußerst schwierig zu bewältigen Problemen kommt.

Demzufolge hab ich auch wenig Erfahrung mit dem FormBuilder, aber...

zu 1.:

1. ich würde gerne statt des standard-submit-buttons eines mit formbuilder gebauten formulares eine bilddatei benutzen. also so z. b.:

ist das möglich? wo kann ich das ganze einstellen?

Soweit ich weiß, wird der Submitbutton automatisch generiert. Da kommst Du wohl nur über den PHP-Quellcode ran.
Oder Du machst folgendes:
Der Formbuilder gibt dem Submitbutton die CSS-Klasse fbsubmit. Damit kannst Du den Button auch via CSS formatieren, indem Du einfach ein Hintergrundbild dafür definierst.


zu 2. und 3.:

2. ich kann ja den input-feldern einen value vordefinieren:
value_Firma='Bitte geben Sie Ihre Firma ein'

Ähm... Kann man das? Find ich grad nicht.
Oder meinst Du etwas anderes?
Unter Value verstehe ich den Wert des Feldes. Also das was man eingeben kann.
Wo kann man soetwas wie "value_Firma='Bitte geben Sie Ihre Firma ein' " angeben?
Etwa im Template?
Bist Du Dir sicher, dass der Name für das Feld, den Du beim Erstellen des Feldes angeben kannst, auch der Name ist, den der Formbuilder im Template als Variable verwendet? Angesichts der Tatsache, dass der Name (also in diesem Falle das des Feldes) auch Sonderzeichen enthalten kann, kann ich mir gut vorstellen, dass der Formbuilder den Namen für die Templatevariablen in irgendeiner Form ändert. Wie z.B. beim automatischen Erstellen von Seiten-Aliases. Möglicherweise macht er ja aus Ä einfach nur A oder AE usw. (Du verstehst schon was ich meine, oder?)
Schau mal in den HTML-Quellcode bei der Ausgabe Deines Formulars im Browser. Was genau steht da für ein Wert bei dem Attribut "name"? Oder noch einfacher: Lass Dir die Templatevariablen mit Hilfe des Smarty-Tags {get_template_vars} in Deinem  Formulartemplate auf der Seite ausgeben. Und dann schau Dir mal die Variablennamen der Felder an, in denen Du Leerzeichen, Sonderzeichen oder Umlaute verwendest.

4. wie kann ich denn jedem input type="text" und jeder textarea dieses js anhängen?
onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;"
oder hat jemand eine schicke jquery variante parat ;o)

Ich weiß nicht ob und wie man da etwas einstellen kann, aber ich habe den Core von CMSms mal "ausgetrickst", weil ich beim Programmieren eines Moduls Probleme hatte, mit der Funktion CreateFormStart(...) dem Formular irgendein bestimmtes Attribut zuzuweisen, weil die Entwickler bei dieser Funktion wohl nicht an dieses Attribut gedacht hatten. Ohne jetzt am Core rumzufummeln und die Funktion anzupassen, habe ich einfach für ein anderes Attribut folgendes an die Funktion übergeben: Wert" id="... (wobei ID jetzt mal das von mir gewünschte zusätzliche Attribut sein soll)

Auf Deutsch:
Wenn Du z.B. für ein Feld eine CSS-Klasse definierst, macht der Formbuilder nur class="CSS-Klasse" daraus.
Wenn Du der CSS-Klasse aber einen Namen und ein Anführungszeichen gibst, macht der Fombuilder class="CSS-Klasse"" daraus.
(Was im Browser zu Validitätsproblemen führt.)
Du ahnst es schon.
Gib doch mal für die CSS-Klasse folgendes an:
Name der CSS-Klasse" "onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;
Wichtig: Das letzte Anführungszeichen weglassen.
Ist nicht optimal die Lösung, aber die Erste, die mir dazu einfällt.

[antiheld2000]

ich beschäftige mich ja erst seit zwei wochen mit dem cms, somit kenn ich mich noch nicht so gut damit aus, ergo schreibe ich mir noch keine eigenen module. aber was noch nicht ist, kann ja noch werden.

1.

Der Formbuilder gibt dem Submitbutton die CSS-Klasse fbsubmit. Damit kannst Du den Button auch via CSS formatieren, indem Du einfach ein Hintergrundbild dafür definierst.

schöner gedankenanstoss. weiss nicht, wie cross browser konform das ganze ist, ist aber vorerst ein sehr guter workaround

2. und 3.

Ähm... Kann man das? Find ich grad nicht.

jau, das kann man. im auf in der inhaltsseite. z.b.
{
cms_module
module='FormBuilder'
form='kontaktformular'
value_Name='Bitte geben Sie Ihren Namen ein'
value_Firma='Bitte geben Sie Ihre Firma ein'
value_Email='Bitte geben Sie Ihre E-Mailadresse ein'
value_Telefon='Bitte geben Sie Ihre Telefonnummer ein'
value_Anliegen='Wie können wir Ihnen weiterhelfen'
}
wobei für das vordefinierte feld email es nicht in dieser weise funktioniert

4.

Ist nicht optimal die Lösung, aber die Erste, die mir dazu einfällt.

schade, geht nicht, aer auch ein spitzenansatz die css-klasse wird uneleganterweise einem div zugewiesen, welches um das inputelement herumgelegt wird.

sehr schöne workaround ansätze, aber leider nicht die richtigen lösungen dabei.
dank und gruss
anti

[NaN]

ich beschäftige mich ja erst seit zwei wochen mit dem cms, somit kenn ich mich noch nicht so gut damit aus, ergo schreibe ich mir noch keine eigenen module. aber was noch nicht ist, kann ja noch werden.

Nur zu

schöner gedankenanstoss. weiss nicht, wie cross browser konform das ganze ist, ist aber vorerst ein sehr guter workaround

Die CSS-Eigenschaft "background-image" gehört schon seit CSS 1.0 dazu und wird von allen derzeit gängigen Browsern interpretiert.
Nach meiner Erfahrung machen bei der Formatierung von Input-Elementen nur die OS-implementierten Browser (IE/Safari) noch Mätzchen. Beisst sich glaub ich mit der GUI des OS.

jau, das kann man. im auf in der inhaltsseite. z.b.
{
cms_module
module='FormBuilder'
form='kontaktformular'
value_Name='Bitte geben Sie Ihren Namen ein'
value_Firma='Bitte geben Sie Ihre Firma ein'
value_Email='Bitte geben Sie Ihre E-Mailadresse ein'
value_Telefon='Bitte geben Sie Ihre Telefonnummer ein'
value_Anliegen='Wie können wir Ihnen weiterhelfen'
}
wobei für das vordefinierte feld email es nicht in dieser weise funktioniert

Aha. Als Parameter also. Die Namen der Parameter entsprechen den Namen der Variablen im PHP-Script (bzw. den Indizes des Arrays $params. Daher dürfen sie keine Umlaute, Leer- oder Sonderzeichen enthalten. Deshalb glaube ich, dass ich mit meiner Theorie, dass der Formbuilder diese Namen für sein Script umbenennt, nicht so falsch liege. D.h. Du kannst also nicht davon ausgehen, dass Du die Namen 1:1 als Parameter verwenden kannst.
Schau mal in Deiner Datenbank in die Tabellen des Formbuilders. Eventuell gibt es dort Spalten für den "realen Namen" und den "Variablen-Namen".
Die Umwandlung könnte natürlich auch erst im Script stattfinden. Da muss ich nochmal schauen.
Falls es nur um Leerzeichen geht, lass die doch einfach mal weg und schreib alles direkt hintereinander. (also value_bittenameneingeben=...)
Eventuell könnte es auch helfen anstelle der Leerzeichen %20 zu schreiben.

...die css-klasse wird uneleganterweise einem div zugewiesen, welches um das inputelement herumgelegt wird.

Hm, da muss ich den Quellcode nochmal durchforsten.

[antiheld2000]

So, ich fasse für die Nachwelt noch einmal alle Workarounds zu meinen Fragen zusammen:

zu 1.:
Button per CSS ein Hintergrundbild zuweisen (bekommt sich mit Antwort zu 4. in die Haare) etc. Beispielcode:

Code: Select all

.fbsubmit {
	background:transparent url(images/back_btn.png) no-repeat; /* Bilddatei */
	border:none; /* rahmen ausblenden */
	width:110px; /* bildhoehe */
	height:20px; /* bildbreite */
	color:#fff; /* schrftfrabe */
}

zu 2. und 3.:
Einfach die Felder so benennen, dass Sie weder Sonderzeichen noch Leerzeichen beinhalten. Sollte ja in den meisten Fällen machbar sein.

zu 4.:
Eine jQuery Lösung, noch nicht voll ausgearbeitet (z. B. Submit Button Beschriftung verschwindet n focus), aber schonmal ein guter Ansatz:

Code: Select all

$(document).ready(function(){
	$('input, textarea').bind('focus', function() {
		oldValue = $(this).val();
		$(this).val('');
	});
	$('input, textarea').bind('blur', function() {
		newValue = $(this).val();
		if (newValue == '') {
			$(this).val(oldValue);
		}
	});
});

Aufgrund dieser schönen Workarounds setz ich das Topic mal auf gelöst. Feel free to mach weiter mit the Thema.