How to pre-fill form input fields at page load

[DavidB]

Is there a way for form to be pre filled with information. I’m not talking about the help text within the field, but the actual input itself.

[Revolution]

You need to use jquery to do that.

[cyberdave (Dave S.)]

Hi @DavidB, @Revolution is correct, using jQuery is a way to do this To use jQuery, you need to use custom code in your footer: http://help.webflow.com/site-settings/custom-code

Example: If you have a form, with two fields, name and email address. Give each input field a unique ID from the settings panel equal to #email and #name. Now the script can reference these fields by ID

Paste the following code in the Footer of your site using custom code:

<script>
    
    $( document ).ready(function() {
        // after the page elements are all loaded, then run the script
        // Set the input field with unique ID #email to a value

        $("#email").val('someone@test.com');

        // Set the input field with unique ID #name

        $("#name").val('John Doe');
        
        });
        
</script>  

jQuery is baked into Webflow, so once you add the code above, save changes and republish your site. This code does not have any effect until the site is published. I hope this helps, cheers, Dave

[Revolution]

@cyberdave’s example works

Here’s another code example…

Assumptions:
There are 3 input fields on the screen that you want to pre-populate with values.

fname, lname, and title are the ID’s for the 3 input fields. They are not the class / style names.

The ID is located in Navigator -> Settings -> ID.

Put this in your Custom Code Footer section

<script>
$(document).ready(function() {    
    $("#fname").val("Joe"); 
    $("#lname").val("Bean"); 
    $("#title").val("Boss");
});
</script>

(When the document is ready / loaded)
jquery “$” will
target the ID (#fname etc) and
change the elements value “val” to whatever is within the parameter.

[JWebsBz (Jan Wilson)]

And this is another example of why jQuery should be loaded in the HEAD of the document, or at least there should be a way to place custom code on individual pages, in addition to code placed site-wide. If the jQuery were loaded in the HEAD, then the code above could be placed in embedded HTML on any page.

[cyberdave (Dave S.)]

Hi @JWebsBz, you make a valid point Until feature updates are made, and in the case of Multiple pages, it would be a better idea to perhaps use javascript instead of jQuery and placed into an embed widget at the bottom of the page having the form:

<script>
document.forms['FormName'].elements['name'].value = 'value';
document.forms['FormName'].elements['email'].value = 'value';    
</script>

Cheers,
Dave

[JWebsBz (Jan Wilson)]

Thanks, @cyberdave – that isn’t too bad. Though it still seems strange to have every page load the jQuery library, but since it loads after the BODY, you can’t really USE it unless you put the script on every page. Either solution, loading the library in the HEAD, or custom code by page, would work better.

[DavidB]

Awesome. Thanks all. This has been super helpful!

[cyberdave (Dave S.)]

Hi @JWebsBz, thanks for the followup. The jQuery library is required on every page for Webflow scripts.

Putting your own custom jQuery code on a specific page and the ability to choose the loading location of the jQuery library and/or custom jQuery code are both wishlist items.

I agree with you that it would be nice to have these additional options, they just have not been implemented yet.

Cheers,
Dave