Save Data to Firestore Database

In order to save data to Firestore database, we will take advantage of Contact Form 7.

Please read the latest documentation at: Firebase WordPress Docs

First, we need to create a form. Here is the sample:

 [hidden collectionName "users"]
 [hidden databaseType "firestore"]
 [hidden arrayType "hobbies,food"]

 [text* firstName placeholder "First Name"]
 [text* lastName placeholder "Last Name"]
 [text* email placeholder "Email"]
 [tel phone placeholder "+1 647 620 0000"]

 Age
 [number age id:age min:1 max:100]

 Date of Birth
 [date* dateOfBirth id:dateOfBirth]

 Hobbies
 [select* hobbies id:hobbies multiple "Archery" "Slap Dance" "Rock Climbing"]
 
 Food
 [checkbox food id:food "Pho" "Ramen" "Dimsum"]
 
 Gender
 [radio gender id:gender default:1 "Male" "Female" "Other"]

 [submit id:if-data-submit "Submit"]

This form will save data to Firestore database, under users collection. If we save any array type, we should put it under the hidden field: arrayType.

It's possible to save data under a sub collection, you just need to update the collectionName from users to users/some-id/products. If you want to save under firebase uid, then use this users/getFirebaseUid/products.

If you want to write data to a specific document-id, you can add a documentId input.

[[hidden documentId "document-id"]]

In order to generate the firebase UID dynamically after user logs in. You can add a class to the input in order to have User ID as a document ID.

[[hidden documentId class:getFirebaseUid "INVALID"]]

Then we will show the form to the frontend by using the shortcode below. Remember to replace the id and title basing on your form.

[contact-form-7 id="48" html_id="if-create-data-form" title="Contact Firestore"]

After saving your data, you can search by check the Display Firestore Collection Data Page