mtvbrianking/form-submission.php

## form-submission.php
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Submission</title>
    <style>
        .form-group {
            padding: 5px;
            margin: 5px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input {
            padding: 7px;
            border: 1px solid;
            border-radius: 5px;
            width: 300px;
        }

        .form-group input:focus {
            outline: 1px solid;
        }

        .form-group button {
            padding: 5px;
        }
    </style>
</head>

<body>

    <?php

    if ($params = $_POST) {
        var_dump($params);
        die();
    }

    if ($_POST['_action'] == 'save') {
        // save configurations...
    }

    if ($_POST['_action'] == 'test') {
        // test connectivity...
    }

    ?>

    <h3>Remote API</h3>

    <form id="configurations" method="POST" action="">
        <div class="form-group">
            <label for="client-id">Client ID</label>
            <input type="text" id="client-id" name="client_id" value="b2f329ac-a8f3-425a-ad8f-a5714ecd0659" required>
        </div>
        <div class="form-group">
            <label for="client-secret">Client Secret</label>
            <input type="text" id="client-secret" name="client_secret" value="34c636e193fe4c2e8f8d2154060eb2d5" required>
        </div>

        <div id="php-submit" class="form-group">
            <button type="submit" name="_action" value="save">PHP - SAVE</button>
            <button type="submit" name="_action" value="test">PHP - TEST</button>
        </div>

    </form>

    <script>
        (function() {
            let form = document.getElementById("configurations");

            // ...
        })();
    </script>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Form Submission</title>
	<style>
	.form-group {
	padding: 5px;
	margin: 5px;
	}

	.form-group label {
	display: block;
	margin-bottom: 5px;
	}

	.form-group input {
	padding: 7px;
	border: 1px solid;
	border-radius: 5px;
	width: 300px;
	}

	.form-group input:focus {
	outline: 1px solid;
	}

	.form-group button {
	padding: 5px;
	}
	</style>
	</head>

	<body>

	<?php

	if ($params = $_POST) {
	var_dump($params);
	die();
	}

	if ($_POST['_action'] == 'save') {
	// save configurations...
	}

	if ($_POST['_action'] == 'test') {
	// test connectivity...
	}

	?>

	<h3>Remote API</h3>

	<form id="configurations" method="POST" action="">
	<div class="form-group">
	<label for="client-id">Client ID</label>
	<input type="text" id="client-id" name="client_id" value="b2f329ac-a8f3-425a-ad8f-a5714ecd0659" required>
	</div>
	<div class="form-group">
	<label for="client-secret">Client Secret</label>
	<input type="text" id="client-secret" name="client_secret" value="34c636e193fe4c2e8f8d2154060eb2d5" required>
	</div>

	<div id="php-submit" class="form-group">
	<button type="submit" name="_action" value="save">PHP - SAVE</button>
	<button type="submit" name="_action" value="test">PHP - TEST</button>
	</div>

	</form>

	<script>
	(function() {
	let form = document.getElementById("configurations");

	// ...
	})();
	</script>

	</body>

	</html>