コンタクト情報の上書き

[Miyatake]

初めて投稿をします。

同様の問い合わせを検索はしたのですが、見つからなかったので質問をさせてください。

1. 例えばすでに登録されている「田中」さんというお客さまがいるとします。その方が問い合わせフォームなどで、名前を「Tanaka」と入力してフォームを送信すると、コンタクトの登録名は「Tanaka」に上書きされてしまうのでしょうか。
2. 上書きされてしまうような仕様の場合、それを避ける方法などはありますでしょうか。

[assi · Accepted solution]

@Miyatake 

> 例えばすでに登録されている「田中」さんというお客さまがいるとします。その方が問い合わせフォームなどで、名前を「Tanaka」と入力してフォームを送信すると、コンタクトの登録名は「Tanaka」に上書きされてしまうのでしょうか。

はい、上書きされてしまいます。

> 上書きされてしまうような仕様の場合、それを避ける方法などはありますでしょうか。

正直これといった最適解がなく…例えば例に挙げていただいたように「名前が英語になるのを防ぎたい」ということであれば、ワークフローで以下のように組めば一応実現は可能です（トリガーは再登録設定済み。日本語復元用に「姓（退避用）」というプロパティも作っています）。ただ「名前が英語」の判定のif/then分岐の箇所が「アルファベットを1文字でも含めば」という条件になってしまっているため、だいぶ乱暴でおすすめ出来ないな…というのが正直なところです。

[吉田成一 · Accepted solution]

上書きされてしまいます。

そこで、HubSpotのフォームを設置したWebページ/LPのHTML内に、

</main>
<script>
window.addEventListener('focusout', (event) => { // フォーム読み込み完了のイベントに変更
});
</script>

上記JSを仕込み、変更されたくないINPUT要素を取得後、readonlyを流し込む

ようなことをするのもありかもしれません。

因みに私は、フォームのHTML（更新時にポップアップでHTMLコードが出力されるやつです）を、

自WebサーバのWebページに設置し、

                    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>

                    <script>

                        const css = `<style>

.hs-button {

    border-color: #fff !important;

  --tw-ring-offset-color: #fff !important;

  --tw-ring-offset-shadow: 0 0 #0000 !important;

  --tw-ring-color: rgb(59 130 246 / 0.5) !important;

  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;

  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;

  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;

  --tw-text-opacity: 1 !important;

  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;

  font-weight: 500 !important;

  font-size: 1.25rem !important;

  line-height: 1.75rem !important;

  text-align: center !important;

  padding-left: 2.25rem !important;

  padding-right: 2.25rem !important;

  padding-top: 0.75rem !important;

  padding-bottom: 0.75rem !important;

  --tw-gradient-from: #9333ea !important;

  --tw-gradient-to: #3b82f6 !important;

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;

  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;

  border-radius: 9999px !important;

  justify-content: center !important;

  align-items: center !important;

  display: inline-flex !important;

}

label {

  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;

}

.hs-field-desc {

  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;

}

.hs-input {

  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;

  --tw-border-opacity: 1 !important;

    border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important;

    border-radius: 0.375rem !important;

    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;

    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;

    margin-top: 0.25rem !important;

    background-color: white !important;

    color: black !important;

}

legend {

  font-family: system-ui !important;

}

.hs-form-required {

  font-size: 0 !important;

}

.hs-form-required::after {

  content: "必須" !important;

  font-size: .8rem !important;

  background-color: #E74C3C !important;

  display: inline-block !important;

  color: #fff !important;

  padding: 0.2rem 0.3rem !important;

  border-radius: 0.5rem !important;

  font-size: 0.8rem !important;

  text-transform: uppercase !important;

  text-align: center !important;

  white-space: nowrap !important;

  margin-left: 0.5rem !important;

}

.hs-button:hover {

  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;

  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;

  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;

  --tw-text-opacity: 1 !important;

  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;

  font-weight: 500 !important;

  font-size: 1.25rem !important;

  line-height: 1.75rem !important;

  text-align: center !important;

  padding-left: 2.25rem !important;

  padding-right: 2.25rem !important;

  padding-top: 0.75rem !important;

  padding-bottom: 0.75rem !important;

  --tw-gradient-from: #9333ea !important;

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;

  --tw-gradient-to: #3b82f6 !important;

  background-image: linear-gradient(to bottom left, var(--tw-gradient-stops)) !important;

  border-radius: 9999px !important;

  justify-content: center !important;

  align-items: center !important;

  display: inline-flex !important;

}

.hs-button:focus {

  --tw-ring-color: rgb(147 197 253) !important;

  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;

  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;

  box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;

  --tw-text-opacity: 1 !important;

  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;

  font-weight: 500 !important;

  font-size: 1.25rem !important;

  line-height: 1.75rem !important;

  text-align: center !important;

  padding-left: 2.25rem !important;

  padding-right: 2.25rem !important;

  padding-top: 0.75rem !important;

  padding-bottom: 0.75rem !important;

  --tw-gradient-from: #9333ea !important;

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;

  --tw-gradient-to: #3b82f6 !important;

  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;

  border-radius: 9999px !important;

  justify-content: center !important;

  align-items: center !important;

  display: inline-flex !important;

}

.actions {

    margin-top: 18px;

    margin-bottom: 18px;

    padding: 17px 0px;

    text-align: center !important;

}

</style>`;

                        hbspt.forms.create({

                            region: "na1",

                            portalId: "xxxxxx",

                            formId: "xxxxxxxxxxxxx",

                            onFormReady: function($form) {

                                $("iframe.hs-form-iframe").contents().find("head").append(css);

                            }

                        });

                    </script>

