![Mark Mwape](https://storage.googleapis.com/lazy-apps-images-bucket/authors/48a75fe2524cd4c8b17d7d7ecd78d621_664e34d77c688f5f1cf9279f_1692871288773%20%281%29%20%281%29.jpeg)
by Mark Mwape
Survey/Form that stores responses to Google Sheets
from flask import url_for
from flask import redirect
from flask import request
import logging
from flask import Flask, render_template
from gunicorn.app.base import BaseApplication
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
app = Flask(__name__)
@app.route("/")
def index():
return redirect(url_for('form'))
@app.route("/form")
def form():
return render_template("form.html")
# Removed the home route to directly open the form as per the latest request
@app.route('/submit-form', methods=['POST'])
def submit_form():
Survey/Form that stores responses to Google Sheets
Created: | Last Updated:
Introduction to the Versatile Input Form Template
This template provides a versatile input form that can be used to collect user information and submit it to a Google Sheet. It's a Flask web application with a simple frontend using Tailwind CSS for styling. The form data is sent to the server using JavaScript's Fetch API, and from there, it's submitted to a specified Google Sheet using the Google Sheets API.
Getting Started
To begin using this template, click on "Start with this Template" in the Lazy builder interface. This will pre-populate the code in the Lazy Builder interface, so you won't need to copy, paste, or delete any code manually.
Initial Setup
Before testing the application, you need to set up the following environment secrets in the Lazy Builder:
- GOOGLE_SHEETS_CREDENTIALS_JSON: This is the JSON credentials for your Google service account. You can obtain these credentials by creating a service account in the Google Cloud Console, generating a key for it, and copying the JSON data.
- GOOGLE_SHEET_ID: The ID of the Google Sheet where you want to store the form submissions. You can find this ID in the URL of your Google Sheet.
Make sure to have the Google Sheet created and shared with the email address of your service account before proceeding.
Test the Application
Press the "Test" button to deploy the app. The Lazy CLI will handle the deployment, and you won't need to worry about installing libraries or setting up the environment.
Entering Input
If the template requires user input through the CLI, you will be prompted to provide it after pressing the "Test" button. In this case, the template does not require CLI input, as the form is designed to be filled out through the web interface.
Using the App
Once the app is deployed, you will be provided with a dedicated server link to access the form. Fill out the form with the required information and submit it. Upon submission, the data will be sent to the server and then to the Google Sheet. You will be redirected to a thank-you page, confirming the successful submission.
Integrating the App
If you need to integrate this form into another service or frontend, you can use the provided server link. For example, you can embed the form in another webpage or send the link to users to fill out the form directly.
Here is a sample code snippet that you might use to integrate the form submission endpoint into another tool:
fetch('YOUR_SERVER_LINK/submit-form', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'Jane Doe',
email: 'email@example.com',
socialMediaPlatform: 'Twitter',
socialLink: 'http://twitter.com/janedoe'
}),
})
.then(response => response.json())
.then(data => console.log('Form submitted successfully:', data))
.catch((error) => console.error('Error:', error));
Replace 'YOUR_SERVER_LINK' with the server link provided by the Lazy builder after deployment.
Remember, this template is designed to be flexible and can be customized to fit your specific needs. Whether you're collecting user feedback, registering event attendees, or conducting surveys, this form can be adapted to a wide range of applications.
Technologies
![Python](https://i.pinimg.com/originals/2f/9c/11/2f9c11f9e55efbf1791f12c06d60729b.jpg)
![Streamlit](https://raw.githubusercontent.com/github/explore/968d1eb8fb6b704c6be917f0000283face4f33ee/topics/streamlit/streamlit.png)