Aリンクでのフォーム内容を送信する方法を教えてください

Question

いつも当サイトにて勉強させていただいております。

ツールはezHTNLを使用しております。

今回はAリンクでのフォーム内容をPOSTする方法をご教授いただいきたいのですが

背景

・フォームからメール（メルマガ）を登録する　←メールのみです

・ボタンに動きのあるCSSを使用した画像を使用（俗に言うプルプルボタン）

・ボタンを押すとメールの登録確認画面に行く

イメージとしては

<style type="text/css" class="style_default">.xx,.yy・・・</style>
<style type="text/css" class="style_option">.zz・・・</style>
<button class="xx yy" type="image"><img class="zz" src="○○.png"></button>

※○○.pngは大きめのボタンでCSSによりプルプル動くものです
当方商用利用を予定しており、動かないと困りますのでCSSの変更は厳しいです

上記のことを行いたいのですが、実際のHTMLを記述しますと

<form method="post" action="https://hoge.jp/hoge">
	<input type="hidden" name="Publisher_Id" value="12345" />
	<input type="hidden" name="Form_Cd" value="hogehoge" />
	<input type="hidden" name="charcode" value="auto" />
	<dl class="pub_form center">
      <dt class="t28 bold text_center red">
        <label for="touroku_mail">※メールアドレスをご入力下さい<span class="require"></span></label>
      </dt>
	    <dd>
	    <input type="text" name="Mail" size="40" istyle="3" mode="alphabet" value="" class="t40" placeholder="E-mail" align="center">
	    </dd>
	  <dt></dt>
	</dl>

    <div class="bcreate72">
    <style type="text/css" class="style_default">.animate72,.a-option72,.a-btnsub72～～</style>
    <style type="text/css" class="style_custom">.a-btn72～～</style>
    <p align="center">
    <button type="image" class="a-btn a-btn72" href="" target="_blank" data-id="72"><img class="a-main animate animate72" src="img/botton01.png" alt="" data-recalc-dims="0" />
    </button>
    </p>

</form>

×上記の<button>～</button>タグでtype="image"にすると、name要素が処理されメルマガのサイトに情報が飛ぶのですが

何故か画像の透過色がリセットさてしまう。
（こちらも原因わかる方いらっしゃいましたら教えてください）

また、上記<button>～を以下のように<a>～</a>にすると、こちらでは画像が綺麗に表示はされるのですが

<a class="xx yy" href="index.html" type="image"><img class="yy" src="○○.png"></a>

×<a class="xx" href="**.html">画像</a>だとうまくいくが、フォーム情報がうまく飛ばせない状態となります。

といった状態でハマってしまっており、サイトを調べたのですが

href="javascript{}"・・・

にすることで送信できるとの情報を得たのですが、当方あまりスクリプトは
得意ではなく、こちらにご相談を伺った次第です。

メール登録に関しましては、メルマガのID等を紐付けないといけませんので
そこも思慮しております。

上記の×2つがどちらかが解決できましたらOKなのですが、分かる範囲で構いませんので
どなたか詳しい方教えていただけないでしょうか。

本来こちらで聞くべき内容ではない場合は、その旨ご意見を頂けないでしょうか。

よろしくお願いいたします。

ご指摘いただきましたフォームでやってみたところ「スクリプトやActiveXコントロールを実行しないように・・・」との記述後許可をすると
画面のようになりました。

<form action="https://hoge.jp/hoge" method="post" name="e-mail">
    <input type="text" size="10" />
    <a href="javascript:document.e-mail.submit()">投稿する</a>
</form>

以上ですが、なんとか完成の状態まで近づけたいのでご協力をお願い致します。

Answer 1

これとか
クリックしたらフォームをsubmitするテキストリンク

「hogeForm」の部分には任意の名前でOKです。
formのname属性の値を割り当てます。

Comments

[reyjd]

早速のお返事ありがとうございます。
試しにリンクを作ってみて見ましたが、「ページが表示されません」と出てしまいました。

当方の情報が足らなかったので、もう一度質問内容を精査しますので、ご指導を頂けないでしょうか。

よろしくお願いいたします。

[m.ts10806]

たぶんformのsubmit先（actionの設定値）ではないでしょうか。元々の送信先に修正してください。

[reyjd]

お返事ありがとうございます。
submit先を実際の設定値にして見ましたが、画像のような状態になってしまいました。（IE）
chromeではリンク先に飛べず、困っております。
scriptの内容というのは記述しないでもよろしいのでしょうか？

[m.ts10806]

ハイフンではなくアンダーバー、またはいずれもなしではどうですか？

[m.ts10806]

e-mail　→　e_mail または email

[reyjd]

お返事ありがとうございます。
メルマガのサイトには飛びましたが「パラメータが不正です」
とのメッセージが出ました。
少し前進したように思えます。
actionにはメルマガサイトのURLとフォームIDと会員番号をURLの形で送っています。
https://hoge.jp/hoge12345/hogehoge
　　　　　　↑　　　↑　　　　　↑
　　　　　サイト　会員番号　　フォームID
ちなみに上記を実際のものに当てはめてみるとクリックしても
反応がないようです。
これについてはメルマガサイトに問い合わせてみます。

[m.ts10806]

そうですね。パラメータ部分は受け取り先のサイトによるので必要なパラメータを渡していないか渡す値がただしい形式じゃないかどちらかと思います。
それぞれinputのhiddenにきちんと正しいnameとそれぞれの値をセットしてみては？
methodもgetかpostかも受け取り先の仕様によるので確認して実装してみてください。

[reyjd]

了解しました。
お付き合い頂きありがとうございました。
進捗ありましたら書き込みさせていただきます。

よろしくお願いいたします。

Answer 2

一度CSSを見直し、確認したところ<button>タグのスタイルの記述がダブっていたようです。
お騒がせしました。