Form builder, page layout

[jans]

Is it possible to get the forms I've built with formbuilder in a better and nicer layout ?

Please see link;

http://www.jsnijder.nl/index.php?page=camperplaatsen

What I like to get done is lined out text and lined out inputs (nice and under each other) like a professional form.

Please can someone help me wit some kinda template ??

Greets, JanS

[mvandiermen]

Hello,

In your Main Form Details, you should have a box called "CSS Class for this form:"

Give this a name like: contactform

CSS Class for this form: contactform

This creates a div tag around your form called "contactform"

Next we need to add the CSS for the div "contactform"

For example


.contactform fieldset {padding: 1em; background-color: #eee;}
.contactform fieldset legend {font-weight: bold;}
.contactform div {width: 100%; padding: 0.25em 0 0.25em 0;}
.contactform div label {display: block; width: 10em; }
.contactform div.required {color: #f00;}

You can add the above code anywhere on the page,
You can add it to your template CSS
In the example forms they add it to the form it's self by adding a new "Form Fields" called CSS, which they select "-Static Text" as the input from the dropdown list and just insert the css into the html view of that

Let me know if you need more clarification, I am happy to help you with anything else.

[mvandiermen]

I am new to the form builder and I am just working with it now...

If you look at the example contact form you will see a element called "Contact Fieldset" with the Field Type "-Fieldset Start" and other elements, these names may correspond to the CSS

.contactform fieldset {padding: 1em; background-color: #eee;}
.contactform fieldset legend {font-weight: bold;}

You may or may not need to reproduce some of these elements for the CSS to work, I dont know much about it yet

[swiftgs]

What I did (maybe not the best option but ok)

Make a table in dreamweaver, and just copy the code on the right places inside the table. Then it shouldn't be a problem to line it out After that just copy the dreamweaver code into your page!

[mvandiermen]

What I did (maybe not the best option but ok)

Make a table in dreamweaver, and just copy the code on the right places inside the table. Then it shouldn't be a problem to line it out After that just copy the dreamweaver code into your page!

Where can I find the form layout to modify ?
Are you adding table code to the "Form Template" ?

[mvandiermen]

This may help you
http://wiki.cmsmadesimple.org/index.php ... rm_Builder

I found where to make the form with tables (with titles to the left and all the variables aligned perfectly to the right)...  and it looked much much better !!!

To put your form in to a table, go to the main tab called "Form Template" and there is a drop down list called "Load template:" select table layout from this....

[mvandiermen]

I would forget about every thing I said before and just put your form in to a table by going to the main tab called "Form Template" and there is a drop down list called "Load template:" select the table layout from this.... and that will fix it

[sparx79]

If that doesn't work (like with me )
Use this code for the "submit template"

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

It might need some tweaking to use CSS, but it's basically good.