Formbuilder CSS with Contact Page

[ctrujillo45]

Hello there-

I was successfully able to install FormBuilder into my site. By default, FormBuilder comes pre-loaded with a contact page, and it was exactly what I needed.

I cannot seem to get the input boxes to look correct on this form. They don't have any breaks between them and do not look clean. Also, they are not aligned. The application works, but I hate having it look so messy. Take a look:

http://www.renegademikesportfishing.com ... contact-us

Here is the stylesheet from Formbuilder:

/* 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 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}

/* 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 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;
margin:1.5em 0;
width: 50px;
font-size: 10px;
}
.contactform textarea {
background-color: #ffc;
border: 1px solid #f60;
}
.formbuilderform .message {
line-height: 16px;
padding: 0 0 8px 0;
}

[nichess]

Did you solve the problem?

It took me a while to realize, that I have to connect the styles with the templates .

Cheers

[aibreanstudio]

By default the CSS is duplicated (dunno why they packaged it like that). Go through and delete the duplicate classes.

http://dynamicseniorsolutions.com/contact-us.html

There is a site I did

I added a little bit to the FormBuilder CSS

check out the label class. I defined a width for the label and added a float, so the input area will be aligned after the set width.

Code: Select all

/* Start of CMSMS style sheet 'FormBuilder Default Style' */
@charset "utf-8";
/* CSS Document */

fieldset div {
	margin-bottom:0.5em;
	margin-left:1em;
}
fieldset div div {
	margin-top:0.5em;
	margin-left:1em
}
fieldset {
	margin-bottom:1em;
	padding:0.5em;
border:none;

}
fieldset label
{
	width: 150px;
	text-align: left;
	margin-right: 0px;
	display: block;
	float: left;
font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
fieldset legend
{
visibility: hidden;
}

.submit input
{
	color: #000;
	border: 1px solid #8B8B86;
	background-color: #fff;
} 
input
{
	color: #000;
	background-color: #CCC;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: thin;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: groove;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000;
	border-right-color: #660089;
	border-bottom-color: #660087;
	border-left-color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	padding: 0px;
}
textarea
{
	color: #000;
	background-color: #CCC;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: groove;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000;
	border-right-color: #660087;
	border-bottom-color: #E8D8ED;
	border-left-color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
 
.captcha {
	margin:0.5em 0;
	width:200px;
	text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.captcha img { margin-bottom:0.5em}
.captcha input {width:196px; margin-top:0.5em;font-family: Arial, Helvetica, sans-serif;}

/* End of 'FormBuilder Default Style' */

[Peciura]

If you want table like form, insert "", "", "", "" to apropriate places in from template. Here is example

Code: Select all

{* DEFAULT FORM LAYOUT / pure CSS *}
{$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}

<table><tbody>
	{foreach from=$fields item=entry}
<tr><td>
		{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}</td><td>
         	{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->valid == 0} <--- {$entry->error}{/if}
         	{if $entry->needs_div == 1}
            	</div>
         	{/if}
         	{/strip}
     	{/if}
</td></tr>
	{/foreach}
</tbody></table>
	{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}

If you have wide fields and narrow content area try this template

Code: Select all

{* DEFAULT FORM LAYOUT / pure CSS *}
{$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><br/><div class="form_indent">
         	{/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->valid == 0} <--- {$entry->error}{/if}
         	{if $entry->needs_div == 1}
            	</div>
         	{/if}</div>
         	{/strip}
     	{/if}
	{/foreach}
	{if $has_captcha == 1}
		<div class="captcha">{$graphic_captcha}{$title_captcha}<br />{$input_captcha}</div>
	{/if}
	<div class="submit form_indent">{$prev}{$submit}</div>
	
	{$fb_form_end}
{/if}
{$fb_form_footer}

Also you have to define style of class "form_indent". Im my case it is

Code: Select all

.form_indent {
margin-left:40px;
}

In both cases templates are very similar to default one. To highlight changes use Notepad++(plugin required) or WinMerge.