Formbuilder question...

[rubberglover]

Hopefully just a quick one... I know you can pass in variables to be assign to certain field values when calling form builder via the module tag, eg:

Code: Select all

{cms_module module='FormBuilder' form='myform' value_fld1=$myVar}

However, I'm working with a really big form, and it's quite a fiddly layout and so the easiest way for me to put it together was to create the form in form builder, copy the resulting source, and then build the form via a combination of form builder tags in the template, and hard coded inputs etc. I know it sounds a bit random but it really is a mental layout and this is the only way I can get it looking right!

Here's an example of some of it (I've only included a few fields because the full thing is massive, like a hundred fields!)

Code: Select all

<div class="feedback">
{$fb_form_header}
{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>

			{foreach from=$fb_submission_error_list item=thisErr}
				<span class="error">{$thisErr}</span>
			{/foreach}
<br />
		</div>
		{/if}
	{/if}
{else}

{if $fb_form_has_validation_errors}
	<div>

	{foreach from=$fb_form_validation_errors item=thisErr}
		<span class="error">{$thisErr}</span>
	{/foreach}
<br />
	</div>
{/if}
{if $captcha_error}
	<div>

	<span class="error">You did not correctly enter the characters in the image. Please try again.</span>
<br />
	</div>
{/if}

{$fb_form_start}
{$fb_hidden}


<fieldset>
	<legend>Send us a message</legend>
<p>(You have to enter something in the fields marked with a '*')</p>
<div class="input-field">
	<label class="main-label">Your Name *:</label>
	<input name="cntnt01fbrp__14" class="textfield med" type="text">
</div>

{*hundreds more fields here*}

<div class="input-field">
	<label class="main-label">Please enter the characters you see in the 'captcha' image below *</label>
	{$graphic_captcha}
	<input class="textfield small" name="cntnt01fbrp_captcha_phrase" id="cntnt01fbrp_captcha_phrase" value="" maxlength="255" type="text">
	<p>(This helps prevent spam email, and so allows us to respond to your message sooner.) </p>
</div>

<div class="input-field">
	{$submit}
</div>
</fieldset>


{/if}
	
{$fb_form_end}	
{$fb_form_footer}

The long and short of it is that it's working fine, but the fields don't retain their values if the submission fails validation (no value parameter in the above example at all), so I'm hunting around for a variable that's generated on submission of the form and passed in that I can use in the manually created fields.

I've done a {get_template_vars} and found objects for each of my form fields, and done a print_r on a few of them. I was hoping that the {$my_field->values} object variable might give what I'm after, but it seems that the previously entered value is just added to the {$my_field->input} html string, which I'm not using on a lot of my fields as they are hard coded... is there anyway I can get at the value or do I just have to bite the bullet and use the input variable of each field to generate my html?

[rubberglover]

Ok, figured it'd be easier to just use ...

Code: Select all

{$my_field->input}

... for each field and just tweak the layout a bit if I have to. However, if I add a class to the field in the advanced tab it doesn't appear on the markup. If I add an alias / ID under the advanced tab then it appears as part of the {$field->input} html string no problem.

I notice that the default templates seem to take the field class and apply it to a parent div via {$entry->css_class}. Is this the only way to add styling through an input field?

I have a series of css classes for different field types, for example for text inputs I have the following css class options (plus more):

Code: Select all

input.textfield{
  /*generic text input styling*/
}

input.small{
  width: 25%;
}

input.med{
  width: 50%;
}

input.large{
  width: 75%;
}

... then I would just chain them up like so:

Code: Select all

<input class="textfield small" name="myField" type="text" />

I was hoping to be able to add 'textfield med' to the css field under the advanced tab and have those classes applied to the field itself but it doesn't add a class at all... is this an error or can I not use this feature in this way?

[rubberglover]

Ah... just checked the form builder documentation and it mentions in there that you can only use the CSS class on a wrapper element via {$myField->css_class}. This probably isn't going to work for me, so back to the original question...

When validation fails is there any way to just grab the previously submitted value of a field and apply it to the same hard coded input field via a smarty variable? Something like:

Code: Select all

<input type="text" class="{$myField->css_class}" value="{$myField->value}" id="{$myField->input_id}" /> 

[rubberglover]

Ended up just caving and changing all my CSS so I can use wrapper divs around fields... If you're building your templates from scratch then it's not a problem, but I'm coding up markup that was produced by someone else who didn't know the things to look for building form layouts for form builder...

That being the case, it would be nice to have the submitted value added to the field object, allowing  you to make a totally custom template, a bit like this:

Code: Select all

<input type="text" value="{$myField->value}" name="{$myField->name}" />

I believe CGFeedback works in this way... would anyone else find this useful?

[Dr.CSS]

I make a lot of different looking forms all the time and never have any problem using the built in CSS call box on every input, when building it and adding different fields, look to the advanced tab to find the CSS call box and add your CSS/class tag there...

[rubberglover]

Yep... that's what I did... I was only asking as I'd been given a HUGE form template where lots of classes had been applied to the various input fields themselves rather than on wrapper DIVs. I eventually just modded the markup to reference the input fields via the parent div and it's class (defined in the advanced field).

If I were making the template myself I'd have just done it so that styling was applied via wrappers around each input field and wouldn't have had a problem using the standard method. It just occurred to me whilst trying to figure this out that adding a {$myField->value} variable to field the object would add some flexibility to the form builder module.

This variable exists in the CG Feedback module and it's quite handy... could even be used in error messages where validation is looking for a specific type of content, like an integer or email address, eg:

Code: Select all

<li class="error">"{$myField->value}" is not a valid entry for this field</li>

Thoughts?

[maranc]

Ok, figured it'd be easier to just use ...

Code: Select all

{$my_field->input}

... for each field and just tweak the layout a bit if I have to. However, if I add a class to the field in the advanced tab it doesn't appear on the markup. If I add an alias / ID under the advanced tab then it appears as part of the {$field->input} html string no problem.

I notice that the default templates seem to take the field class and apply it to a parent div via {$entry->css_class}. Is this the only way to add styling through an input field?

I have a series of css classes for different field types, for example for text inputs I have the following css class options (plus more):

Code: Select all

input.textfield{
  /*generic text input styling*/
}

input.small{
  width: 25%;
}

input.med{
  width: 50%;
}

input.large{
  width: 75%;
}

... then I would just chain them up like so:

Code: Select all

<input class="textfield small" name="myField" type="text" />

I was hoping to be able to add 'textfield med' to the css field under the advanced tab and have those classes applied to the field itself but it doesn't add a class at all... is this an error or can I not use this feature in this way?

My Dear, input.textfield it's not good syntax for css. Corectly is:
input[type="text"], for password field: input[type="password"].

I dont know why you can't add class for field, it's true that css class will be using for div but it's very easy to add rule in stylesheet. Example if you have input type text add in tabs class "main_input"  in stylesheet add:

.main_input input[type="text"] {
width:
border:
etc:
}

BTW - each field has indywidually ID, and you can always adding css rule trought ID of fields.

Marek A.

[Akha]

The long and short of it is that it's working fine, but the fields don't retain their values if the submission fails validation (no value parameter in the above example at all), so I'm hunting around for a variable that's generated on submission of the form and passed in that I can use in the manually created fields.

I have the exact same problem and yet I could not find the solution from the topic so far. I tried to define "{id->value}" as a value of one form field but it did not work. The particular text field still gets emptied if the information to one of the required fields is not typed.

So, what do I have to do in order to retain already typed information in the form when the submission fails?