Jump to content
Sign in to follow this  
jonathan-fagan

cforms - setting text box lengths to fit the sidebar

Recommended Posts

cmhjon

Hi, I also would like to add a cforms form to a sidebar but the input field width is too long. Can you provide the code to shorten the field width and where I need to enter this code? Thanks! Jon :-)

Share this post


Link to post
Share on other sites
cmunns

Do either one of you guys have a link to the site with the form on it?

Share this post


Link to post
Share on other sites
cmhjon

Hi Adam, Unfortunately, the site I am building is behind our firewall and is not published to the internet :( I could easily make arrangements to have you remote view my desktop where you could see the site. Jon

Share this post


Link to post
Share on other sites
Kate

Hey Jon, Why don't we do this: Can you just post the form code here, and then we can give you some code to test out. Basically, it will look something like this:

.formClassNameHere input{width:150px;}

(Of course, you would input your own width value.)

Share this post


Link to post
Share on other sites
cmhjon

Hi Kate, I was just adding a cforms widget to the sidebar. I don't see any code per say. I did look at the source of the page and the code for the form is a lot more than just one line. Should I be using a text (or other?) widget to do what you're saying? Jon

Share this post


Link to post
Share on other sites
cmunns

add this CSS to your custom code - custom css option area. `.cform {width:200px;}` adjust the px width accordingly

Share this post


Link to post
Share on other sites
cmhjon

Hi Adam, I pasted the following code into the Custom CSS option area: .cform Newsletter {width:200px;} (Newsletter being the name of the form I wish to shorten). I tried adjusting the field length down to 10px and it doesn't seem to be changing. Did I do something wrong? BTW, the form called Newsletter only has one text input field named, "Email:". Also, I have other forms used elsewhere in the site that I don't want shortened. Thanks, Jon :)

Share this post


Link to post
Share on other sites
catrina

You can try this:

input.cform newsletter

I think it's the "input" part that's missing in your code. You can try adding that and changing the width.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
cmhjon

Hi Catrina, I tried your suggestion and several combinations thereof with no luck. Can you provide the full line of code? Am I correct in using the cforms widget for adding the form to the sidebar? BTW, when it comes to adding code to the custom CSS field, is there a specific way that it needs done? Meaning that since I already have some custom code present for something unrelated, is it as simple as putting a carriage return after the code already present and then just pasting the line of code to shorten the form? Jon

Share this post


Link to post
Share on other sites
catrina

Here's something more specific:

input.cform {width: 200px;}

BTW, when it comes to adding code to the custom CSS field, is there a specific way that it needs done?
You don't have to put a carriage return after a CSS line that's already there, but it helps to create separate lines of CSS so you know that they're different pieces with separate functions.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
cmhjon

Hi Catrina, This just isn't working. Ok, here are my questions: 1. Do I use the cforms widget or a text widget for adding the form to the sidebar? If text widget, what is the complete line of code to add it (the name of the cform is called "newsletter")? 2. If the cforms widget is to be used, what is the complete line of code to add to the custom CSS field to shorten the text input field width? Again, the name of the cform is called "Newsletter" and the name of the text input field itself is named "Email:". My apologies for all this hassle but I am a total newbie at this and am not a PHP programmer. Many thanks, Jon :)

Share this post


Link to post
Share on other sites
kastelic

How about a screenshot of the source code?

Share this post


Link to post
Share on other sites
cmhjon

Hi Jimmy, Source code? I haven't written any source code per say. I am currently using the cforms widget to add the form to the sidebar. Do you mean use my browser to view the source code of the displayed page? If so, I can get you a screen capture of the specific portion of the code that deals with the form. Thanks, Jon

Share this post


Link to post
Share on other sites
catrina

Jon, that is correct. A screen capture of the code (or a paste of it in this forum) would be helpful.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
cmhjon

<div class="fbox"> <div class="fboxcopy"> <div id="cforms-3" class="widgetcform widget fix"><h3>Signup for our Newsletter!</h3> <div id="usermessagea" class="cf_info "></div> <form enctype="multipart/form-data" action="/wordpress/#usermessagea" method="post" class="cform newsletter cfnoreset" id="cformsform"> <ol class="cf-ol"> <li id="li--1" class=""><label for="cf_field_1"><span>Email:</span></label><input type="text" name="cf_field_1" id="cf_field_1" class="single fldemail fldrequired" value=""/><span class="emailreqtxt">(valid email required)</span> <fieldset class="cf_hidden"> <legend> </legend> <input type="hidden" name="cf_working" id="cf_working" value="One%20moment%20please..."/> <input type="hidden" name="cf_failure" id="cf_failure" value="Please%20fill%20in%20all%20the%20required%20fields."/> <input type="hidden" name="cf_codeerr" id="cf_codeerr" value="Please%20double-check%20your%20verification%20code."/> <input type="hidden" name="cf_customerr" id="cf_customerr" value="yyy"/> <input type="hidden" name="cf_popup" id="cf_popup" value="nn"/> </fieldset> <p class="cf-sb"><input type="submit" name="sendbutton" id="sendbutton" class="sendbutton" value="Submit" onclick="return cforms_validate('', false)"/></p></form><p class="linklove" id="ll">cforms contact form by delicious:days</p></div> </div> </div>

Share this post


Link to post
Share on other sites
Kate

Hi Jon, Thanks for the code paste. For the class: you'll want to either use .cform as Adam suggested, or .newsletter. Since they're on the same "level", you'll have to use one or the other... you can't use both.

Share this post


Link to post
Share on other sites
cmhjon

Hi Kate, Thank you for the reply! :) I'm sorry but I don't understand. What specific code am I changing? Where am I changing it? What file am I editing if any? Please understand that I am new to all this and am not a programmer. The code I pasted above was generated from using the cforms widget. Thanks, Jon

Share this post


Link to post
Share on other sites
cmhjon

I found a separate contact form plugin and was able to get everything working. Thanks to everyone who tried to help me! :) Jon

Share this post


Link to post
Share on other sites
jeomiland

Hi all Just found this thread and have a similar but different issue. Using Firebug, I see a class ".single" that seems to override the cform css. In cform css I have the input fields set to 150px; and I see no .single class. In Firebug I see this class is set to 97% which overrides my 150px and forces the lables and input fields onto separate lines. I wish to have the form look simmilar to the default - with label then field then the "required" text (if applicable). Your wisdom is appreciated... Form is at: http://itaptouch.com/thanks-for-your-message/ thanks JE

Share this post


Link to post
Share on other sites
catrina

I think you need to be more specific with the CSS. For example:

#cf2_field_1 input.single
,
#cf2_field_2 input.single

, etc.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×