web-dev-qa-db-ja.com

Reactのカスタムmailchimpサインアップフォーム

Mailchimpサインアップフォームを追加したい反応アプリがあります。私はカスタムサインアップフォームを作成しており、ユーザーに姓名と電子メールを入力してサインアップしてもらいます。私はキャンペーン関連のものを扱っていません。私が達成しようとしているのは、彼らがサインアップすると、サブスクリプションを確認するためのメールを受け取ることです。

Mailchimpガイドの内容を実行しました http://kb.mailchimp.com/lists/signup-forms/Host-your-own-signup-forms ですが、常にエラー500が発生します。

これが送信イベントのコードです

subscribe(event) {
  event.preventDefault();
  axios({
    url: 'https://xxxxxx.us15.list-manage.com/subscribe/post',
    method: 'post',
    data: this.state,
    dataType: 'json'
  })
  .then(() => {
    console.log('success');
  });
}

そしてここにフォームがあります

<form onSubmit={this.subscribe.bind(this)}>
  <input type="hidden" name="u" value="xxxxxxxxxxx" />
  <input type="hidden" name="id" value="xxxxxxxxxxx" />

  <label>First Name</label>
  <input name="FNAME" type="text" onChange={this.handler.bind(this, 'FNAME')} required="true"/>

  <label>Last Name</label>
  <input name="LNAME" type="text" onChange={this.handler.bind(this, 'LNAME')} required="true"/>

  <label>Email</label>
  <input name="EMAIL" type="email" onChange={this.handler.bind(this, 'EMAIL')} required="true"/>
  <button type="submit" name="submit">Subscribe</button>
</form>

私はこのリンクの提案も試しました AJAX Mailchimpサインアップフォームの統合

基本的に、フォームへの入力の代わりに、URLとともにuおよびidを渡します。しかし、それもうまくいきませんでした。

誰もがこれを機能させる方法についてアイデアを持っていますか？ありがとう!!

javascriptajaxreactjsmailchimpnewsletter
13
ah_gel

可能です。 [1]

link で述べたように、MailChimpを使用すると、フォーム要素の値をクライアントに投稿して、ユーザーをメーリングリストに登録できます。それよりも高度なもので、APIを使用する必要があるため、CORSが必要です（つまり、クライアントはAPIを利用できません）。

React –を使用していない場合は、MailChimpの埋め込みフォームビルダーをコピーして貼り付けることができます。Reactを使用している場合は、次のことができます。

1）uおよびidの値を取得します

これは上記のリンクで概説されています。または、フォームビルダーに移動してアクションフィールドを見つけることができます。これはhttps://cool.us16.list-manage.com/subscribe/post?u=eb05e4f830c2a04be30171b01&amp;id=8281a64779のようになります。ここで、uおよびidはクエリ引数にあります。

2）onChangeおよびvalue属性をフォーム要素に追加します

単純なフォーム要素がいくつかあるだけであれば、タイプしても何も起こらないことに気付くでしょう。入力しても、入力要素内のテキストはレンダリングされません。 https://reactjs.org/docs/forms.html を読んで理由を理解してください。 （Reactは状態に対して単一の真の情報源を必要とします）。

値を更新する必要があります。これを行うには、バインドされている関数の状態を更新します。

<input 
  value={this.state.emailValue} 
  onChange={ (e)=>{this.setState({emailValue: e.target.value});} } 
/>

3）ボーナス：MailChimpのアンチスパムフィールドを含める

埋め込みフォーム内のコードを読むと、次のようなことがわかります。

<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_eb05e4f830c2a04be30171b01_8281a64779" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

これらをReactに含めるには、BabelおよびJSXの適切なフィールドを変更します。classはclassNameである必要があります。<input>タグは閉じて、スタイルをオブジェクトとして渡す必要があります。

まとめると、これがコンポーネント全体です

import React from 'react'

class SubscribePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        emailValue: '',
        fNameValue: '',
        lNameValue: '',
    };
  }

    render() {
        return (
                <form action="https://cool.us16.list-manage.com/subscribe/post" method="POST" noValidate>
                  <input type="hidden" name="u" value="eb05e4f830c2a04be30171b01"/>
                <input type="hidden" name="id" value="8281a64779"/>
                <label htmlFor='MERGE0'>
                    Email
                    <input 
                        type="email" 
                        name="EMAIL" 
                        id="MERGE0"
                        value={this.state.emailValue} 
                        onChange={ (e)=>{this.setState({emailValue: e.target.value});} } 
                        autoCapitalize="off" 
                        autoCorrect="off"
                     /> 
                </label>
                <label htmlFor='MERGE1'>
                    First name
                    <input 
                        type="text" 
                        name="FNAME" 
                        id="MERGE1" 
                        value={this.state.fNameValue} 
                        onChange={(e)=>{this.setState({fNameValue: e.target.value});}}
                    />
                </label>
                <label htmlFor='MERGE2'>
                    Last name
                    <input 
                        type="text" 
                        name="LNAME" 
                        id="MERGE2" 
                        value={this.state.lNameValue} 
                        onChange={(e)=>{this.setState({lNameValue: e.target.value});}}
                    />
                </label>
                  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="button"/>

                <div style={{position: 'absolute', left: '-5000px'}} aria-hidden='true' aria-label="Please leave the following three fields empty">
                    <label htmlFor="b_name">Name: </label>
                    <input type="text" name="b_name" tabIndex="-1" value="" placeholder="Freddie" id="b_name"/>

                    <label htmlFor="b_email">Email: </label>
                    <input type="email" name="b_email" tabIndex="-1" value="" placeholder="[email protected]" id="b_email"/>

                    <label htmlFor="b_comment">Comment: </label>
                    <textarea name="b_comment" tabIndex="-1" placeholder="Please comment" id="b_comment"></textarea>
                </div>
              </form>
        )
    }
}

export default SubscribePage

[1]：ユーザーはMailChimpページに移動し、メールのリンクをクリックしてサブスクリプションを確認するよう求められます。これを回避するには、APIを使用する必要があります

17
jimbotron

Reactでフォームを機能させようとして、確認ページを開かないようにしようとすると、多くの問題に遭遇しました。

これを回避する方法はいくつかありますが、最も簡単な方法は react-mailchimp-subscribe パッケージを使用することです。これは非常にまっすぐで、パッケージはかなり軽いです。このフォームを機能させるために必要なのは、リストの埋め込みフォームページでMailchimpが提供するアクションURLだけです。

パッケージを使用したくない場合は、ソースに飛び込んで、非常に簡単に行われていることを再現できます。変更する必要があるいくつかのことはからのURLです

http://xxxxx.us#.list.com/subscribe/post?u=xxxxx&id=xxxx

に

http://xxxxx.us#.list.com/subscribe/post-json?u=xxxxx&id=xxxx

-jsonを追加することに加えて、空のパラメーターcを追加する必要があります（これはjsonpリクエストで行うか、&c=?を追加してURLに追加できます）。

この実装を使用すると、リダイレクトされなくなり、すべてのメッセージがJSON形式で返されます。また、これを機能させるために、ページにスクリプトタグを配置する必要がないことにも注意してください。

参照：

  1. AJAX Mailchimpサインアップフォームの統合
1
Marco Gaspari

@ marco-gaspariのように、これに関しても多くの問題に遭遇しました。私の答えはそれらのバリエーションですが、それを機能させるために私にとって必要ないくつかの微調整がありました。

postの最後のactionを_post-json_に切り替え、_?_に等しいc属性を含めることに加えて（元のURLのuおよびid属性に加えて、これらすべてを組み込むことを選択しました） hidden入力フィールドとして）、出力を非表示の_<iframe>_にリダイレクトする必要もありました。それ以外の場合は、json応答で新しいページが開きます。

これは、カスタムフォームを使用したことが原因である可能性があります。しかし、他にも カスタムMailchimpサインアップフォーム を使用している場合は、このソリューションが役立つ場合があります。

_<form action="https://xxx.usxx.list-manage.com/subscribe/post-json" method="post" className="validate" target="hiddenFrame" >
       <!--u and id values from url generated by Mailchimp form builder -->
       <input type="hidden" name="u" value="xxxxxxxx" />
       <input type="hidden" name="id" value="xxxxxxx" />
       <input type="hidden" name="c" value="?" />
 </form>
    <iframe name="hiddenFrame" src="about:blank" style={{display:'none'}}></iframe>

_
0
Andy