Formbuilder: Pflichtfelder Rot makieren lassen

[skibby]

Hallo zusammen,

ich habe mir ein Kontaktformular erstellt. Versand und übernahmen klappt alles wunderbar. Jetzt möchte ich aber gerne die blöde Schrift weghaben, wenn ein Feld nicht ausgefüllt wurde.

Anstelle des Textes würde ich gern das Eingabe Feld Rot markieren lassen. Das man direkt sieht das etwas fehlt. Ich hab da schon ein paar versuche angestellt, Endeten am meiste damit das man mir ein neues Eingebafeld erstellt hat, welches dann rot war.

Hat jemand sowas vielleicht schon mal gemacht und kann da helfen?


Lieben Gruß skibby

[NaN]

Gemacht schon, allerdings nicht mit dem Formbuilder.
Hab den {contact_form}-Tag so angepasst, das da z.B. noch ein Javascript vor dem Absenden die Eingaben prüft und für diese Felder zusätzliche CSS-Klassen vergibt.

Beispiel

Ich weiß jetzt nicht wie der Formbuilder da mit Pflichtfeldern umgeht bzw. wie das Formular überhaupt beim Formbuilder zustande kommt.
Hast du mal ein Template zum anschauen?
Evtl. könnte man mit entsprechenden {if}-Abfragen auch Deinem Feld eine bestimmte CSS-Klasse geben.
Im Stylesheet musst Du dann nur angeben wie Felder dieser KLasse aussehen sollen.

[nicmare]

Habe ich mal für einen Kunden aus dem Barcatering Bereich gemacht.
Aber vorsichtig! nicht alles ausfüllen, sonst wundert sich der kunde
ist mit jquery gemacht. Ich fange also die standardabfrage vom Modul ab und zwar clientseitig (statt vom server). Ist von der Bedienung sehr angenehm und eindeutig.

[skibby]

Bei mir ist noch alles standard im Template.

Ich würde mich freuen wenn ihr mir den Quellcode zulassen kommen könntet mit den roten markierungen. Das sieht wirklich sehr gut aus!

Code: Select all

{* TABLE FORM LAYOUT / Field titles on Left *}
{* next line sets number of columns for things like checkbox groups *}
{assign var="cols" value="3"}
{$fb_form_header}
{if $fb_form_done == 1}
	{* This first section is for displaying submission errors *}
	{if $fb_submission_error}
		<div class="error_message">{$fb_submission_error}</div>
		{if $fb_show_submission_errors}
			<table class="error">
			{foreach from=$fb_submission_error_list item=thisErr}
				<tr><td>{$thisErr}</td></tr>
			{/foreach}
			</table>
		{/if}
	{/if}
{else}
	{* this section is for displaying the form *}
	{* we start with validation errors *}
	{if $fb_form_has_validation_errors}
		<div class="error_message">
		<ul>
		{foreach from=$fb_form_validation_errors item=thisErr}
			<li>{$thisErr}</li>
		{/foreach}
		</ul>
		</div>
	{/if}
	{if $captcha_error}
		<div class="error_message">{$captcha_error}</div>
	{/if}

	{* and now the form itself *}
	{$fb_form_start}
	<div>{$fb_hidden}</div>

    <table{if $css_class != ''} class="{$css_class}"{/if}>
    {if $total_pages gt 1}<tr><td colspan="2">{$title_page_x_of_y}</td></tr>{/if}
    {foreach from=$fields item=entry}
	  {if $entry->display == 1 &&
	    $entry->type != '-Fieldset Start' &&
	    $entry->type != '-Fieldset End' }
	    <tr>
	    	{strip}
	    	<td align="right" valign="top"
	    	{if $entry->required == 1 || $entry->css_class != ''} class=" 
	    		{if $entry->required == 1}
	    			required
	    		{/if}
	    		{if $entry->required == 1 && $entry->css_class != ''} {/if}
	    		{if $entry->css_class != ''}
	    			{$entry->css_class}
	    		{/if}
	    		"
	    	{/if}
	    	>
	    	{if $entry->hide_name == 0}
	    		{$entry->name}
	    		{if $entry->required_symbol != ''}
	    			{$entry->required_symbol}
	    		{/if}
	    	{/if}
	    	</td><td align="left" valign="top"{if $entry->css_class != ''} class="{$entry->css_class}"{/if}>
	    	{if $entry->multiple_parts == 1}
    		<table>
					<tr>
				{section name=numloop loop=$entry->input}
	    			<td>{$entry->input[numloop]->input} {$entry->input[numloop]->name}{if $entry->input[numloop]->op} {$entry->input[numloop]->op}{/if}</td>
	    			       {if not ($smarty.section.numloop.rownum mod $cols)}
                				{if not $smarty.section.numloop.last}
                        		</tr><tr>
                				{/if}
        					{/if}
       				{if $smarty.section.numloop.last}
                		{math equation = "n - a % n" n=$cols a=$entry->input|@count assign="cells"}
                		{if $cells ne $cols}
                			{section name=pad loop=$cells}
                        		<td> </td>
                			{/section}
               		 	{/if}
                		</tr>
        			{/if}
	    		{/section}
	    		</table>
	    	{else}
	    		{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}
	    	{/if}
	    	{if $entry->valid == 0} <--- {$entry->error}{/if}
	    	</td></tr>
	    	{/strip}
	  {/if}
{/foreach}
{if $has_captcha == 1}
<tr><td>{$graphic_captcha}</td><td>{$input_captcha}<br />{$title_captcha}</td></tr>
{/if}
<tr><td>{$prev}</td><td>{$submit}</td></tr>
</table>
{$fb_form_end}
{/if}
{$fb_form_footer}

