Pre-fill form field via URL in html

Question

I am looking for a simple way to pre-fill a field in my contact form when ever a user clicks on a link that is given in some other page.

This is my contact form in h

Answer 1

A more modern way would be to use the URL() constructor and the searchParams property. Let the browser engine do the work!

(new URL(window.location.href)).searchParams.forEach((x, y) =>
    document.getElementById(y).value = x)

Try it online! or on Stack Overflow:

const hash = '?name=some_text&email=more%20text';
const example = "http://example.com/" + hash;

(new URL(example)).searchParams.forEach((x, y) =>
    document.getElementById(y).value = x);

<p>Your name:
<br /><input name="name" id="name" /></p>

<p>Your email:
<br /><input name="email" id="email" /></p>

Answer 2

JavaScript has no built-in functions to parse url parameters like that (Since those GET parameters are usually used to send data to the server).
I'd suggest using a hash instead (A hash is purely client-side):

www.xyz.com/contact.html#name=some_text&email=more%20text

Now, add some id's to your fields:

<p>Your name:
<br /><input name="name" id="name" /></p>

<p>Your email:
<br /><input name="email" id="email" /></p>

Then set the values like this, on load:

var hashParams = window.location.hash.substr(1).split('&'); // substr(1) to remove the `#`
for(var i = 0; i < hashParams.length; i++){
    var p = hashParams[i].split('=');
    document.getElementById(p[0]).value = decodeURIComponent(p[1]);;
}

Working example

The big advantage of this is that it's flexible. If you want to set the values of 2 fields, you supply those 2 fields' id's in the hash:

www.xyz.com/contact.html#name=some_text&email=more%20text

4 fields? 4 id's:

www.xyz.com/contact.html#name=some_text&email=more%20text&username=john&age=23

No need to edit the code, then.

Answer 3

Don't bother with JavaScript if you're using PHP.

Just add a little something to the HTML:

<form method="post" action="submit.php" >
  <p>Your name:<br />
  <input name="name" value="<?php echo htmlspecialchars($_GET['name']) ?>" /></p>

  <p>Your email:<br />
  <input name="email" value="<?php echo htmlspecialchars($_GET['email']) ?>"/></p>

  <p>Your message:<br />
  <textarea name="message" id="message" rows="10" cols="50">
    <?php echo htmlspecialchars($_GET['message']) ?>
  </textarea></p>

  <p><input type="submit" value="Send" /></p>
</form>

Answer 4

You can retrieve your current url with window.location.href and then get the default message via a regular expression :

var msg = window.location.href.match(/\?setmessagefield=(.*)/);
document.getElementById("message").value = msg[1];