FormBuilder Default Style

Éditer une feuille de style 

Cette page a été vue 1019 fois. Date de mise à jour : 17/09/2014 10:02:20.

Sample FormBuilder CSS base


/* Sample FormBuilder CSS base */
form {
	margin-top: 0
}
form, td, th, li {
	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 labelsto 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;
}

Code html généré par FormBuilder


			<div class="contenu">
				<h1>Contact</h1>
				<form id="cntnt01moduleform_2" method="post" action="http://www.i17.fr/contact" class="cms_form" enctype="multipart/form-data">
				<div class="hidden">
					<input type="hidden" name="mact" value="FormBuilder,cntnt01,default,0" />
					<input type="hidden" name="cntnt01returnid" value="26" />
					<input type="hidden" name="cntnt01fbrp_callcount" value="2" />
				</div>
				<div>
					<input type="hidden" id="cntnt01form_id" name="cntnt01form_id" value="2" />
					<input type="hidden" id="cntnt01fbrp_continue" name="cntnt01fbrp_continue" value="3" />
					<input type="hidden" id="cntnt01fbrp_previous" name="cntnt01fbrp_previous" value="1" />
					<input type="hidden" id="cntnt01fbrp_done" name="cntnt01fbrp_done" value="1" />
					<input type="hidden" id="cntnt01fbrp__10" name="cntnt01fbrp__10" value="fefe" />
					<input type="hidden" id="cntnt01fbrp__11[]" name="cntnt01fbrp__11[]" value="" />
					<input type="hidden" id="cntnt01fbrp__12" name="cntnt01fbrp__12" value="" />
				</div>
				<div class="advancedcontactform">
					<span>Page 2 sur 2</span>
					<fieldset id="fbrp__15">
					<legend>Contact</legend>
					<div>Hello, fefe!<br /> What is it you'd like to talk to us about?</div>
					<div>
						<label for="fbrp__17">Subject</label>
						<input type="text" name="cntnt01fbrp__17" value="" size="25" maxlength="128"  id="fbrp__17" />
					</div>
					<div class="required">
						<label for="message">Message*</label>
						<textarea name="cntnt01fbrp__18" cols="60" rows="5" class="cms_textarea" id="message">Enter Your Message Here</textarea>
						<script type="text/javascript">
var f = document.getElementById('message');
if (f)
{
f.onfocus=function(){
if (this.value==this.defaultValue) {this.value='';}
}
f.onblur=function(){
if (this.value=='') {this.value=this.defaultValue;}
}
}
;						</script>
					</div>
					</fieldset>
					<div class="submit">
						<input class="cms_submit fbsubmit_prev" name="cntnt01fbrp_prev" id="cntnt01fbrp_prev" value="Back..." type="submit"  />
						<input class="cms_submit fbsubmit" name="cntnt01fbrp_submit" id="cntnt01fbrp_submit" value="Submit Form" type="submit"  />
					</div>
				</div>
				</form>
			</div><!-- #FERMETURE de "contenu"  -->

Gabarit de base du formulaire


{* DEFAULT FORM LAYOUT / pure CSS *}
{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}
	{* 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 class="error">
			<ul>
			{foreach from=$fb_submission_error_list item=thisErr}
				<li>{$thisErr}</li>
			{/foreach}
			</ul>
		</div>
		{/if}
	{/if}
{else}
	{* this section is for displaying the form *}
	{* we start with validation errors *}
	{if isset($fb_form_has_validation_errors) && $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 isset($captcha_error) && $captcha_error}
		<div class="error_message">{$captcha_error}</div>
	{/if}

	{* and now the form itself *}
	{$fb_form_start}
	<div>{$fb_hidden}</div>
	<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 != '' || $entry->valid == 0} class="
					{if $entry->required == 1}required{/if}
					{if $entry->css_class != ''} {$entry->css_class}{/if}
					{if $entry->valid == 0} fb_invalid{/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>
			{/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}
					{if isset($entry->input[numloop]->op) && $entry->input[numloop]->op}{$entry->input[numloop]->op}{/if}
				{/section}
			{else}
				{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}
			{/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" class="fbr_helptext">{$entry->helptext}</span>{/if}
			{if $entry->valid == 0} <--- {$entry->error}{/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>
	{$fb_form_end}
{/if}
{$fb_form_footer}