Survey/Form that stores responses to Google Sheets
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.
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.
Before testing the application, you need to set up the following environment secrets in the Lazy Builder:
Make sure to have the Google Sheet created and shared with the email address of your service account before proceeding.
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.
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.
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.
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.