Can this be accomplished with Form Builder?

[visualharmony]

Hi,

I'm using Form Builder version 0.6.1 on CMSMS version 1.6.6. (Bonde).

I'm using a table based form template with the field definitions in the left TD cells and the inputs in the right TD cells of the TR.

Now I need to get multiple fields for up to twenty employees and it would be nice if all the info for each employee could fit in one table row.  It's a little hard to explain what I'm trying to accomplish, so I've attached an image.

Can this be done for certain rows without affecting the rest of the form template?

Thanks!
Jack

[Peciura]

Everything depends on your form template.

[visualharmony]

Here's the template. I should have posted it before:

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"}
{literal}
<__script__ type="text/javascript">
function fbht(htid)
	{
		var fbhtc=document.getElementById(htid);
		if (fbhtc)
			{
			if (fbhtc.style.display == 'none')
				{
				fbhtc.style.display = 'inline';
				}
			else
				{
				fbhtc.style.display = 'none';
				}
			}
}
</__script>
{/literal}
{$fb_form_header}
{if $fb_form_done == 1}
        <h1>{title}</h1>
	{* 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}
                <h1>{title}</h1>
		<div class="error_message">
		<ol>
		{foreach from=$fb_form_validation_errors item=thisErr}
			<li>{$thisErr}</li>
		{/foreach}
		</ol>
		</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} cellspacing="0" cellpadding="0">
	{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="left" valign="top" width="50%"
			{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 *}
			{if $entry->helptext != ''} <a href="javascript:fbht('{$entry->field_helptext_id}')"><img src="modules/FormBuilder/images/info-small.gif" alt="Help" /></a>
					<span id="{$entry->field_helptext_id}" style="display:none">{$entry->helptext}</span>{/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}

[visualharmony]

And the CSS in case it something needs to be added/modified:

Code: Select all

form {margin-top:0}
form, td, th { font-size: 100%}
form div {margin-bottom:0}
fieldset div {
	margin-bottom:0.5em;
	margin-left:1em;
}
fieldset div div {
	margin-top:0.5em;
	margin-left:1em
}
fieldset {
	margin-bottom:1em;
	border:1px solid #F60;
	padding:0.5em
}
fieldset label {
	width:auto;
}
legend {
	color:#FFF;
	background:#F60;
	font-style:italic;
	font-size:1.2em;
	margin-bottom:0.5em;
	padding:0.2em;
	width:auto;
	border:1px solid #CCC
}
textarea {
	margin: 0.5em 0;
	width:98%;
	height: 6em
}

/* Apply this class to text/select input fields with shorter labels
	to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}

/* Pretty up your Captcha image output */
.captcha {
	margin:0.5em 0;
	width:200px;
	text-align:center
}
.captcha img {border:1px solid #F60; margin-bottom:0.5em}
.captcha input {width:196px; margin-top:0.5em}

/* Just a bit more room for the Submit button */
.submit {margin-top:0.5em}

.contactform input {border: 1px solid #f60;}
.contactform input.checkbox {border: none;}
.contactform label {
	display: block;
	float: left;
	width: 150px;
}
.contactform label.label {
	display: inline;
	float: none;
	width: 50px;
	font-size: 10px;
}
.contactform textarea {
	background-color: #ffc;
	border: 1px solid #f60;
}
.formbuilderform .message {
	line-height: 16px;
	padding: 0 0 8px 0;
}

.formbuilderform {
    width: 700px;
    margin: 0px auto;
    border: 1px solid #336666;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #e1e0c3;
}

.formbuilderform tbody tr:hover {
  background-color: #336666;
  color: #fff;
}

.formbuilderform tbody tr:hover td {
  color: #fff;
}

.formbuilderform tbody tr td {
  padding: 10px;
}

.formbuilderform tbody tr td tbody tr td {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.error_message {
  font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 20px;
  padding-left: 20px;
  color: #ff0000;
}

[Peciura]

Have not tried CSS. Try this template. Also post link to page.

{* TABLE FORM LAYOUT / Field titles on Left *}
{* next line sets number of columns for things like checkbox groups *}

{assign var="cols" value="3"}
{literal}

function fbht(htid)
{
var fbhtc=document.getElementById(htid);
if (fbhtc)
{
if (fbhtc.style.display == 'none')
{
fbhtc.style.display = 'inline';
}
else
{
fbhtc.style.display = 'none';
}
}
}

{/literal}
{$fb_form_header}
{if $fb_form_done == 1}
{title}
{* This first section is for displaying submission errors *}
{if $fb_submission_error}
{$fb_submission_error}
{if $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 $fb_form_has_validation_errors}
{title}


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


{/if}
{if $captcha_error}
{$captcha_error}
{/if}

{* and now the form itself *}
{$fb_form_start}
{$fb_hidden}


{if $total_pages gt 1}{$title_page_x_of_y}{/if}
{foreach from=$fields item=entry}
{if $entry->display == 1 &&
$entry->type != '-Fieldset Start' &&
$entry->type != '-Fieldset End' }

{strip}{if $entry->hide_name == 0}
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}
>

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

{/if}css_class != ''} class="{$entry->css_class}"{/if}>
{if $entry->multiple_parts == 1}


{section name=numloop loop=$entry->input}
{$entry->input[numloop]->input} {$entry->input[numloop]->name}{if $entry->input[numloop]->op} {$entry->input[numloop]->op}{/if}
{if not ($smarty.section.numloop.rownum mod $cols)}
{if not $smarty.section.numloop.last}

{/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}
 
{/section}
{/if}

{/if}
{/section}

{else}
{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}
{/if}
{* if $entry->valid == 0} <--- {$entry->error}{/if *}
{if $entry->helptext != ''} field_helptext_id}')">
field_helptext_id}" style="display:none">{$entry->helptext}{/if}



{/strip}
{/if}
{/foreach}


{if $has_captcha == 1}
{$graphic_captcha}{$input_captcha}
{$title_captcha}
{/if}
{$prev}{$submit}
{$fb_form_end}
{/if}
{$fb_form_footer}

[visualharmony]

Here's the form.

It's now using the template you supplied.  Thanks again for your help!

[Peciura]

I have updated pagination, but it does not look like you saved form with new template. I can see that because "Submit"button is not in separated table. This time i have added html comment so it will be visible which template you use.

EDIT Also there is no way 7-6 fields will fit side by side in your page so you will need more pages in the form.

[visualharmony]

Pecuria,

Thanks for your time helping with this.  For the sake of simplicity, I just made the form really long so that the fields didn't have to go side by side.

Best,
Jack