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="https://localhost/wordpress/" method="post">

        <div class="gsom-optin-form" id="gsom-optin-form-12805947279">
        </div>
        </form><noscript><a href="https://www.glockeasymail.com/wordpress-email-newsletter-plugin-for-double-opt-in-subscription/">G-Lock opt-in manager</a> for <a href="https://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

Viewing 4 replies - 1 through 4 (of 4 total)

  • Try putting it in an unordered list, and wrap the list in a div

    #YourForm ul li{display:inline;list-style-type:none;}

    Thread Starter john_london

    (@john_london)

    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;}

    Thread Starter john_london

    (@john_london)

    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?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Aligning a submit button in a form – please help’ is closed to new replies.