Positioning the submit button on an html form

Question

I am trying to figure out how to position the “send” button in a simple html email sending form to the right of the view field, and not under the field. This form is going to connect to my Mailchimp mailing list, so when someone enters their email, it is immediately added to Mailchimp. Here is what I still have. Truly appreciate the help.

<!-- Begin MailChimp Signup Form --> <link href="http://cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } /* Add your own MailChimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id="mc_embed_signup"> <form action="http://buzzpoint.us6.list-manage1.com/subscribe/post? u=dc0ba2324b61f63ec1128f785&amp;id=126599f6a4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div class="mc-field-group"> <label for="mce-EMAIL"> <span class="asterisk"></span> </label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </form> </div> <!--End mc_embed_signup--> 

Answer 1

Wait a minute ... Is this for logging into the html email address?

If so, you definitely need to rewrite html to tables so that it works with most clients (check in Outlook 07 if you don't believe me).

Also, any form will not work in html-letter because of the blocks designed to protect end users. Please consider changing this as the "Register Now With FooBar" link. and then fill out the form on the web page. In the best case, you will get the minimum speed for completing the form, because users are not used to fill out forms inside the letters themselves.

From the point of view of your original problem, you can try using the float and margin-right css properties to position the button accordingly. Check out jsfiddle .

 <input style="float:right; margin-right:12px;" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 

Answer 2

 <!-- Begin MailChimp Signup Form --> <link href="http://cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } /* Add your own MailChimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id="mc_embed_signup" style="position: relative;"> <form action="http://buzzpoint.us6.list-manage1.com/subscribe/post? u=dc0ba2324b61f63ec1128f785&amp;id=126599f6a4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div class="mc-field-group"> <label for="mce-EMAIL"> <span class="asterisk"></span> </label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="width: 80%;"> <input style="width: 15%; float: right; margin-top: -32px;" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <div class="clear"> </div> </form> </div> 

Answer 3

 <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button pull-right"> 

The pull-right class belongs to Bootstrap.

Answer 4

Method 1. Why don't you use a simple css id selector to place your button. Method 2: use the webkit box to horizontally align your button. Method 3: you can also make a table with a border of 0 to place your button.