cforms II User Forum

Registration is currently disabled.
Guest

FAQs

Login form protected by Login LockDown.


Lost password?
Advanced Search

— Forum Scope —

  

— Match —

   

— Forum Options —

    

Wildcard usage:
*  matches any number of characters    %  matches exactly one character

Minimum search word length is 4 characters - maximum search word length is 84 characters

Topic RSS
Left align form?
December 10, 2007
11:29 am
Yoda
Guest

Please replace the ??? with your data!


Hi!

First off: great plugin! I'm very impressed with how feature-rich cforms is and I enjoy the fact that you can customize nearly everything. There is, however, one little problem that I currently struggle with: I would like the whole form to be left aligned. I dug around in the CSS stylesheet (using wide_open_no_border.css), but I couldn't get it right. Also checked the contact page with Firebug but couldn't find the align property of the form.

This question probably has a very simple answer, but this is really a last resort. If anyone could provide me with a little help here, I would really appreciate it.

Thanks in advance! 

December 10, 2007
7:21 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

You need to adjust the class .cforms in your cforms CSS theme file. Simply remove the auto from margin and replace it with whatever suits you.

Also, check out the CSS guide and webcast in this forum (stick posts at the top!) 

April 8, 2008
5:41 am
KSteele
Guest

1st and foremost – GREAT JOB w/ the scripts Guys and Gals…. Very Clean!!!! A CLASS ACT!!!!

I too have a positioning problem… this is a fresh install, with the latest updates.

Here's a link to view: http://mobilecompmedic.com/seopro/

.cform was the 1st place that I went to make this adjustment but after several trys I decided to bring it here… my apologies. I've come to the conclusion that the .cform code is correct and that it is the Wordpress CSS that is keeping this module confined to the right column, thus pushing the form off the page – or better spoken, making the page width expand off screen the number of pixels I set for margin-right (in the example below: 600px)

.cform {
margin:0 0 600px 0;
width: 410px;
}

Any advice for a quick fix? If so please be specific, I'm pretty slow :>)

Thanks, "K"

April 8, 2008
7:17 am
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

I too have a positioning problem… this is a fresh install, with the latest updates.

A positioning problem is always relative, it depends on what you're trying to achieve, which you haven't explained.

Looking at your page, I see you added the form via the widget control to your sidebar, so this worked ok, although it looks broken (can't squeeze a 400px wide form in a 200px wide sidebar!).

Two options:

  1. Either choose the proper cforms CSS theme for the sidebar position: "sidebar layout"
  2. Or remove the widget, and include your contact form in a post / page (see HELP! page for detailed instructions)
April 8, 2008
7:59 am
KSteele
Guest

I thought that might be the case, Thank you for that quick reply Oliver… if there is a way I can help spread the good word for the cause, please let me know. i.e.- a link back to (?)

Best regards, "K"

April 8, 2008
5:26 pm
KSteele
Guest

NP Oliver, will do. In the meantime… in case anyone else is interested in having the Shiny Style contact form in their WordPress sidebar, the following is the altered CSS stylesheet I used.

1.) Resize the top and bottom images width to 180px (../images/customform_shiny_bg.jpg) & (../images/customform_shiny_bg_bottom.jpg)

Cut, Copy & Paste the following to replace the existing stylesheet: shiny_style.css

That's It!!!! Good Luck, and thanks again Oliver

/* */
/* custom code on top the default style sheet */
/* */
/* ** if you want this to apply to a different */
/* ** form than to just the 2nd form change the '2' */
/* ** (or remove for your 1st, default form) */
@import "calendar.css";

.cform fieldset.cf-fs1 {
background: url(../images/customform_shiny_bg.jpg) no-repeat;
padding-bottom:0;
}
.cform fieldset.cf-fs1 ol.cf-ol {
margin:50px 0 0 0!important;
}

/* */
/* main 'top-level' form elements */
/* */
.cform {

margin:0 0 0 0;
width: 180px;
}

.cform fieldset {
margin:10px 0 0 0;
padding:5px 0 15px 0;
border:none;
background:white;
}

.cform .cf_hidden {
display:none;
border:none!important;
background:none!important;
padding:0!important;
margin:0!important;
}

.cform legend {
display:none;
}

ol.cf-ol {
margin:0!important;
padding:0!important;
}
ol.cf-ol li {
background:none!important;
margin:5px 0!important; /*some themes may interfere otherwise*/
padding:0;
list-style:none!important;
text-align:left;
line-height:1.3em;
}

/* */
/* just for text-only fields (no input) */
/* */

ol.cf-ol li.textonly {
color:#a2a2a2;
padding:4px 0;
text-align:center;
}

