Aligning a submit button in a form – please help
-
Okay guys, so at the footer of my site I want to have a simple mailing list entry form using the gsom plugin.
So I’ve got the footer like so:
<div id="footer"> <?php wp_footer(); ?> <div id="mailing_list"> <?php if (function_exists('gsom_put_form')) gsom_put_form(); ?> </div> </div>Which results in the following code (I’ve removed some of it for clarity):
<div id="footer"> <div id="mailing_list"> <h2></h2><form name="gsom-optin" action="http://localhost/wordpress/" method="post"> <div class="gsom-optin-form" id="gsom-optin-form-12805947279"> </div> </form><noscript><a href="http://www.glockeasymail.com/wordpress-email-newsletter-plugin-for-double-opt-in-subscription/">G-Lock opt-in manager</a> for <a href="http://www.glockeasymail.com">direct email software</a></noscript><script type="text/javascript"> (function(){ function rungsom() { var gsomForm = [{"label":"Join our Mailing List","name":"gsom_email_field","oldName":"","value":"","type":"text"},{"label":"","name":"gsomsubscribe","oldName":"","value":"Subscribe","type":"submit"}]; gsomBuildForm({makeDivs: true, arr:gsomForm, place:"gsom-optin-form-12805947279"}); } if (window.addEventListener) { window.addEventListener("load", rungsom, false); } else { window.attachEvent("onload", rungsom); } })(); </script> </div>And my CSS is as follows:
#mailing_list { float: left; width: 970px; padding: 5px 0 0 10px; margin: 0 0 50px 0; background-color: #CCCCCC;} div.gsom-optin-form label { font-size: 15px; font-weight: bold; display: inline; color: #000000; padding-right: 10px; } div.gsom-optin-form input[type="submit"] { font-family: Arial, sans-serif; padding: 0; margin: 0; border: 0; background-color #333333; font-size: 15px; font-weight: bold; padding: 4px; float: left; display: inline; } div.gsom-optin-form input[type="text"] { font-family: Arial, sans-serif; margin-left: 5px; border: 1px solid #000000 ; font-size: 15px; font-weight: bold; padding:2px; width: 300px;}The problem is, the submit button won’t go on the same line as the input, and drops down to the next line – can anyone help please, it’s KILLING ME! Thanks, John
-
Try putting it in an unordered list, and wrap the list in a div
#YourForm ul li{display:inline;list-style-type:none;}Hi – thanks for the reply – the only thing is I don’t know how to put it into a list as the code is generated by the plugin!?
Instead of using the divs gsom-optin-form label and div.gsom-optin-form input.
<div id="YourForm"> <ul> <li> <li> <li> </ul> </div>and in the style.css
#YourForm ul li{display:inline;list-style-type:none;}The problem is the code for the div is generated by the plugin, not sure where it needs to be done – is there any other way?
The topic ‘Aligning a submit button in a form – please help’ is closed to new replies.