Resizing form width

I know this is probably something easy but how do you get the labels and the box fields to move to the left. See the attached. I resized the width of the form to fit my site but cannot figure out how to move those items.

Also - are there any tutorials available on how to use this extension?

Thanks in advance

Hi paligula,

The only way I have ever managed to (easily) sort this is to give a negative value to the left margin in the css rule for the 'fullColumnGroup'.

In your CSSFormBuilder folder there is a css file that ends with '_Default.css'. If you open that file, and search for 'fullColumnGroup', you should find something like the following rule (the name may be a bit different depending on which presets you used) :

form.NewFromBlank_Default div.fullColumnGroup {
	width:764px;
	padding-bottom:0;
	padding-top:10px;
	display:inline;
	float:left;
}

form.NewFromBlank_Default div.fullColumnGroup {
	width:764px;
	padding-bottom:0;
	padding-top:10px;
	display:inline;
	float:left;
	margin-left: -200px;
}

Hi Neilo

Thanks for the tip.

I tried that but it did not work.

Played around with the negative widths and did not see any effect on the form.

See attached.

Never mind

I was in the wrong _Default.css file. I have been experimenting with this and had a few of them in there for the different styles.

Still having some issues with this.

The control box covers the 2nd column. Is that the way its supposed to be?

See screenshot_1

The section where it has "security Code" and "Answer" is now too far to the left.

See screenshot_2

How do I correct this?

Thanks!

Hi paligula,

Would it be possible to upload the page and supporting files (ready or not) to your live server so that we can have a better idea of what to suggest?

It would be quite easy (I hope) if we were able to see the live code/css and try out some tweaks with Firebug.

Sure.

I am just testing at this stage since I juse bought the Super Suite collection the other day.

But that would be very cool. I do plan on using the contact form using this template,

I have it loaded here: formtest2.html


In regards to the other part of my question. Now that I have the Super Suite is there a tutorial that walks you through the creation of a contact form from start to finish? I understand from reading the help files to get a working contact form I will be utilizing several.

Hi

Can I get some support on this?

In your FD_Cool_Default.css, find this css block:
form.Cool_Default div.fullColumnGroup {
display:inline;
float:left;
margin-left:-145px;
padding-bottom:8px;
padding-top:8px;
width:517px;
}

Change it to look like this:
form.Cool_Default div.fullColumnGroup {
display:inline;
float:right;
margin-left:-120px;
padding-bottom:8px;
padding-top:8px;
width:517px;
}

Also find this css block:
form.Cool_Default textarea.formTextarea_Medium {
background-color:#E5E5E5;
border-width:0;
color:#000000;
height:150px;
margin:0 0 0 2px;
overflow:auto;
padding:5px;
white-space:pre;
width:382px;
}

and change the width.

There isn't a complete tutorial on how to get a working contact form. The steps would be to set up your form and then run Universal Email to send out the email. So you should familiarize yourself with Universal Email and getting emails sent out after setting up the form.

Hi Jimmy

Thanks - will try this when I get back top the office tonight.

One thing I noticed in the instructions that did come with form builder said to insert the formbuilder form on a php page. Will this not work on a html page like it is now?

Will also setup with universal email.

Since a contact form is such a common thing I think it would be a good idea to put together a start to finis tutorial on how to build a contact form. I purchased the super Suite so I can do just that so I think it would be cool to have some documentation showing how all teh pieces work together.

Cheers

Kyle

You will need to have a PHP page to insert the Universal Email behavior. This is because the Universal Email behavior is done using server side code.

I think that's one of the reasons we have a solution pack for it. If you would like to see step by step documentation for it, you should post in the wishlist forum.