In this tutorial, we're going to guide you on how to link form input to the submitter's email/ID.

This way, you know which dataset belongs to which user. See example below.

How it works

Logged-in users can fill out your form and submit it for your review. In this example, we will create a job application site where job applicants are required to login to submit their job application.

Home Page: A page that is accessible by public. The Cotter Login Form can either be placed in the Home Page or you can create a separate Login Page.

Protected Page: A page that is only accessible by logged-in users and contains the input form.

Background by Jess Bailey via Unsplash.com

Let's get started

1. Make sure you have followed the tutorial on how to protect a page (only allow logged-in users to access the page).

2. Make sure you're using this <script> tag for your Login page. Add it to your Protected Page that has the form:

<script
    src="https://unpkg.com/[email protected]/dist/cotter.min.js"
    type="text/javascript"
></script>


3. Add a Form to your Protected Page. Set the "id=user-data-form-a"

​4. Add this code to the Body of the Protected Page:

<script>
​
 window.onload=function() {
  var cotter = new Cotter("<YOUR API KEY ID>"); // 👈 Specify your API KEY ID here
  var user = cotter.getLoggedInUser()
  
  var userEmailField = document.createElement("input");
  userEmailField.setAttribute("type", "hidden");
  userEmailField.setAttribute("name", "email");
  userEmailField.setAttribute("value", user?.identifier);
  
  var userIDField = document.createElement("input");
  userIDField.setAttribute("type", "hidden");
  userIDField.setAttribute("name", "cotter_user_id");
  userIDField.setAttribute("value", user?.ID);
  
  // 👈 Append this to each form element that you want with the form's id
  document.getElementById("user-data-form-a").appendChild(userEmailField);
  document.getElementById("user-data-form-a").appendChild(userIDField);
 }
</script>

(If you have more than 1 form, you can copy the code above and replace user-data-form-a with your Form's id.

That's it!

We've arrived at the last part of this tutorial and all that you need to do is to click publish.


Questions & Feedback

Come and talk to the founders of Cotter and other developers who are using Cotter on Cotter's Slack Channel.

Ready to use Cotter?

If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can create a free account and check out our documentation.

If you need help, ping us on our Slack channel or email us at [email protected]