Vorbly Code | WIX CODE AUTO-FILL FORM WITH USER INPUTS

Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX CODE AUTO-FILL FORM WITH USER INPUTS

Need to create an auto-fill form for your Wix website? This tutorial will show you how to populate data to your forms and submit form to your database using Wix Code. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/4

THE ELEMENTS

The Page

User Inputs:

  • First Name Field: #input1

  • Last Name Field: #input2

  • Email Field: #input3

  • Phone Field: #input4

Button Element: #Submit

The Database

Create a database Courses (dataset1).

Recommended fields:

  • First Name ID: fname

  • Last Name ID: lname

  • Email ID: email

  • Phone ID: phone

  • Course Type ID: course

  • Course Date ID: date

  • Course Timing ID: time

  • Email ID: email

THE CODE

Page Code

// Auto-Fill Form //

 

$w.onReady(function () {

       $w("#input1").value = "Daniel" // From database use: $w('#dynamicDataset').getCurrentItem().item //

       $w("#input2").value = "Philips"

       $w("#input3").value = "daniel.philips@gmail.com"

       $w("#input4").value = "+1 123 123 1234"

});

// Submit Auto-Filled Items //

export function Submit_click(event, $w) {

        $w('#dataset1').setFieldValue('fname', $w('#input1').value);

        $w('#dataset1').setFieldValue('lname', $w('#input2').value);

        $w('#dataset1').setFieldValue('email', $w('#input3').value);

        $w('#dataset1').setFieldValue('phone', $w('#input4').value);

}

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

No comments. Be the first to leave a comment.

thanks alot for this!

MotherBee

Aug 09, 2018

6

Thanks!

Could you explain if it is also possible to use an export function for field values that have the format text and not input?

Bilal

Feb 12, 2019

4

Hi Bilal,

For formatted text, you can change the html code of your text element.

$w('#text1').html = "<p style='color: #000000; font-size: 25px; font-family: Arial; font-weight: bold; text-align: center;'>" + YourTextHere + "</p>"

Hope this helps!

Andrew (Vorbly)

Feb 12, 2019

2

when i input this formula i just get the name daniel philips etc. How do i have my members generator?

Terrible at coding $w

Apr 10, 2019

5

Hi there!

Its never too late to learn how to code.

In this example, we hard coded the first name, last name, email and phone numbers. You can either 1) Change the auto-populated values (if your values are static) or 2) Retrieve the values from a dataset. For example, $w("#dataset1").getCurrentItem().fieldName;

Good luck!

Andrew (Vorbly)

Apr 10, 2019

2

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP