How to Autofill HTML form Fields with URL Parameters

autofill html form with URL Parameters

Today we are going to talk about filling up our pure HTML/CSS Form fields with URL Parameters. In this post, I will help you to implement the best and easiest solution to auto-capture the URL Parameters and fill them in the form fields automatically.

So we basically need to create a form of any kind, Like a small form with 2 or 3 fields or a super complex form with lot more fields. I am gonna create a simple HTML form for testing.

HTML Form Code

<form method="post" name="formName" action="http://mydomain.com/send.php" id="myform">
    <input type="text" name="fullname" placeholder="Full Name">
    <input type="email" name="email" placeholder="Email Address">
    <input type="tel" name="tel" placeholder="Phone Number">
    <textarea name="message" placeholder="Write your message here."></textarea>
    <input type="submit" name="submit" value="Send Message">
</form>

Now, you have a form ready, Its time to style your form fields to make them look better. So I am gonna add some css to style the code.

CSS Code

#myform{
            background: rgb(255, 128, 128);
            padding:10% 5%;
            border-radius: 30px;
            display:block;
            width:500px;
            margin: auto;
        }
        #myform input[type=text], #myform input[type=email], #myform input[type=tel]{
            background: #fff;
            border-radius: 30px;
            display: block;
            width: 100%;
            padding:13px;
            color: rgb(255, 128, 128);
            border: none;
            margin-bottom: 10px;
        }
        #myform textarea{
            background: #fff;
            border-radius: 30px;
            display: block;
            width: 100%;
            padding:13px;
            color: rgb(255, 128, 128);
            border: none;
            margin-bottom: 10px;
            height: 120px;
        }
        #myform input[type=submit]{
            background:none;
            border:3px solid #fff;
            border-radius: 30px;
            display:block;
            width:100%;
            color:#fff;
            padding:14px;
        }

Finally your form is visually ready, and you can start testing it in your browser by accessing the form file url but till now, its not ready to auto fill your url parameters. So to make it accept URL Parameters, We need to add a few lines of Javascript code that will make our form auto collect parameter values.

JAVASCRIPT Code

<script type="text/javascript" language="JavaScript">
        function FillForm() {
        // Specify form's name between the quotes on next line.
        var FormName = "formName";
        var questionlocation = location.href.indexOf('?');
        if(questionlocation < 0) { return; }
        var q = location.href.substr(questionlocation + 1);
        var list = q.split('&');
        for(var i = 0; i < list.length; i++) {
           var kv = list[i].split('=');
           if(! eval('document.'+FormName+'.'+kv[0])) { continue; }
           kv[1] = unescape(kv[1]);
           if(kv[1].indexOf('"') > -1) {
              var re = /"/g;
              kv[1] = kv[1].replace(re,'\\"');
              }
           eval('document.'+FormName+'.'+kv[0]+'.value="'+kv[1]+'"');
           }
        }
        FillForm();
    </script>
Autofill URL Parameters values

In the above javascript code, you need to modify one line “var FormName = “formName”;” instead of formName, you have to assign the value of your form name. That’s it.

If you have any Website Design or Development requirements, You can invite us to work on it.

Get Your Quick Tasks Completed

Hire us today to get all your tasks completed with 100% satisfaction.

Leave a Reply

Your email address will not be published. Required fields are marked *

Manish Bajpai

I am a freelance Web Developer, Zoho One Expert, And Part time blogger. I love developing futuristic websites.

Hi There!

We are launching our New Series of Landing pages for Small Businesses, that can help you get your landing pages ready instantly.

Field is required!
Field is required!
Field is required!
Field is required!
Field is required!
Field is required!

Fill Out this Form to Us

First Name
First Name
Field is required!
Field is required!
Last Name
Last Name
Field is required!
Field is required!
Email Address
Email Address
Field is required!
Field is required!
Phone Number
Phone Number
Field is required!
Field is required!
What you want me to Do?
Field is required!
Field is required!
Number of Hours Required
-
+
Field is required!
Field is required!
Total Cost
$0.00
Field is required!
Field is required!

Minimum Amount to Hire

$25

This is the minimum amount to hire us instantly. Remaining total amount will need to be paid as per the progress of work.