[skibby]

Wenn ihr mir den Code nicht geben wollt, ist das ok. Dann sagt das aber bitte. Mit nichts sagen kann ich ehrlich gesagt nicht viel anfangen.

[nicmare]

du brauchst am formbuilder nichts machen. nur das js im template einsetzen und anpassen. habe dir nur den weg gezeigt, den rest musst du schon selber machen freund blase

[NaN]

Wenn ihr mir den Code nicht geben wollt, ist das ok. Dann sagt das aber bitte. Mit nichts sagen kann ich ehrlich gesagt nicht viel anfangen.

Da es sich um ein OpenSource Projekt handelt, sind alle Modifikationen von Modulen/Plugins etc. oder auch eigene Module, die auf der CMSms API aufbauen als Derivate von CMSms anzusehen und stehen somit auch unter der GPL.

Was im Klartext bedeutet:

Ich bin zwar nicht vepflichtet meine Modifikationen zu veröffentlichen oder kostenlos bereitszustellen,
wenn aber jemand danach fragt, dann bin ich gezwungen ihm Quellcode etc. auszuhändigen.
Was aber wiederum nicht bedeutet, dass dies ohne Gegenleistung geschehen muss.

D.h., wenn Du den gleichen Preis zahlst wie der Kunde für den dieser Code zustande kam, dann kannst Du gerne alles haben.

Soviel zu meiner Auffassung der GPL.
Kann mich da auch irren.


Zu dem Formular, wenn Dir der {contact_form} Tag ausreicht, kannst Du meine Variante gerne haben.
Habe die Datei nur leider nicht zur Hand und habe auch keinen FTP Zugang zu dem Server wo die Datei liegt.
Bin einfach viel unterwegs.
Daher hab einfach etwas Geduld.

Wie man Formulardaten mit jQuerry abfangen kann, kann ich Dir leider nicht sagen, da ich mich mit jQuerry noch nicht befasst habe.
Habe vor kurzem gerade mal das Prinzip von AJAX verstanden.

Ich hatte leider auch noch keine Zeit, mich durch Dein Formular-Template durchzuarbeiten.
Aber ich bin mir sicher, dass es auch im Template geregelt werden kann.
Dann läuft die Überprüfung zwar Serverseitig, aber das würde ich so oder so immer noch zusätzlich empfehlen, falls z.B. jemand Javascript deaktiviert hat.

[skibby]

ich ich irgendwas verpasst?? Das js kommt aber nicht alleine zu mir. Gibt es da irgendwelche öffentliche Quellen?? Oder ist dein js selbst geschrieben?

[dietzi]

So wie hier http://www.wuerfl.info/index.php/de/kontakt

Oder schon gelöst?

Dietmar

[dietzi]

Verwendet habe ich das pure CSS-Formular, wie es FB mitbringt. Mein Formular habe ich zwar mit den YAML-Klassen aufgebaut, aber für diese Änderung ist das unerheblich.

Ich verwende jetzt nicht den Codeblock, damit ich Anmerkungen formatieren kann. Am Beginn des Templates befindet sich folgender Code:
{if $fb_form_done == 1}
{* This first section is for displaying submission errors *}
{if isset($fb_submission_error) && $fb_submission_error}
{$fb_submission_error}
{if isset($fb_show_submission_errors) && $fb_show_submission_errors}


{foreach from=$fb_submission_error_list item=thisErr}
{$thisErr}
{/foreach}


{/if}
{/if}
{else}
{* this section is for displaying the form *}
{* we start with validation errors *}
{if isset($fb_form_has_validation_errors) && $fb_form_has_validation_errors}

Der folgende UL-Block ist für die Fehlermeldungen am Formularkopf bei nicht ausgefüllten Feldern zuständig. Also auskommentieren(löschen) und mit eigener Meldung ersetzen.

{foreach from=$fb_form_validation_errors item=thisErr}
{$thisErr}
{/foreach}
-->
Bitte füllen Sie alle gekennzeichneten Felder aus!

{/if}

Eher am Ende des Templates folgender Code:
          {if $entry->multiple_parts == 1}
            {section name=numloop loop=$entry->input}
                {if $entry->label_parts == 1}
                {$entry->input[numloop]->input} {$entry->input[numloop]->name}
                {else}
                {$entry->input[numloop]->input}
                {/if}
                {if isset($entry->input[numloop]->op) && $entry->input[numloop]->op}{$entry->input[numloop]->op}{/if}
            {/section}
          {else}
            {if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}
          {/if}
