Pre-populate forms with member data

Using Memberstack 2.0? There is an updated version of this article here.

Pre-fill form fields on your site with member data so members don't have to enter their basic details over and over again.

About this article:

• Difficulty level: Easy

• Technical background needed: Beginner

• Estimated time required to complete: 5-10 mins

Note: This feature requires custom data attributes & custom forms.

What and Why?

You can pre-fill form fields on your site with member data, so your members don't have to enter their basic details over and over again. This makes for a smoother, more seamless login.

Step 1 → Add a contact form to your site. 

In this example, we'll create a simple contact form with 3 fields. Name, email, and a message. 

Step 2 → Navigate to the Forms page and select a field. 

This will expose the field attribute that we need to add to our project. Copy and paste the code provided by Memberstack. It may look slightly different than what's pictured below.

Note: Each field has the same structure: data-ms-member followed by the unique value provided by Memberstack. For example, we can use data-ms-member="email" to pre-populate a member's email address.

Step 3 → Copy and paste the attribute onto your input field.

‍Add the data-ms-member and the value to the appropriate input field. Memberstack will automatically pre-fill the input field with their data.

What's next:

Tip: Hide input fields whenever possible. This makes the form look and feel more like a web app.

For example, we could hide the user's email address in the above example when collecting feedback. You'll know who sent the feedback, and they won't even have to think about it.

We have recently added new features so you can now:

1. Populate the member's membership name into your site

2. Populate the member's membership amount into your site

3. Populate the member's signup date into your site

Keywords: pre-populate, data, forms, member, navigate, contact, field, attribute