固定ページにカスタムフィールドを設置し、フォーム完了ページにダウンロードボタンを実装したい

// Contact Form7でメール送信後に特定のURLにリダイレクトするようにする-----------
document.addEventListener(
  "wpcf7mailsent",
  function (event) {
    var currentDomain = window.location.origin;
    var completionPath = "/download-complete"; // ここに完了ページのパスを記入してください。
    var location = currentDomain + completionPath;
    window.location.href = location;
  },
  false
);

/**
 * Contact Form7でメール送信後に特定のURLにリダイレクトするようにする
 */
add_action('wp_footer', 'custom_redirect_for_specific_form');
function custom_redirect_for_specific_form() {
		if (is_page('download-complete')) { // 固定ページ（download-complete）のみ.
    ?>
    <script type="text/javascript">
        document.addEventListener(
          "wpcf7mailsent",
          function (event) {
            var currentDomain = window.location.origin;
            var completionPath = "/download-complete"; // ここに完了ページのパスを記入してください。
            var location = currentDomain + completionPath;
            window.location.href = location;
          },
          false
        );
    </script>
    <?php
		}
}

<?php
// ACFフィールド 'document_file' から文書ファイルの情報を取得
$document_file = get_field('document_file');

	// ファイル情報が存在し、配列形式であることを確認
	if($document_file && is_array($document_file)) :
	    // ファイルのURLと元のファイル名を取得
	    $document_download_url = $document_file['url'];
	    $document_filename = $document_file['filename'];

	    // ファイルの内容を取得する関数
	    function get_file_contents($url) {
	        if (function_exists('curl_init')) {
	            // cURLが利用可能な場合、cURLを使用してファイルを取得
				// cURLとは様々なプロトコルをサポートしているライブラリ。Local by Flywheelでも使用でき、file_get_contents()よりも高速。
	            $ch = curl_init();
	            curl_setopt($ch, CURLOPT_URL, $url);
	            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	            $file_contents = curl_exec($ch);
	            curl_close($ch);
	            return $file_contents;
	        } else {
	            // cURLが利用できない場合、file_get_contents()を使用
	            return file_get_contents($url);
	        }
	    }

	    // ファイルの内容を取得
	    $file_contents = get_file_contents($document_download_url);

	    if ($file_contents !== false) {
	        // ファイルの内容をBase64エンコード
	        $document_download_url_base64_url = base64_encode($file_contents);
?>
	<!-- ダウンロードボタンのHTML -->
	<p class="c-btn-ellipse">
		<button class="js-download-btn">資料ダウンロード</button>
		<span class="c-btn-ellipse__loader js-loader"></span>
	</p>

	<!-- ダウンロード機能を実装するJavaScript -->
	<script>
	document.addEventListener('DOMContentLoaded', function() {
		// ダウンロードボタンの要素を取得
		const btn = document.querySelector('.js-download-btn');

		// ボタンクリックイベントのリスナーを追加
		btn.addEventListener('click', () => {
			// 一時的なa要素を作成
			let element = document.createElement('a');
			// Base64エンコードされたファイルデータをhref属性に設定
			// 'data:application/pdf;base64,' は、ブラウザにこれがBase64エンコードされたPDFであることを伝える
			element.href = 'data:application/pdf;base64,<?php echo $document_download_url_base64_url; ?>';
			// ダウンロードするファイル名を設定
			element.download = '<?php echo $document_filename; ?>';
			// a要素のクリックイベントをプログラムから発火
			element.click();
		}, false);
	});
	</script>
	<?php
        } else {
            // ファイルの取得に失敗した場合、エラーをログに記録
            error_log("Failed to retrieve file contents: " . $document_download_url);
        }
endif;
?>

<p class="c-btn-ellipse">
	<!-- ↓ボタン部分 -->
	<button class="c-btn-ellipse__link js-download-btn">資料ダウンロード</button>
	<!-- ↓ローダー部分 -->
	<span class="c-btn-ellipse__loader js-loader"></span>
</p>

.c-btn-ellipse{
	position: relative; //ローダーを固定する

	// ボタン部分--------------
	&__link {
		background-color: #007eff;
		color: #fff;
		position: relative;
		padding: 0.8em 0.8em 0.8em 0.6em;
	    font-size: 1.5rem;
	    font-weight: 600;
	    line-height: 0.0666666667;

		// ボタンのアイコン部分
		&:before {
			content: "";
			display: inline-block;
			margin-right: 0.5em;
			width: 1em;
			height: 1em;
			background: url("アイコンのURL") no-repeat center center / contain;
			transition: all 0.3s;
		}
	}

	//ローダー部分---------------
	&__loader {
		// ローダーの位置
		position: absolute; //ボタンの下に表示するようにする
		bottom: -25px; //ボタンの下に表示するようにする
		left: 0;
		right: 0;
		margin: 0 auto;
		display: none; //最初は非表示

		// ローダーのデザイン・アニメーション
		width: 10px;
		padding: 8px;
		aspect-ratio: 1;
		border-radius: 50%;
		background: #007eff;
		--_m: conic-gradient(#0000 10%, #000),
			linear-gradient(#000 0 0) content-box;
		-webkit-mask: var(--_m);
		mask: var(--_m);
		-webkit-mask-composite: source-out;
		mask-composite: subtract;
		animation: l3 1s infinite linear;
	}
}