Pre-populate Forms with Member Data (plus Hidden Fields)

Article author
Duncan Hamra
  • Updated

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 experience.

 

Step 1 → Add a contact form to your site. 

In this example, we'll create a simple contact form with 4 visible fields and 3 hidden fields.

Email and Phone + the 3 hidden fields will automatically populate with member data. Reason for message and Message will be left blank for the member to fill out.   Screen_Shot_2022-08-04_at_1.34.16_PM.jpg

Step 2 → Map your input fields back to Memberstack

Screen_Shot_2022-08-04_at_1.35.47_PM.jpg

1. Use the attribute data-ms-member="email" to populate the member's email. 

2. Create a custom field called Phone, and then use the attribute data-ms-member="phone" to collect their number. 

Use visible input fields when you want the user to be able to change the input. Side note, if a member updates an input, it will NOT update in Memberstack. You'll need to use a profile form for that. 

Step 3 (optional) → Add your hidden fields

Screen_Shot_2022-08-04_at_1.43.33_PM.jpg

<input type="hidden" name="First Name" data-ms-member="first-name">
<input type="hidden" name="Last Name" data-ms-member="last-name">
<input type="hidden" name="Plan" data-ms-member="id">
<script> /*Added this so it would show up in Webflow Designer*/ </script>

You do not need to add any special attributes to the form itself. You want the form to submit normally. 

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.