/* */
/* global definitions for field labels */
/* */

.cform label {
color:#666666;
width:90px;
margin:4px 10px 0 0;
display:-moz-inline-box; /*for mozilla*/
display:inline-block; /*for Opera & IE*/
text-align:left;
vertical-align:top;
}
.cform label span {
color:#666666;
width:90px; /* must be the same as above!*/
display:block;
}

label.cf-before {
margin:4px 10px 0 0;
}

label.cf-after {
margin:4px 2px 0 6px;
width:70px;
text-align:left;
}

label.cf-after span {
width:70px;
display:block;
}

label.cf-group-after {
margin:4px 4px 0 2px;
width:125px;
text-align:left;
}
label.cf-group-after span {
width:125px;
display:block;
}

/* */
/* FORM FIELDS general formatting */
/* */

.cform input,
.cform textarea,
.cform select {
color:#333;
padding:3px;
background: #fefefe;
border: 1px solid #ddd;
vertical-align:top;
letter-spacing:1px;
line-height:normal;
padding:4px 3px;
vertical-align:top;
font:bold 9px Arial;
}

.cform input:hover,
.cform textarea:hover,
.cform select:hover {
background:#f2f2f2;
}

.cform input:focus,
.cform textarea:focus,
.cform select:focus {
background:#fefefe;
}

.cform textarea,
.cform input {
width:175px;
}
.cform select {
width:183 px; /* attempt to have equal length */
}

.cform select.cfselectmulti {
height:7.5em;
}

.cform textarea {
overflow:auto;
}

/* */
/* formatting for text: "(required)" & other */
/* */

span.reqtxt,
span.emailreqtxt {
color:#a2a2a2;
margin:3px 0 0 5px;
font:normal 9px Tahoma;
display: -moz-inline-box;
vertical-align:top;
letter-spacing:1px;
}

/* */
/* radio button title */
/* */

ol.cf-ol li.cf-box-title {
color:#a2a2a2;
padding-left:100px; /* check with label 'width' incl. */
margin:6px 0 0 0!important;
}

/* */
/* check boxes */
/* */

input.cf-box-a,
input.cf-box-b {
margin:2px 0 0 0;
width:16px;
height:22px;
border:none!important;
background:none!important;
}

input.cf-box-a {
margin-left:100px; /* check with label 'width' incl. */
}

/* */
/* check box groups */
/* */

ol.cf-ol li.cf-box-group {
margin:0pt !important;
padding: 0 0 5px 100px;
}

/* */
/* FORM submit button */
/* */

p.cf-sb {
text-align:center;
padding:0!important;
margin:0;
background: url(../images/customform_shiny_bg_bottom.jpg) no-repeat bottom left;
}
.cform input.sendbutton {
color:#FFFFFF;
cursor:pointer;
font:14px Arial;
height:31px;
line-height:31px;
margin: 0px 10px 10px 0px;
padding: 0 0 5px;
width:120px;
background: white url(../images/customform_shiny_submit.jpg) no-repeat;
border:none;
}
.cform input.sendbutton:hover {
background-position:0 -31px;
}

/* */
/* FORM FIELDS enhanced error display */
/* */
ol.cf-ol li.cf_li_err {
background:#FFDFDF url(li-err-bg.png) repeat!important;
border-color:#DF7D7D;
border-style:solid;
border-width:1px 0pt;
padding:5px 0!important;
margin:5px 0!important;
}

ol.cf-ol li ul.cf_li_text_err {
margin:0 0 0 100px;
padding:0;
color:#333;
}

ol.cf-ol ul.cf_li_text_err li {
background:url(icon-alert.png) no-repeat left 1px!important;
list-style:none!important;
font-weight:bold;
text-indent:0;
margin:0 0 2px!important;
padding-left:15px;
}
ol.cf-ol ul.cf_li_text_err li:before {
content:'';
}

/* */
/* 'visitor verification' related styles */
/* */

label.secq,
label.seccap {
vertical-align:text-bottom;
margin-bottom:4px;
margin-right:20px;
}

input.secinput {
vertical-align:text-bottom;
}

#cforms_captcha6,
#cforms_captcha5,
#cforms_captcha4,
#cforms_captcha3,
#cforms_captcha2,
#cforms_captcha {
height:15px;
width:50px;
padding: 4px 4px;
margin: 10;
vertical-align:text-bottom;
}

img.captcha {
vertical-align:text-bottom;
margin:0 0 0 30px!important;
padding:0!important;
border:none!important;
float:none!important;
}

