[SOLVED] Understanding the standard CSS template for FormBuilder forms

[dtism]

Can anyone help a dunce (yes, me) understand how I can manipulate the standard CSS template in FormBuilder?

I basically want to force the Field labels to be above the input areas so that things line up better.

The template currently looks like this, and am a bit lost as to which bits control the label and which bits control the input areas.
The actual contact form is here: http://www.fentonwalsh.com/index.php?page=feedback

Code: Select all

{$hidden}

<div{if $css_class != ''} class="{$css_class}"{/if}>

{if $total_pages gt 1}<span>{$title_page_x_of_y}</span>{/if}

{foreach from=$fields item=entry}

	  {if $entry->display == 1}

	    	{strip}

	    	{if $entry->needs_div == 1}

            <div

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

	    	{if $entry->hide_name == 0}

    		   <label{if $entry->multiple_parts != 1} for="{$entry->input_id}"{/if}>{$entry->name}

    		{if $entry->required_symbol != ''}

	    			{$entry->required_symbol}

	    		{/if}</label>

{else if $entry->required_symbol != ''}{$entry->required_symbol}

		    	{/if}

	    	{if $entry->multiple_parts == 1}

				{section name=numloop loop=$entry->input}

	    			{if $entry->label_parts == 1}<div>{$entry->input[numloop]->input} {$entry->input[numloop]->name}</div>

	    			{else}{$entry->input[numloop]->input}

	    			{/if}

	    		{/section}

	    	{else}

	    		{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}

	    	{/if}

	    	{if $entry->valid == 0} <--- {/if}

         {if $entry->needs_div == 1}

            </div>

         {/if}

	    	{/strip}

	  {/if}

{/foreach}

{if $has_captcha == 1}

<div class="captcha">{$graphic_captcha}{$title_captcha}<br />{$input_captcha}</div>

{/if}

<div class="submit">{$prev}{$submit}</div>

</div>

Any advice will me be much appreciated.

Doug

[sarah_h]

Hi,

Just been working with FB. As using the default CSS the field are above the form fields! You won't want to modify the form template but the forms' CSS as the form uses pure CSS layout so I'd leave the form template as it is and look in to the form's CSS instead. That's the beauty of separating the form logc from the styling. Have a look at a post I just made here:

http://forum.cmsmadesimple.org/index.php/topic,18630.0.html

Sarah

[musicscore]

you really can style the form using CSS.
Take a look at my demo site :

http://cmsms-demo.infowebs.nl/index.php?page=contact-form

This form is styled with css.

Musicscore

[dtism]

Thanks sarah and musicscore. I'll persevere with the css.

[jclanin]

Just found this thread - where is the form CSS located?

thanks,

JC

Hi,

Just been working with FB. As using the default CSS the field are above the form fields! You won't want to modify the form template but the forms' CSS as the form uses pure CSS layout so I'd leave the form template as it is and look in to the form's CSS instead. That's the beauty of separating the form logc from the styling. Have a look at a post I just made here:

http://forum.cmsmadesimple.org/index.php/topic,18630.0.html

Sarah