Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/haolamnm/magnolia
[88224] A simple static website designed for efficient data collection, seamlessly integrated with Google Forms to streamline information gathering.
https://github.com/haolamnm/magnolia
css google-forms html javascript project website
Last synced: 2 days ago
JSON representation
[88224] A simple static website designed for efficient data collection, seamlessly integrated with Google Forms to streamline information gathering.
- Host: GitHub
- URL: https://github.com/haolamnm/magnolia
- Owner: haolamnm
- License: mit
- Created: 2024-03-23T06:07:21.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-01-07T13:48:09.000Z (17 days ago)
- Last Synced: 2025-01-07T14:23:59.584Z (17 days ago)
- Topics: css, google-forms, html, javascript, project, website
- Language: CSS
- Homepage: http://haolamnm.is-a.dev/magnolia/
- Size: 225 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💮 Magnolia
First of all, this is a website that I made for a charity project called **88224**. The project is a website that helps my teammate to fill in the Google Form faster with a good looking design that match the main theme of the entire campaign. The website is made with the most basic things like HTML, CSS, and JavaScript, and it's hosted on GitHub Pages.
## Getting Started
### 1. Online access:
You can access the website at [https://haolamnm.is-a.dev/magnolia/](https://haolamnm.is-a.dev/magnolia/). Feel free to input any information you want, the project has ended and for now it's just a dummy form. You can also use the web development tools to inspect the website and see how it works.
### 2. Local setup:
1. Folk the repository.
2. Clone the repository to your local computer.
```bash
git clone https://github.com/haolamnm/magnolia.git
```
## Technical Stack
1. **HTML:** The structure of the website is built using HTML.
2. **CSS:** The styling and animation of the website is done using CSS.
3. **JavaScript:** Some helper functions.
## For Developers
This is quite easy to do, but it take me some time to google and figure out how to do it. So I think it's good to share a little bit about how to make a website that can submit data to Google Form.
### 1. Form tag
```html
```
- `action`: Make sure the URL is the response link of your Google Form. You can find it by going to your Google Form, click on the three dots on the top right corner, and select "Get pre-filled link". Fill in the form and click "Submit". Then you will be redirected to the response link.
- `method`: Set it to `post`.
### Input tag
```html
```
- `name="entry.key"`: This is the key to submit the data to the Google Form. You can find it by inspecting the form fields of your Google Form. Right-click on the form field and select "Inspect" or "Inspect Element". `Ctrl + F` to search for the `name` attribute. Update the `entry.key` with the `name` attribute of the form field.
_NOTE: Your entry key should look like this: `entry.636287609`._
### Button tag
Finally, don't forget to add a submit button to finish the form.
```html
Submit
```
That's it! For more details, feel free to contact me. I'm happy to help you as much as I can. 🌟
Email: [[email protected]](mailto:[email protected]).
GitHub: [@haolamnm](https://github.com/haolamnm).
LinkedIn: [@haolamnm](https://www.linkedin.com/in/haolamnm/).
---