cforms II User Forum

Registration is currently disabled.
Guest

FAQs

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 Related Topics
Text area width, Label ID's, Verification, CSS.
February 20, 2011
10:31 am
Guest

Few notes:

Using 11.7.3

All browsers (mobile browsers but behaves same on all)

Label ID's and Elements currently turned ON

Form link: http://www.brovadoweddings.com/mobile/contact/

This forum is specifically designed for use on mobile devices, DROID, iPhone, iPad, ECT. So I am trying to keep it simple, narrow, and functional.

 

1.  Can I define a label ID to a field that doesn't change? IE.."verification" rather than "#label--5" If I change field order then my CSS would need to change, correct?

 

2.  I am attempting to require "Your Name" to be entered. Currently it does not flag this. I think it leaving the auto-fill inside and accepting it. How do I work around this?

 

3.  I am trying to change the width of a single field and text area ( for #label--5) I want the verification window to be shorter rather than the entire length of the page, ive scoured the CSS and cant figure out how to shorten just that one field as it won't accept a custom label?  I am new to CSS and guessing that I am missing something simple.

 

4. Currently making visibility of .cform label span :hidden, and font on .cform label{ 0em. Is this the best way to achieve the effect I have now?  I love the current look minus the width of the verification box.

 

5. Please feel free to test on your mobile browser! Current CSS is attached.

 

Any help (or CSS Cleanup) you can give would be greatly appreciated!  You rock!

 

/*  SIMPLE Form for MOBILE devices, based on MINIMAL.CSS  */
/*  main 'top-level' form elements                    */
/*                                                    */
@import "calendar.css";

.cform {

    width: 405px;
}

.cform fieldset    {
    margin-top:10px;
    padding:5px 0 5px 0;
    border:none;
}

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

.cform legend {
    margin:0;
    padding:0;
    font:normal 18px Helvetica;
    color: #aaa;
    letter-spacing:3px;
}

ol.cf-ol {
    margin:0!important;
    padding:15px 0 0 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.1em;
}

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

ol.cf-ol li.textonly {
    color:#888888;
    font-size:1em;
    letter-spacing:2px;
    margin:12px 0pt !important;
    padding:0pt 0pt 0pt 100px;
}

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

.cform label {
    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;
    color: #aaa;
    font:0em Trebuchet MS,sans-serif;
}

.cform label#label--5 {
    font:1.0em Trebuchet MS,sans-serif;
}

.cform label span {
    width:90px; /* must be the same as above!*/
    display:block;
    visibility:hidden;
}

.cform label#label--5 span {
    width:298px;
    visibility:visible;
}    
    
    
label.cf-before {
    margin:4px 10px 0 0;
}

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

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

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

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

.cform input,
.cform textarea,
.cform select {
    padding:3px;
    border:1px solid #aaa;
    font:1.1em Trebuchet MS,sans-serif;
    color:#888;
    background:#ffffff url(../images/field-bg-top.gif) repeat-x top left;
    vertical-align:top;
}
.cform input:hover,
.cform textarea:hover,
.cform select:hover    {
    border: 1px solid #FFCC00;
    background:#ffffff url(../images/field-bg-bottom.gif) repeat-x bottom left;
}

.cform input:focus,
.cform textarea:focus,
.cform select:focus    {
    color:#666;
    background:#ffffff url(../images/field-bg-bottom.gif) repeat-x bottom left;
}

.cform textarea,
.cform input {
    width:298px;
}

.cform select {
    width:306px; /* attempt to have equal length */
}  

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

.cform textarea {
    overflow:auto;
}

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

span.reqtxt,
span.emailreqtxt {
    margin:0px 5px 7px 0px;
    display: block;
    vertical-align:top;
    color: #aaa;
    font-size:0.8em;
    line-height:1.0em;
}

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

ol.cf-ol li.cf-box-title {
    color:#888888;
    font-size:1em;
    letter-spacing:2px;
    margin:12px 0pt 0 !important;
    padding:0pt 0pt 0pt 100px;
}

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