img.captcha-reset {
vertical-align:text-bottom;
background: url(captcha_reset_silver.gif) no-repeat;
margin:0 0 2px 3px;
width:21px;
height:21px;
border:none;
}

img.imgcalendar {
border:none;
}

/* */
/* change formatting of response msgs here */
/* */

div.cf_info {
color:#333;
display:none;
padding:0 0 0 0!important;
width:180px;
line-height:1.3em;
margin:auto;
align:center;
}
div.cf_info ol {
margin:0;
padding:5px 15px 0 30px;
}
div.cf_info ol li {
padding:1px 0;
margin:2px 0;
}
div.cf_info a {
color:#ad2929!important;
text-decoration:underline!important;
}
div.success {
background:white none repeat scroll 0%;
color:#AAAAAA;
display:block;
letter-spacing:3px;
}
div.failure {
display:block;
background:#FFDFDF url(li-err-bg.png) repeat!important;
border-color:#DF7D7D;
border-style:solid;
border-width:1px 0pt;
}

/* */
/* formatting for invalid user inputs */
/* */
.cform .cf_error {
color:#ad2929;
border:1px solid #ad2929;
}
div.mailerr {
display:block;
}
.mailerr,
.cform .cf_errortxt {
color:#ad2929;
}

/* */
/* disabled fields [disabled] does not work on IE! */
/* */

[disabled] {
color:#dddddd;
border-color:#dddddd!important;
background:none!important;
}
.disabled {
border-color:#dddddd!important;
}

/* */
/* upload box styling */
/* */

.cform input.cf_upload {
width:220px;
background: #f9f9f9;
border:1px solid #888888;
}

/* */
/* Other: link love */
/* */
.linklove {
width:180px;
margin:0 auto 10px!important;
padding:0!important;
text-align:center!important;
}
.linklove a,
.linklove a:visited {
font-size: 0.8em;
font-family: Tahoma;
color:#aaaaaa!important;
}

/* */
/* Other: browser hacks */
/* */
* html ol.cf-ol,
* html ol.cf-ol li,
* html span.reqtxt,
* html span.emailreqtxt {
display: inline-block; /*for ie6*/
}
*+html ol.cf-ol,
*+html ol.cf-ol li,
*+html .cform label,
*+html span.reqtxt,
*+html span.emailreqtxt {
display: inline-block; /*for ie7*/
}
*+html img.captcha {
margin-bottom:1px!important;
}
* html img.captcha {
margin-bottom:1px!important;
}
* html select {
margin-top:3px!important;
}

January 8, 2013
6:34 am
Donovan
Guest

Hi. Great plugin. Thank you!

I have been searching for hours and still don't have my answer. 

I am using Suffusion Theme 4.4.0, Wordpress 3.5, and Cforms version 14.6 and the Dark-rounded.css

http://radioroompress.com/contact/

chrome browser.

I am not great at CSS. I find people who have the same problem and then try the solutions that were offered to them. I tried the advice above, changing the Margin settings to my desired position, but nothing is happening. Am I doing it in the right place?

I am trying to change

/* */
/* main 'top-level' form elements */
/* */
.cform {
width: 410px;
padding-bottom:8px;
margin:10px auto 0 auto;
background: url(../images/customform_dark_bg_bottom.jpg) no-repeat bottom left;
}

to anything that will make it left align. 

I have tried

/* */
/* main 'top-level' form elements */
/* */
.cform {
width: 410px;
padding-bottom:8px;
margin:10px 270px 0 0px;
background: url(../images/customform_dark_bg_bottom.jpg) no-repeat bottom left;
}

to see what would happen, but nothing happens at all! In fact, I've changed the width: 410px; to other values to see what would happen, but, again, nothing changed.

Any advice at all on how to get this to left align would be greatly appreciated. 

 

Thank you!

Donovan

January 8, 2013
7:11 am
Donovan
Guest

Alright. I disabled W3 Total Cache and it moved. I re enabled Total Cache after the fix showed up properly. I guess I did it right. W3 Total Cache has gotten me a few times. 

Thanks!

Donovan

Forum Timezone: Europe/Berlin

Most Users Ever Online: 959

Currently Online:
21 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

tracedef: 43

mores: 21

Gyrus: 20

frozenwaste: 18

asuffredini: 15

photoworks: 14

Member Stats:

Guest Posters: 3762

Members: 1463

Moderators: 3

Admins: 2

Forum Stats:

Groups: 1

Forums: 4

Topics: 5361

Posts: 18742

Newest Members: juredujmovic, dreamkeeper, rajattyagi, wrokaa, lukass

Moderators: Paul (421), cnymike (8), sonika (95)

Administrators: Oliver (6400), Nicky (3)