cforms II User Forum

	Current User: Guest	FAQs

cforms II User Forum Troubleshooting CSS trouble with cForm

CSS trouble with cForm

Page: 1

Reply to Post

Add a New Topic

Post

Guest

John Biddle

5:50 am December 22, 2008

Quote and Reply

Please replace the ??? with your data!

URL to the FORM: http://www.poolstudent.com/blog/contact
The browser used: Firefox 3.0.4
cforms version: 9.4
Your Wordpress version: 2.6.3

[desc]:
_Oliver,

Thanks for writing & maintaining the cForms Wordpress plugin. I looked at a number of others and none had nearly the flexibility that you built into yours, so I went with cForms; you're way ahead of the competition. I've created a simple contact form but am having a few difficulties that you might be able to help me with.

My form looks pretty good, to me at least, in Firefox, but It looks much worse in IE7. Oddly enough, in IE6 it looks like it does in Firefox. The big issue is the white line that runs across the top of each of the fieldsets. Any idea as to how I can change my css to eliminate it? I realize that this is not an error or bug on your part, but an issue in CSS because of the non standards compliance of IE7, but if you have any ideas I love to hear them. I'll continue trying things, but I went ahead and published it so you could see it 1st hand at:

http://www.poolstudent.com/blog/contact/

I changed the error highlighting for empty fields to a 2px red border around the entry box and eliminated the other highlighting. It works for me. Then I added a couple of regular expressions, one to test for a full name and one to require a match between two entries of the user's email. The error messages are drk grey and overlap the icon. I'd like to eliminate the overlap, make the error message text red, and also put the 2px red border around the entry box as in the case of no entry. I am stumped as to how, though.

Lastly, I do not know how to get the HTML_element_ID for the 1st email address field to use in the regex for the 2nd email address field. I looked in the source for the form but saw nothing that looked anything like "cf2_field_2".

Thanks in advance for your assistance.

John Biddle

Admin

Oliver

Munich, Germany

posts 6237

9:59 am December 22, 2008

Quote and Reply

Thanks John.

Usually (99.9%) of the times CSS issues either are due to browser issues (like you mentioned) or are related to the general WP theme in use (style.css).

Unfortunately many CSS developers code their themes way too aggressive, overwriting more subtle CSS used in other areas (e.g. by plugins).

the icon can be fixed by cforms.css (line 261):

ol.cf-ol ul.cf_li_text_err li {
padding-left:17px !important;
…

ul.cf_li_text_err {
padding:0 !important;
…

note: the icon was meant to reside on a white BG, so you may need to adjust the icon to look perfect (slight white edges).

re: the fieldset

that's probably the area that browser display the worst aross the board, and where they show the biggest discrepancies.

My general recommendation, if the default layout doesn't work (for whatever reason): set the fieldset to not display (via CSS: display:none; ) and instead include another text-only field with the same label.

This way you still have your data segmentation and *all* the full control of how your (fake) Fieldset Title should look like.

Lastly, you enabled custom Names/IDs on your form, hence it uses your labels as IDs/Names for the HTML tag: in your case it'd be now: "Email" for the first one to be used in the regexp of the second.

** FAQS ** cforms home page ** donations

Guest

John Biddle

7:02 am December 23, 2008

Quote and Reply

Oliver,

Thanks for your prompt and useful reply. I've used your info to correct the error message / icon overlap and text color issue, thanks.
I'd still like to make the border red on fields with regex errors as I have done with empty fields. Not sure where I'm missing that.
I haven't yet made changes to the icons re:background color as you pointed out, but I will when I get a little more time. Same with your suggested changes to the fieldsets, which soulds like a good idea.

I now have 2 additional issues to report. First, while I was testing the retype email field matching the email field, I entered two different addrs, john@poolstudent.com and john@poolstudent.comm at various times. If I entered the one with comm it would give an error (as it should), and when I entered the .com it would not, again correct, but after submitting the form with the correct .com address, the form reverts to displaying the .comm addr. Very odd indeed. The data in the database was correct.

Second issues is if user doesn't enter anything in my retype email field and submits, he gets the error message above the field twice, apparently once for empty and once for regex failure. Can I do something about that?

Thanks again for your help, and may you and yours have the best of holidays.

John Biddle

–
http://www.poolstudent.com/blog

Admin

Oliver

Munich, Germany

posts 6237

9:53 am December 23, 2008

Quote and Reply

I'd still like to make the border red on fields with regex errors as I have done with empty fields. Not sure where I'm missing that.

did you check those fields to be required (first flag/checkbox)?

…the .com it would not, again correct, but after submitting the form with the correct .com address, the form reverts to displaying the .comm addr. Very odd indeed. The data in the database was correct.

this could simply be a browser issue remembering your other attempts and providing with a quick method of resubmitting. as long as the admin email / db tracking display the input fine, it's all good.

….retype email field and submits, he gets the error message above the field twice, apparently once for empty and once for regex failure. Can I do something about that?

you can turn off the fancy error messages and/or the embedded err msgs.

to cforms it is the same thing whether a regexp triggered the error or a required field has not been filled by a user.

happy holidays!

** FAQS ** cforms home page ** donations