https://maclogy.jp/wp-content/themes/maclogi_recruit/assets/js/contact-form.js?ver=1.0.0

1(function () {
2  function initContactPage() {
3    // タブ切り替え処理
4    const formSelectors = document.querySelectorAll(
5      ".contact-form-type-selector__item"
6    );
7    const newgraduateForm = document.getElementById("newgraduate-form");
8    const careerForm = document.getElementById("career-form");
9
10    // URLハッシュに基づいてタブを切り替える関数
11    function switchContactTab(hash) {
12      let defaultFormType = "newgraduate"; // デフォルトは新卒フォーム
13
14      if (hash === "#newgraduate-form") {
15        defaultFormType = "newgraduate";
16      } else if (hash === "#career-form") {
17        defaultFormType = "career";
18      }
19
20      // フォームを表示・非表示
21      if (defaultFormType === "newgraduate") {
22        if (newgraduateForm) {
23          newgraduateForm.style.display = "block";
24        }
25        if (careerForm) {
26          careerForm.style.display = "none";
27        }
28        // 新卒タブにactiveクラスを追加
29        formSelectors.forEach(function (item) {
30          item.classList.remove("contact-form-type-selector__item--active");
31          if (item.getAttribute("data-form-type") === "newgraduate") {
32            item.classList.add("contact-form-type-selector__item--active");
33          }
34        });
35      } else if (defaultFormType === "career") {
36        if (newgraduateForm) {
37          newgraduateForm.style.display = "none";
38        }
39        if (careerForm) {
40          careerForm.style.display = "block";
41        }
42        // キャリアタブにactiveクラスを追加
43        formSelectors.forEach(function (item) {
44          item.classList.remove("contact-form-type-selector__item--active");
45          if (item.getAttribute("data-form-type") === "career") {
46            item.classList.add("contact-form-type-selector__item--active");
47          }
48        });
49      }
50    }
51
52    // 初回読み込み時のタブ切り替え処理
53    switchContactTab(window.location.hash);
54
55    // ハッシュが変更された時（ページ内リンククリック時）のタブ切り替え処理
56    window.addEventListener("hashchange", function () {
57      switchContactTab(window.location.hash);
58    });
59
60    formSelectors.forEach(function (selector) {
61      selector.addEventListener("click", function () {
62        const formType = this.getAttribute("data-form-type");
63
64        // すべてのセレクターからactiveクラスを削除
65        formSelectors.forEach(function (item) {
66          item.classList.remove("contact-form-type-selector__item--active");
67        });
68
69        // クリックされたセレクターにactiveクラスを追加
70        this.classList.add("contact-form-type-selector__item--active");
71
72        // フォームを切り替え
73        if (formType === "newgraduate") {
74          if (newgraduateForm) newgraduateForm.style.display = "block";
75          if (careerForm) careerForm.style.display = "none";
76        } else if (formType === "career") {
77          if (newgraduateForm) newgraduateForm.style.display = "none";
78          if (careerForm) careerForm.style.display = "block";
79        }
80      });
81    });
82
83    // Contact Form（新卒・キャリア）の確認画面制御
84    function initContactForms() {
85      console.log("initContactForms() が呼び出されました");
86      // CF7のフォーム生成を待つ
87      const checkForms = () => {
88        const forms = document.querySelectorAll("form.wpcf7-form");
89        console.log("フォームの数:", forms.length);
90        if (!forms.length) {
91          // フォームがまだ生成されていない場合は少し待って再試行
92          console.log("フォームが見つかりません。100ms後に再試行します");
93          setTimeout(checkForms, 100);
94          return;
95        }
96        console.log("フォームが見つかりました。処理を開始します");
97
98        // CF7のレスポンスメッセージを初期状態で非表示にする
99        forms.forEach((form) => {
100          const responseOutput = form.querySelector(".wpcf7-response-output");
101          if (responseOutput) {
102            responseOutput.style.display = "none";
103            responseOutput.setAttribute("aria-hidden", "true");
104          }
105        });
106

107        forms.forEach((form) => {
108          // フォームの親要素（.inquiry-form）から確認画面を探す
109          const formWrapper = form.closest(".inquiry-form");
110          if (!formWrapper) {
111            console.log("formWrapper not found");
112            return;
113          }
114
115          const confirmScreen = formWrapper.querySelector(".js-confirm-screen");
116          const formInputScreen =
117            formWrapper.querySelector(".form-input-screen");
118          // 確認ボタンはformWrapper内の#confirm-btnまたはinput.js-confirm-btnで取得
119          const confirmBtn =
120            formWrapper.querySelector("#confirm-btn") ||
121            formWrapper.querySelector("input.js-confirm-btn") ||
122            formWrapper.querySelector("button.js-confirm-btn");
123          const backBtn = formWrapper.querySelector(".js-back-btn");
124          // 送信ボタンは確認画面内のbutton要素として取得
125          const submitBtn =
126            confirmScreen?.querySelector("#submit-btn") ||
127            confirmScreen?.querySelector("button.js-submit-btn") ||
128            formWrapper.querySelector("#submit-btn") ||
129            formWrapper.querySelector("button.js-submit-btn");
130
131          // デバッグ: 送信ボタンの取得を確認
132          console.log("送信ボタンの検索結果:", {
133            byConfirmScreenId: confirmScreen?.querySelector("#submit-btn"),
134            byConfirmScreenClass: confirmScreen?.querySelector(
135              "button.js-submit-btn"
136            ),
137            byFormWrapperId: formWrapper.querySelector("#submit-btn"),
138            byFormWrapperClass: formWrapper.querySelector(
139              "button.js-submit-btn"
140            ),
141            finalSubmitBtn: submitBtn,
142          });
143
144          // デバッグ: 確認ボタンの取得を確認
145          console.log("確認ボタンの検索結果:", {
146            byId: formWrapper.querySelector("#confirm-btn"),
147            byClass: formWrapper.querySelector("input.js-confirm-btn"),
148            byButtonClass: formWrapper.querySelector("button.js-confirm-btn"),
149            finalConfirmBtn: confirmBtn,
150          });
151
152          console.log("Elements found:", {
153            confirmScreen: !!confirmScreen,
154            formInputScreen: !!formInputScreen,
155            confirmBtn: !!confirmBtn,
156            backBtn: !!backBtn,
157            submitBtn: !!submitBtn,
158          });
159
160          if (!confirmScreen || !confirmBtn || !backBtn || !submitBtn) {
161            console.log("Required elements missing");
162            return;
163          }
164
165          const hasSchool = !!form.querySelector('[name="school"]');
166          const hasCareerPosition = !!form.querySelector(
167            '[name="career-position"]'
168          );
169          const isNewgraduate = hasSchool;
170          const isCareer = hasCareerPosition && !hasSchool;
171
172          let requiredFields = [];
173          if (isNewgraduate) {
174            requiredFields = [
175              "family-name",
176              "your-name",
177              "family-name-kana",
178              "name-kana",
179              "your-email",
180              "your-email-confirm",
181              "phone",
182              "birthyear",
183              "birthyear-month",
184              "birthyear-day",
185              "school",
186              "faculty",
187              "graduation",
188              "inquiry_type",
189              "know-method",
190              "agreement",
191            ];
192          } else if (isCareer) {
193            requiredFields = [
194              "family-name",
195              "your-name",
196              "family-name-kana",
197              "name-kana",
198              "your-email",
199              "your-email-confirm",
200              "phone",
201              "birthyear",
202              "birthyear-month",
203              "birthyear-day",
204              "career-position",
205              "career-experience",
206              "know-method",
207              "agreement",
208            ];
209          } else {
210            // 想定外のフォーム構成はスキップ
211            return;
212          }
213
214          // CF7バリデーションエラー時のスクロール
215          form.addEventListener(
216            "wpcf7invalid",
217            function () {
218              const invalidField = form.querySelector(".wpcf7-not-valid");
219              if (invalidField) {
220                invalidField.scrollIntoView({
221                  behavior: "smooth",
222                  block: "center",
223                });
224              }
225            },
226            false
227          );
228
229          // 「入力内容の確認」ボタン
230          if (!confirmBtn) {
231            console.error("確認ボタンが見つかりません");
232            return;
233          }
234          console.log("確認ボタンを設定します:", confirmBtn);
235          confirmBtn.addEventListener("click", function (e) {
236            e.preventDefault();
237            e.stopPropagation();
238            console.log("確認ボタンがクリックされました");
239
240            let isValid = true;
241
242            // 必須項目チェック（know-method は別処理）
243            requiredFields.forEach(function (name) {
244              if (name === "know-method") return;
245              const field = form.querySelector('[name="' + name + '"]');
246              if (!field) return;
247
248              if (field.type === "checkbox" || field.type === "radio") {
249                const checked = form.querySelector(
250                  '[name="' + name + '"]:checked'
251                );
252                if (!checked) {
253                  isValid = false;

254                  field.classList.add("wpcf7-not-valid");
255                } else {
256                  field.classList.remove("wpcf7-not-valid");
257                }
258              } else {
259                if (!field.value || field.value.trim() === "") {
260                  isValid = false;
261                  field.classList.add("wpcf7-not-valid");
262                } else {
263                  field.classList.remove("wpcf7-not-valid");
264                }
265              }
266            });
267
268            // 弊社を知ったきっかけ（checkbox[] 必須）
269            const knowMethodCheckboxes = form.querySelectorAll(
270              '[name="know-method[]"]'
271            );
272            if (knowMethodCheckboxes.length > 0) {
273              let hasKnowMethod = false;
274              knowMethodCheckboxes.forEach((cb) => {
275                if (cb.checked) {
276                  hasKnowMethod = true;
277                  cb.classList.remove("wpcf7-not-valid");
278                }
279              });
280              if (!hasKnowMethod) {
281                isValid = false;
282                knowMethodCheckboxes.forEach((cb) => {
283                  cb.classList.add("wpcf7-not-valid");
284                });
285              }
286            }
287
288            // メールアドレス一致チェック
289            const email = form.querySelector('[name="your-email"]');
290            const emailConfirm = form.querySelector(
291              '[name="your-email-confirm"]'
292            );
293            if (email && emailConfirm && email.value !== emailConfirm.value) {
294              isValid = false;
295              email.classList.add("wpcf7-not-valid");
296              emailConfirm.classList.add("wpcf7-not-valid");
297              alert("メールアドレスが一致しません。");
298              return;
299            }
300
301            if (!isValid) {
302              alert("必須項目を入力してください。");
303              const firstInvalid = form.querySelector(".wpcf7-not-valid");
304              if (firstInvalid) {
305                firstInvalid.scrollIntoView({
306                  behavior: "smooth",
307                  block: "center",
308                });
309              }
310              return;
311            }
312
313            // 確認画面に値を反映
314            setConfirmValues(form, {
315              isNewgraduate,
316              isCareer,
317            });
318
319            // 入力画面を隠し、確認画面を表示
320            console.log("確認画面を表示します");
321            if (formInputScreen) {
322              formInputScreen.style.display = "none";
323              console.log("入力画面を非表示にしました");
324            }
325            confirmScreen.style.display = "block";
326            console.log("確認画面を表示しました");
327            confirmScreen.scrollIntoView({
328              behavior: "smooth",
329              block: "start",
330            });
331          });
332
333          // 戻るボタン
334          backBtn.addEventListener("click", function () {
335            if (formInputScreen) formInputScreen.style.display = "block";
336            confirmScreen.style.display = "none";
337            const target = formInputScreen || form;
338            target.scrollIntoView({
339              behavior: "smooth",
340              block: "start",
341            });
342          });
343
344          // 確認画面の「送信する」ボタン
345          submitBtn.addEventListener("click", function (e) {
346            e.preventDefault();
347            e.stopPropagation();
348            console.log("送信ボタンがクリックされました");
349
350            // 確認画面を非表示にしてから送信
351            if (formInputScreen) formInputScreen.style.display = "block";
352            confirmScreen.style.display = "none";
353
354            // CF7のフォーム送信をトリガー
355            // 方法1: フォーム内の送信ボタンを探してクリック
356            const allSubmits = form.querySelectorAll('input[type="submit"]');
357            console.log("フォーム内の送信ボタン:", allSubmits);
358
359            let originalSubmit =
360              Array.from(allSubmits).find((btn) => {
361                return (
362                  btn.id !== "confirm-btn" &&
363                  !btn.classList.contains("js-confirm-btn")
364                );
365              }) || allSubmits[0];
366
367            console.log("使用する送信ボタン:", originalSubmit);
368
369            if (originalSubmit) {
370              console.log("送信ボタンをクリックして送信します");
371              // 少し待ってから送信ボタンをクリック（確認画面の非表示が完了してから）
372              setTimeout(function () {
373                originalSubmit.click();
374              }, 200);
375            } else {
376              console.log("送信ボタンが見つかりません。CF7のAPIを使用します");
377              // 方法2: CF7のAPIを使用（wpcf7submitイベントをトリガー）
378              // フォームのsubmitイベントを直接トリガー
379              const submitEvent = new Event("submit", {
380                bubbles: true,
381                cancelable: true,
382              });
383              form.dispatchEvent(submitEvent);
384
385              // さらに、CF7の送信処理を直接呼び出す
386              if (typeof wpcf7 !== "undefined" && wpcf7.submit) {
387                wpcf7.submit(form);
388              } else {
389                // wpcf7が利用できない場合は、フォームを直接送信
390                console.log(
391                  "CF7のAPIが利用できないため、フォームを直接送信します"
392                );
393                form.submit();
394              }
395            }
396          });
397
398          // CF7送信完了時の処理
399          // リダイレクト処理は405-412行目の全フォーム共通リスナーで処理されるため、
400          // ここでは何も処理しない（入力画面を表示しない）
401          form.addEventListener(
402            "wpcf7mailsent",
403            function () {
404              // 送信完了後は即座にリダイレクトするため、ここでは何も処理しない
405            },
406            false
407          );
408
409          // CF7のバリデーションエラー時にもレスポンスメッセージを非表示にする
410          form.addEventListener(
411            "wpcf7invalid",
412            function () {
413              const responseOutput = form.querySelector(
414                ".wpcf7-response-output"
415              );
416              if (responseOutput) {
417                responseOutput.style.display = "none";
418                responseOutput.setAttribute("aria-hidden", "true");
419              }
420            },
421            false
422          );
423        });

423 // forms.forEachの閉じ括弧
424      }; // checkFormsの閉じ括弧
425
426      checkForms();
427    }
428
429    // CF7送信完了時の処理（全フォーム共通・サンクスページへのリダイレクト）
430    document.addEventListener(
431      "wpcf7mailsent",
432      function (event) {
433        // 送信完了後、即座にサンクスページへリダイレクト
434        window.location.href = "/entry/thanks/";
435      },
436      false
437    );
438
439    function setConfirmValues(form, flags) {
440      const { isNewgraduate, isCareer } = flags;
441
442      const getValue = (selector) => {
443        const field = form.querySelector(selector);
444        return field ? field.value || "" : "";
445      };
446
447      const setText = (selector, text) => {
448        // フォームの親要素（.inquiry-form）から要素を探す
449        const wrapper = form.closest(".inquiry-form");
450        if (!wrapper) return;
451        const el = wrapper.querySelector(selector);
452        if (el) el.textContent = text;
453      };
454
455      // 氏名
456      const familyName = getValue('[name="family-name"]');
457      const yourName = getValue('[name="your-name"]');
458      setText(".js-confirm-family-name", (familyName + " " + yourName).trim());
459
460      // ふりがな
461      const familyNameKana = getValue('[name="family-name-kana"]');
462      const nameKana = getValue('[name="name-kana"]');
463      setText(
464        ".js-confirm-family-name-kana",
465        (familyNameKana + " " + nameKana).trim()
466      );
467
468      // メール
469      setText(".js-confirm-email", getValue('[name="your-email"]'));
470
471      // 電話
472      setText(".js-confirm-phone", getValue('[name="phone"]'));
473
474      // 生年月日
475      const birthyear = getValue('[name="birthyear"]');
476      const birthMonth = getValue('[name="birthyear-month"]');
477      const birthDay = getValue('[name="birthyear-day"]');
478      const birthday = [birthyear, birthMonth, birthDay]
479        .filter(Boolean)
480        .join("");
481      setText(".js-confirm-birthday", birthday);
482
483      if (isNewgraduate) {
484        setText(".js-confirm-school", getValue('[name="school"]'));
485        setText(".js-confirm-faculty", getValue('[name="faculty"]'));
486        const department = getValue('[name="department"]') || "未入力";
487        setText(".js-confirm-department", department);
488        setText(".js-confirm-graduation", getValue('[name="graduation"]'));
489
490        const inquiryTypeField = form.querySelector(
491          '[name="inquiry_type"]:checked'
492        );
493        if (inquiryTypeField) {
494          const label = form.querySelector(
495            'label[for="' + inquiryTypeField.id + '"]'
496          );
497          setText(
498            ".js-confirm-inquiry-type",
499            label ? label.textContent.trim() : inquiryTypeField.value
500          );
501        }
502      }
503
504      if (isCareer) {
505        const careerPosField = form.querySelector(
506          '[name="career-position"]:checked'
507        );
508        if (careerPosField) {
509          const label = form.querySelector(
510            'label[for="' + careerPosField.id + '"]'
511          );
512          setText(
513            ".js-confirm-career-position",
514            label ? label.textContent.trim() : careerPosField.value
515          );
516        }
517
518        setText(
519          ".js-confirm-career-experience",
520          getValue('[name="career-experience"]')
521        );
522      }
523
524      // 弊社を知ったきっかけ（共通）
525      const knowMethodCheckboxes = form.querySelectorAll(
526        '[name="know-method[]"]:checked'
527      );
528      if (knowMethodCheckboxes.length) {
529        const methods = Array.from(knowMethodCheckboxes).map((cb) => {
530          const label = form.querySelector('label[for="' + cb.id + '"]');
531          return label ? label.textContent.trim() : cb.value;
532        });
533        setText(".js-confirm-know-method", methods.join("、"));
534      } else {
535        setText(".js-confirm-know-method", "");
536      }
537
538      // ファイル添付（共通）
539      const fileField = form.querySelector('[name="contactfoam7"]');
540      if (fileField && fileField.files && fileField.files.length > 0) {
541        const fileName = fileField.files[0].name;
542        setText(".js-confirm-contactfoam7", fileName);
543      } else {
544        setText(".js-confirm-contactfoam7", "未選択");
545      }
546    }
547
548    // 確認画面制御を初期化

549    initContactForms();
550  }
551
552  if (document.readyState === "loading") {
553    document.addEventListener("DOMContentLoaded", initContactPage);
554  } else {
555    initContactPage();
556  }
557})();