input.cf-box-a,
input.cf-box-b     {
    margin:1px 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 {
    padding: 0 0 5px 100px;
}

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

p.cf-sb {
    margin: 0;
    padding:0pt 3px 0pt 0pt !important;
    text-align:left;
}
.cform input.backbutton,
.cform input.resetbutton,
.cform input.sendbutton    {
    width:auto;  
    padding:2px 1em;
    margin: 0;
    font-size:0.8em;
    background:url(../images/button-bg.gif) repeat-x;
    border:1px solid #adadad!important;
    border-left-color:#ececec!important;
    border-top-color:#ececec!important;
}
.cform input.resetbutton {
    margin: 0 5px 0 0;
}
.cform input.backbutton {
    margin: 0 5px 0 0;
}

/*                                                    */
/*   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;
    width:305px;
}

ol.cf-ol li ul.cf_li_text_err {
    margin:0 0 0 10px;
    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;
}

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

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

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

img.captcha-reset {
    vertical-align:text-bottom;
    background:    url(captcha_reset_white.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:10px 0px!important;
    width:380px;
    line-height:1.3em;

}
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:red!important;
    text-decoration:underline!important;
}
div.success {
    background:#F9F9F9 none repeat scroll 0%;
    color:#AAAAAA;
    display:block;
}
div.failure {
    display:block;
    background:#FFDFDF url(li-err-bg.png) repeat!important;
    border-color:#DF7D7D;
    border-style:solid;
    border-width:1px 0pt;
    width:305px;
}
div.waiting {
    background:#F9F9F9;
    color:#AAAAAA;
    display:block;
}
/*                                                    */
/*   formatting for invalid user inputs               */
/*                                                    */
.cform .cf_error {
    color:red;
    border:1px solid #FF0000;
}
div.mailerr {
    display:block;
}
.mailerr,
.cform .cf_errortxt {
    color:red;
}

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

p.cf_info         {
    margin:10px 0;
    text-align:center;
}
p.success     {
    color:green;
}
p.failure     {
    color:red;
}

/*                                                    */
/* 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 {
    margin:0
    padding:0
    text-align:left;
    }
.linklove a,
.linklove a:visited {
    font-size: 0.5em;
    font-family: Tahoma;
    color:#aaaaaa!important;
 }

/*                                                    */
/*  Other: browser hacks                              */
/*                                                    */
*+html ol.cf-ol,
*+html ol.cf-ol li    {
    display: inline-block;  /*for ie7*/
}
* html ol.cf-ol,
* html ol.cf-ol li,
* html span.reqtxt,
* html span.emailreqtxt {
    display: inline-block;
}
* html .cform legend {
    position:absolute;
    left: -8px;
    top:0;
    margin-left:0;
}
*+html .cform legend {
    position:absolute;
    left: -8px;
    top:0;
    margin-left:0;
}
* html .cform fieldset {
    position: relative;
    margin-top:15px;
    padding-top:25px;
}
*+html .cform fieldset {
    position: relative;
    margin-top:15px;
    padding-top:25px;
}
* html img.captcha    {
    margin-bottom:1px!important;
}
*+html img.captcha    {
    margin-bottom:1px!important;
}

February 21, 2011
9:16 am
Paul
Amsterdam, NL
Moderator
Forum Posts: 421
Member Since:
February 10, 2009
Offline

prestonpalmer said:

1.  Can I define a label ID to a field that doesn't change? IE.."verification" rather than "#label--5" If I change field order then my CSS would need to change, correct?

sure, see custom ID's and how to use them…[id:XYZ]

 2.  I am attempting to require "Your Name" to be entered. Currently it does not flag this. I think it leaving the auto-fill inside and accepting it. How do I work around this?

for cforms, the default value / auto-fill is a valid entry. you need to apply some REGEXP to mark the exact entry as an invalid value, OR use the "auto-clear" + "required" flag !

 

Paul.

* Paul Silter
February 23, 2011
10:10 am
Guest

Paul,

 

I still do not understand how to use the custom ID's. I have them turned on but it seems everything I do is still generating this:

 

<li class="" id="li--5"><label class="secq" for="cforms_q" id="label--5"><span>The color of sky is</span></label><input type="text" value="" class="secinput" id="cforms_q" name="cforms_q"></li>

 

If i put [id:XXX] anywhere it simply does not change anything!  What am I missing?  I've looked through the entire help and your forum and cant find a solution.

 

2.  I am using auto clear + required and it still allows the "You Name" to pass.  According to your response this should not be happening.

 

Thanks!

February 24, 2011
7:38 am
Paul
Amsterdam, NL
Moderator
Forum Posts: 421
Member Since:
February 10, 2009
Offline

I guess I misunderstood, by "field" I thought you meant the actual input field, which -like I described- can be changed with the [id:...] (and turning on custom IDs under core settings]

But that would not change the LI or LABEL tags' ID, they remain 'sequential'.

re 2) when you click on the field, the default 'Your Name' should be cleared, however, when you reenter 'Your Name' manually, then yes cforms will accept because it could be a -certainly funny- valid name.

to exclude that phrase from valid entries, you need to deploy REGEXP in the fields REGEXP configuration to exclude that phrase.

Paul.

* Paul Silter
July 31, 2012
2:23 am
zeniph
Guest

I use the below javascript to give each LI a class name that matches the ID the respective INPUT element.

Means each LI, LABEL and INPUT now has an ID or class with consistent naming convention.

if( jQuery("form#cformsform").length > 0 ) {
            //loop over each INPUT
            jQuery('form#cformsform INPUT').each(function(index) {
                 //get current INPUT's ID
                var currentIdname = jQuery(this).attr('id');
                //Assign name of ID as a class to its parent LI
                jQuery(this).parent().addClass(currentIdname);
                //Assign name of ID as a class to previous LABEL
                jQuery(this).prev().addClass('label-'+currentIdname);
            });

    }

Oliver – thank you for your plugin and all the effort you've put in over the years. Is there a logic to why you didnt want to add a custom ID to the LI as well as the INPUT?

I find this way so much easier to style but I guess I'm assuming that I must be coming at it from the wrong angle if you didn't do it that way!

cheers z

July 31, 2012
6:31 am
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

Great thinking!

And actually you can enable custom LI (and LABEL) IDs in cforms, simply go to the Styling cforms tab and check the two respective settings. :-)

Forum Timezone: Europe/Berlin

Most Users Ever Online: 959

Currently Online:
19 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: 3708

Members: 1463

Moderators: 3

Admins: 2

Forum Stats:

Groups: 1

Forums: 4

Topics: 5307

Posts: 18665

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

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

Administrators: Oliver (6400), Nicky (3)