Die nächste Zeile ist dafür verantwortlich, dass hinter jedem Feld dieser hässliche Pfeil auftaucht, also den Inhalt zwischen der if-Abfrage löschen
          {if $entry->valid == 0} <--- {$entry->error}{/if}
          {if $entry->needs_div == 1}
           
          {/if}
          {/strip}

Das sind die Änderungen am Code. FB gibt jedem notwendig definiertem, aber nicht ausgefülltem Feld die Klasse "fb_invalid" (Zur Sicherheit in den Quelltext schauen). Wie man das mit CSS formatiert, bleibt dem persönlichen Geschmack überlassen.

Das war's, ich hoffe es haben sich keine Fehler eingeschlichen.

Dietmar

[skibby]

Hallo Dietmar,

leider muss ich dich enttäuschen. Das klappt garnet. Ich kriege auch keine "fb_invalid" Felder. KÖnntest du mir den kompletten Code zukommen lassen?? Ich würde mir den dann zurecht basteln.

Danke

Gruß skibby

[dietzi]

Das macht wenig Sinn, ich habe zuviele Layoutänderungen. Außerdem finde ich es sinnvoll, die Prozedur öffentlich zu halten, eventuell können andere profitieren.

Diese 2 Codeblöcke zum ändern sind in jedem Form-Template enthalten. Wenn Du die änderst, dürftest Du im 1. Schritt keine Fehlermeldungen mehr erhalten. Klappt es denn soweit? Zwischenspeichern vorerst deaktivieren oder Cache leeren.

Und im 2. Schritt formatierst Du die Ausgabe. Es wird die Klasse "required" für Pflichtfelder verwendet und die Klasse "fb_invalid" für nicht ausgefüllte Pflichtfelder. Zumindest in der aktuellen Version 0.5.11.

Beschreib doch genau, was Du tust und welche Fehler auftreten. Ist das Formular schon online?

Dietmar

[skibby]

So ganz will es net. Sobald ich den ersten Block einfüge haut der mir schon fehler raus. Diesen Block habe ich eingefügt:

Code: Select all

{if $fb_form_done == 1}
   {* This first section is for displaying submission errors *}
   {if isset($fb_submission_error) && $fb_submission_error}
      <div class="error_message">{$fb_submission_error}</div>
      {if isset($fb_show_submission_errors) && $fb_show_submission_errors}
         <div class="error">
         <ul>
         {foreach from=$fb_submission_error_list item=thisErr}
            <li>{$thisErr}</li>
         {/foreach}
         </ul>
      </div>
      {/if}
   {/if}
{else}
   {* this section is for displaying the form *}
   {* we start with validation errors *}
   {if isset($fb_form_has_validation_errors) && $fb_form_has_validation_errors}
      <div class="error_message">

Direkt danach kommen diese Fehler zustande:

Code: Select all

string(253) "Smarty error: [in tpl_head:22 line 17]: syntax error: unrecognized tag: $("div.required label").append("*"); $("#m7moduleform_4").validate({ rules: { m7fbrp__51: { required: true (Smarty_Compiler.class.php, line 446)" string(111) "Smarty error: [in tpl_head:22 line 17]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(149) "Smarty error: [in tpl_head:22 line 22]: syntax error: unrecognized tag: required: true, Name, Vorname: true (Smarty_Compiler.class.php, line 446)" string(111) "Smarty error: [in tpl_head:22 line 22]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(141) "Smarty error: [in tpl_head:22 line 24]: syntax error: unrecognized tag: required: true, email: true (Smarty_Compiler.class.php, line 446)" string(111) "Smarty error: [in tpl_head:22 line 24]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(124) "Smarty error: [in tpl_head:22 line 26]: syntax error: unrecognized tag: required: true (Smarty_Compiler.class.php, line 446)" string(111) "Smarty error: [in tpl_head:22 line 26]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(168) "Smarty error: [in tpl_head:22 line 28]: syntax error: unrecognized tag: m4fbrp__51: { required: "Wer ist der Ansprechpartner?" (Smarty_Compiler.class.php, line 446)" string(111) "Smarty error: [in tpl_head:22 line 28]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(209) "Smarty error: [in tpl_head:22 line 30]: syntax error: unrecognized tag: required: "Bitte E-Mail Adresse angeben!", email: "Bitte eine gültige E-Mail Adresse angeben!" (Smarty_Compiler.class.php, line 446)" string(111) "Smarty error: [in tpl_head:22 line 30]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(150) "Smarty error: [in tpl_head:22 line 32]: syntax error: unrecognized tag: required: "Bitte Telefonnummer angeben!" (Smarty_Compiler.class.php, line 446)" string(111) "Smarty error: [in tpl_head:22 line 32]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)"

Ich find den Fehler nur net!

Gruß skibby