Posted 1 year ago #
It seems like it is impossible to float the label div and the text field div so that they are side by side instead of the label being on top of the text field.
For example, I'd like to do the following:
Name: [TEXT FIELD]
Email: [TEXT FIELD]
...
instead of
Name:
[TEXT FIELD]
Email:
[TEXT FIELD]
I've tried many CSS permutations and can't get it to work right since each label and text is not grouped within a parent div.
Is this possible?
Posted 1 year ago #
It is hard coded that way. sorry.
Awww, Mike, c'mon (lol). I'd love to be able to do this on my forms. Especially aligning radio buttons on the same line with the label text. That would be cool. Any way to persuade you? Money?
Posted 1 year ago #
I work on this part time in my spare time. I have that on a feature list.
Mike
Wouldn't that just be something you can do in the plugin's code files somewhere? I've looked around in the file editor for FSC, but I couldn't figure out where this might be done.
Great to hear it's "on the list" - thanks :)
Posted 1 year ago #
This worked for me =>
CSS style for form input titles on the contact form:
text-align:left; padding-top:5px; float:left; clear:left; border-bottom:1px solid silver; width:125px;
CSS style for form input fields DIV on the contact form:
text-align:left; display:inline-block;
But that creates another problem. Check boxes and radio buttons are placed in the same div as their label instead of a separate div like text fields. You can see what happens here:
http://fixyourweb.com/eco/request-a-brochure/
Posted 1 year ago #
It would be VERY helpful if radio buttons and check boxes weren't made the same width as text input fields, but WERE placed in a separate div the way text fields are.
Posted 1 year ago #
I couldn't get my text to align either. http://www.asmconline.org/contact-us-test/
Basic form, but the titles are above the field and are just way off in alignment.
Posted 1 year ago #
Hi dcloud,
maybe a bit late but I found a solution. I created my own own div!
Worked for me:
http://tafeweb.com/19007/thomas-anstoetz/bazaar-cms/feedback
Cheers
Thomas
I used the CSS float and clear contexts, that worked fine, but then I had to add specific margins, etc., to get them to line up as if they were on the same line and not slightly offset from each other.
Posted 1 year ago #
Hey Tom,
That's exactly what I'm looking to do! can you tell me how exactly you got the labels on the same line with your input fields? Thanks!
Posted 1 year ago #
Hi Mark
actually I'm not quite sure if this helpful for you. I created several div's and classes in my stylesheet. I opend the DIV in Welcome introduction field (under settings)
here are my div and class:
#my_form label {float:left; width:120px; font-size:14px; margin-right:5px; margin-left:5px; text-align:right;}
#my_form .input { border: 1px solid #999; margin-top:5px;}
In the settings of the form you have also to delete the width in the CSS Style Feature.
Try this and let me know if that works.
Cheers
Tom
Posted 1 year ago #
floats and clears make it easy enough, but to 'thefiddler' instead of messing with margins, just make the label fields a fixed width - voila.
Posted 1 year ago #
Tom-
Worked like a charm. For the Div to control the label (ie, the float: left;), I referenced the Id tag from the plugin, #si_contact_form1:
#si_contact_form1 label {...
I also followed Bitkahuna's idea of giving fixed widths to both label and input.
Thanks for the tip, and for sharing your site. --Bill
Posted 1 year ago #
Is there any way time zone can be changed?
Posted 1 year ago #
You can customise the html of your code by replacing the shortcode with your own function.
Use the code at http://wordpress.pastebin.com/96XHmJpj in your theme or override plugin.
It's not at all elegant but it will do the trick for the time being.
Thanks, stoetzi for your code and bitkahuna for refining my idea. I'm not expert in CSS, I just messed around till something worked. But that's a way better way to do it.
I used both in my most recent implementation of the plugin, and it worked great. Thanks again.
Anyone know if there's a way to keep the field lined up with the label, when you have "Optional notes/help" entered for extra fields? Using a stoetzi bitkahuna's ideas/code, plus a clear:left on the label forces the notes/help down to the next line below the previous label & field, but then the field lines up with the notes/help, and not the label. Any ideas?
The ideal would be for the notes/help to have its own CSS, so it could go the full-width of the form, while the label and field each only go half-way, beneath it. But that's not included in the plugin, unless Mike decides to add it in an update. But he's updated a lot lately, so I'm not sure if he'll want to or not.
So I've been playing with it trying to make it work. I only know the little I do about CSS from trial and error. I tried putting this in the style.css file of my child theme:
#si_contact_form2 p {
width: 550px;
text-align: left;
float: left;
clear: both;
display: block;
}It obeys the width and the text-alignment. But it doesn't seem to "clear" both sides or display as a block, if I understand those things correctly. I've tried each without the other, and nothing seems to work. Now it appears the input fields are just floating up over top of the notes/help, which is really strange, since the labels still stay down below them like they're supposed to.
Posted 1 year ago #
This feature will be available in 2.9.7
See here for instructions:
http://www.fastsecurecontactform.com/form-labels-left
This is an awesome addition. Thanks again for the great plugin!
Posted 1 year ago #
The new code has been added to the current download even though it is
still version 2.9.6
http://downloads.wordpress.org/plugin/si-contact-form.zip
Here is how you can use it today is you do not want to wait for version 2.9.7
On the plugins admin page, find Fast Secure Contact Form and click “Deactivate”.
When the plugin is deactivated, the forms and settings are still saved
in the database. Do NOT click “Delete” or your forms will be deleted!
Manual upgrade:
Download the Fast Secure Contact Form zip file:
http://downloads.wordpress.org/plugin/si-contact-form.zip
Unzip the file on your computer.
Use a FTP program such as FileZilla to connect to your web server .
FTP File Transfer this folder: /si-contact-form/ from your downloaded
files to the folder on your server: /wp-content/plugins/
On the plugins admin page, find Fast Secure Contact Form and click
“Activate”. The plugin will now be activated.
Mike, this is awesome news. However, when I go to upload the new si-contact-form folder to my plug-in folder (on the server) it wants to overwrite the one that is already there. Should I let it do this?
And while we're on the subject, is there a way to make the one-line input boxes taller? -- Nevermind, I figured it out. CSS once again.
Well I did what you said and I don't see any Reset to top or left. All I have is Reset the styles to default.
Ok, I figured out what I did wrong - I didn't properly upload the folder to my server. Now I see the top/left settings. Unfortunately they don't line up very well and there still doesn't seem to be any way to get the same behavior with the radio buttons.
Any news on a radio button on same line update?
Posted 1 year ago #
dcloud, Do you have a URL so I can see the problem you have?
Radio buttons work fine both ways on my test site,
By default radio and checkboxes are displayed vertical. Here is how to make them display horizontal: add the tag {inline} before the label, like this: {inline}Pizza Toppings:,olives;mushrooms;cheese;ham;tomatoes.
Note: some themes have CSS that forces radio and checkboxes to always be vertical.
Try this: edit your theme style.css and add this at the bottom:
label {display: inline;}
If that does not work a CSS expert needs to diagnose the theme CSS problem.
The form I'm working on is on this page: http://hide-e-hole.com/adoption-application/
I would like to be able to tidy each section up. Right now it's kind of a mess and anyone who tried to fill out the form could be confused by the bad alignment of text in each section.
Posted 1 year ago #
dcloud, I used FireFox Web Developer Toolbar plugin to examine and edit your CSS in real time.
FireFox Web Developer Toolbar is a great tool for any webmaster to use:
This menu contains my favorite feature of the Web Developer Toolbar: Edit CSS. When you activate this feature, you can edit the CSS of a web page in a sidebar in real time and see your changes updated on the web page as you type them. For example, maybe you want to see what your site would look like with CSS changes just by editing the CSS in the sidebar. As soon as the sidebar is closed, the changes are discarded.
Another useful feature in the CSS menu is Disable External Styles which allows you to remove all the external CSS from a web page. It is good for troubleshooting if the theme or plugin is causing the problem.
Try this: edit your theme style.css and add this at the bottom:
label {display: inline;}
input {height: inherit;}
Mark, thanks a heap! That worked great!
I have the WebDev toolbar, but I can't figure out how to change anything on the page. I like Firebug because at least it will highlight where you're at so you know.
Oops, I meant "Mike" - sorry.
This topic has been closed to new replies.
