4

フィールドの下ではなく、送信フィールドの右側にある単純なhtml電子メール送信フォームに「送信」ボタンを配置する方法を見つけようとしています。このフォームは、誰かがメールを入力するとすぐに Mailchimp に追加されるように、私の Mailchimp メーリング リストに接続します。これが私がこれまでに持っているものです。助けてくれて本当にありがとう。

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

4 に答える 4

5

ちょっと待って…これってHTMLメールに入るの？

もしそうなら、ほとんどのクライアントで動作するように html をテーブルに書き直すことを検討する必要があります (信じられない場合は、Outlook 07 をチェックしてください)。

また、エンド ユーザーを保護するためのブロックが配置されているため、html メールではどのフォームも機能しません。これを「今すぐ FooBar にサインアップ」のようなリンクに変更することを検討してください。次に、フォームをウェブページに配置します。ユーザーはメール内のフォームに入力することに慣れていないため、フォームの完了率はせいぜいごくわずかです。

元の問題に関しては、css プロパティを使用して、それに応じてボタンを配置することができfloatますmargin-right。このjsfiddleをチェックしてください。

<input style="float:right; margin-right:12px;" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
于 2013-03-12T07:50:44.543 に答える
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>
于 2013-03-12T08:02:27.243 に答える
0 
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button pull-right">

クラス「pull-right」はBootstrapに属しています。

于 2013-03-12T07:51:41.907 に答える
0

方法1：ボタンを配置するために単純なcssidセレクターを使用しない理由。方法2：Webkitボックスを使用して、ボタンを水平方向に揃えます。方法3：ボタンを配置するために境界線が0のテーブルを作成することもできます。

于 2013-03-12T07:52:26.107 に答える