上記のような荒業でボタン、フォント自体もベースのデザインに寄せたりしました。（めっちゃ大変でした）

頑張ればなんとかなります。

[Miyatake]

早速のご回答ありがとうございます。

仕様と回避方法について理解ができました。

回避方法の条件の部分は実装にあたり検討が必要な箇所かとは思いましたが、方法の1つの候補とさせていただきます。

もし他にも何かいい方法がありましたらまた教えていただければ幸いです。

引き続き宜しくお願いします。

[assi]

@Miyatake 

いまちょっと思い付きました（といっても少なからず工夫が必要なのですが…）。

まず大別すると

• 値を入れられる前に対策するか
• 値を入れられてから対策するか

の2つに分けることができ、先ほどご紹介したワークフローの例は後者になります。後者の例としては、他にもOperations Hubを使ったり、それ専用のシステムを作ったりと、やろうと思えば幾らでもできますが作るのに費用も時間もかかるのが正直なところです。

であれば前者の考え方で、フォーム入力時に手を加える方法が考えられます。

• HubSpotフォームの入力をJavaScriptで監視し
  • 望ましくない文字列であればエラーを出して送信できないようにする
  • 「Tanaka」と入力されれば「もしかして『田中』ですか？」のようなサジェストを実装する（こちらはちょっと大変ですね）

などが思い浮かびました。いずれにせよ、ちょっとコードを書くのは免れない気がします。

[Miyatake]

追加の情報もありがとうございます。

そうですね。。

入力前の対策も工数かかってしまいそうですね。。

でも大変勉強になりました！

参考にさせていただきます。

[assi · Accepted solution]

@Miyatake 

> 例えばすでに登録されている「田中」さんというお客さまがいるとします。その方が問い合わせフォームなどで、名前を「Tanaka」と入力してフォームを送信すると、コンタクトの登録名は「Tanaka」に上書きされてしまうのでしょうか。

はい、上書きされてしまいます。

> 上書きされてしまうような仕様の場合、それを避ける方法などはありますでしょうか。

正直これといった最適解がなく…例えば例に挙げていただいたように「名前が英語になるのを防ぎたい」ということであれば、ワークフローで以下のように組めば一応実現は可能です（トリガーは再登録設定済み。日本語復元用に「姓（退避用）」というプロパティも作っています）。ただ「名前が英語」の判定のif/then分岐の箇所が「アルファベットを1文字でも含めば」という条件になってしまっているため、だいぶ乱暴でおすすめ出来ないな…というのが正直なところです。