FormBuilder

Hilfe zu Modulen und Tags
Post Reply
new.matreix
Forum Members
Forum Members
Posts: 22
Joined: Tue Mar 18, 2008 10:39 am

FormBuilder

Post by new.matreix »

Hallo Zusammen,

Wie kann ich die Input Felder mit CSS stylen die vom FormBuilder generiert werden? Ich verwende das Tabellen klink template also:

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}
	{$fb_hidden}

    <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}
	    		{$entry->input}
	    	{/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}
NaN

Re: FormBuilder

Post by NaN »

Habe den FormBuilder selber noch nie benutzt. Aber soweit ich weiß, kann man da beim Erstellen eines Input-Feldes eine CSS-Klasse oder ID für dieses Feld festlegen.
Im Template wird auch auf eine Variable namens $entry->css_class zugegriffen.
Schau Dir mal im Backend die einzelnen Felder des Formulars nochmal genau an.
Und dann wirf mal einen Bilck in den Quelltext der HTML-Ausgabe im Browser und suche nach Deinen Input-Feldern.
Da sollte diese Klasse dann drin stehen.
eh
Forum Members
Forum Members
Posts: 29
Joined: Sun Oct 07, 2007 1:19 pm

Re: FormBuilder

Post by eh »

Habe mein mit dem Form-Builder erstelltes Formular über eine CSS-Klasse "gestylt". Du kannst die CSS-Klasse im Form-Builder festlegen und dann an passender Stelle die CSS-Anweisungen hinterlegen.

Unten als Beispiel meine CSS-Anweisungen (der Klassenname ist "meinkontakt"), wobei diese nicht für das Tabellen-Template sondern für das "barrierefreie" Template mit 's sind. Letztlich musst du halt jene HTML-Tags in CSS formatieren, welche durch den FormBuilder ausgegeben werden (siehe auch Nan's Kommentar). Das Resultat siehst du in der beigefügten Bilddatei.

Das Formatieren von Formularelementen hat aber so seine Tücken, bspw. kann Firefox (und Opera) fast jede Art von Formularelementen nach deinen Wünschen darstellen, IE ist da schon etwas zickiger.

Hier noch zwei Links als Einstieg:

http://www.style-sheets.de/guide/formulare/formulare_per_css_layouten
http://forum.cmsmadesimple.org/index.php/topic,20632.msg100466.html#msg100466

Code: Select all

/*
 * Kontaktformular.
 */

.meinkontakt fieldset {
    padding: 1em;
    background: #eee url(xinli_images/xinli_logo_s_web.gif) no-repeat  98% 3%;
    border: 1px solid #B0B0B0;
    margin-bottom: 1em;
}

.meinkontakt fieldset legend {
    font-weight: bold;
}

.meinkontakt fieldset div {
    width: 99%;
    float: left;    /* Für IE */
    padding: 0.25em 0 0.25em 0;
    float: left;    /* Für IE */
}

.meinkontakt fieldset label {
    display: block;
    float: left;
    width: 6.5em;
    height: 1.2em;
    margin-top: 0.4em;
}

.meinkontakt fieldset input {
    color:  #555555;
    width: 20em;
}

.meinkontakt fieldset select {
    color:  #555555;
    width: 20em;
}

.meinkontakt fieldset textarea {
    color:  #555555;
    float: left;
    width: 100%;
    margin-top: 0.2em;
}
Attachments
kontakt_form.PNG
Last edited by eh on Tue May 06, 2008 8:20 am, edited 1 time in total.
Post Reply

Return to “Module und Tags”