JSFiddle - React, Tailwind, and code Playground

HTML

<form class="flex-form" action="mailto:[email protected]" method="post" enctype="text/plain">
	<h3>Please fill in this form</h3>
	<label for="formName">Your name</label>
	<input id="formName" type="text" placeholder="Full Name" name="name" autocomplete="name" required>
	<br>
	<label for="formName">Your phone number</label>
	<input id="formNumber" type="tel" pattern="[0-9]*" placeholder="(541) 754-3010" autocomplete="tel" name="phone-number" required>
	<br>
	<label for="formName">Your location</label>
	<input id="formGeo" type="text" placeholder="lat, long" name="coordinates">
	<button hidden id="fetchBtn" type="button">
		auto locate
	</button>
	<br>
	<button type="submit">Send Us Request</button>
</form>

CSS

label {
	width: 130px;
	display: inline-block;
	margin-top: 10px;
}

input:invalid {
	border: solid 5px #ED6D60;
}

input:valid {
	border: solid 5px #0ED54D;
}

/* uncomment if you don't like the placeholder
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }
*/

JavaScript

$("#fetchBtn").click(function (evt) {
	navigator.geolocation.getCurrentPosition(showPosition);
});

function showPosition(position) {
    $("#formGeo").val(position.coords.latitude + ", " + position.coords.longitude);  
}

if (navigator.geolocation) {
	$("#fetchBtn").show();
}