In order to save data to Realtime database, we will take advantage of Contact Form 7.
First, we need to create a form. Here is the sample:
[hidden collectionName "users"] [hidden databaseType "realtime"] [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 Realtime database, under users collection. If we save any array type, we should put it under the hidden field: arrayType.
If you want to write data to a specific node, you can add a documentId input. [hidden documentId "node-path / 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="38" html_id="if-create-data-form" title="Contact Realtime"]
After saving your data, you can search by check the Display Realime Collection Data Page