close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Resizing form width

Thread began 6/07/2010 11:13 pm by paligula379777 | Last modified 6/14/2010 5:56 pm by Jimmy Wu | 2014 views | 16 replies |

paligula379777

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

Sign in to reply to this post

neilo

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;
}

Enter a negative value for the left margin, by adding the line:

margin-left: -200px;

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


and see if that does it. Play with the size of the (negative) margin.

Sign in to reply to this post

paligula379777

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.

Sign in to reply to this post

paligula379777

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!

Sign in to reply to this post

neilo

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.

Sign in to reply to this post

paligula379777

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.

Sign in to reply to this post

paligula379777

Hi

Can I get some support on this?

Sign in to reply to this post

Jimmy Wu

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.

Sign in to reply to this post

paligula379777

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

Sign in to reply to this post

Jimmy Wu

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.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...