WordPress.org

1. john_london
   Member
   Posted 1 year ago #

   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

2. FishDogFish
   Member
   Posted 1 year ago #

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

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

3. john_london
   Member
   Posted 1 year ago #

   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!?

4. FishDogFish
   Member
   Posted 1 year ago #

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

5. john_london
   Member
   Posted 1 year ago #

   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?

Topic Closed

This topic has been closed to new replies.