12 |
13 |
14 | 
15 |
16 |
17 | 
18 |
19 |
20 | 
21 |
22 |
23 | 
24 |
25 |
26 |
27 |
2 |
3 | Meowform
4 |
5 |
10 |
11 |
32 | View Demo 33 | · 34 | Report Bug 35 | · 36 | Request Feature 37 |
38 | 39 | ### Introducing MeowForm 🐱 40 |
41 |
42 | Build custom forms with no backend code
43 |
44 |
45 | ## 🚀 Demo
46 |
47 |
48 |
49 |
50 |
51 | Try the App: [MeowForm](https://www.meowform.xyz/)
52 |
53 |
54 |
55 |
56 |
57 | ## 🛠️ Installation Steps
58 |
59 | 1. Clone the repository
60 |
61 | ```bash
62 | git clone https://github.com/tewarig/MeowForm.git
63 | ```
64 |
65 | 2. Change the working directory
66 |
67 | ```bash
68 | cd MeowForm
69 | ```
70 |
71 | 3. Install dependencies
72 |
73 | ```bash
74 | npm install
75 | ```
76 |
77 | 4. Create `.env` file in root and add your variables
78 |
79 | ```bash
80 | REACT_APP_AUTH_DOMAIN="Auth0 app domain "
81 | REACT_APP_CLIENTID=" Auth 0 Client id"
82 | REACT_APP_HOSTURL=" Server url "
83 | REACT_APP_APIKEY=" Api key"
84 |
85 | ```
86 |
87 | 5. Run the app
88 |
89 | ```bash
90 | npm run start
91 | ```
92 |
93 | You are all set! Open [localhost:3000](http://localhost:3000/) to see the app.
94 |
95 | ## 🍰 Contributing
96 |
97 | Pull Requests are always welcome!
98 | If you wish to contribute using Github, you can work on any features or create one on your own. After adding your code, send us a Pull Request.
99 |
100 |
101 | - Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow). Create a branch, add commits, and [open a pull request](https://github.com/tewarig/MeowForm/compare).
102 |
103 |
104 |
105 |
106 |
107 | ## 🌈 What's next
108 |
109 | Well I would be mainting MeowFrom on weekends , and I would be adding more features soon.
110 |
111 | Here are some idea that is coming really soon 👀
112 |
113 | - Well having an option to export responses in excel sheet
114 | - Adding examples for more frameworks and projects.
115 |
116 |
117 |
118 | ## 🛡️ License
119 |
120 | This project is licensed under the MIT License - see the [`LICENSE`](LICENSE) file for details.
121 |
122 | ## 🦄 Deploy
123 |
124 |
125 | 
126 |
127 |
128 | 
132 |
133 |
134 | 
161 |
162 | ---
163 |
164 | ${entry[i]}
${entry[i]} Q . {data.question} A . {data.answer}
24 | Amazing Project Gaurav Tewari, I had used this in my portfolio,
25 | its very easy to use, literally I don't have to write any
26 | back-end. And specially that mail feature, I really liked it. Keep
27 | it up Bro 🙌🏻
28 |
39 | Great App Gaurav Tewari, Very helpful. This will help me a lot
40 | when form submitting. Kudos 👏 I really like the idea and the
41 | implementation is also so good. Keep up the good work bro! 🚀
42 |
53 | Amazing idea bro, this will help a ton of developers in their projects. Kudos, great work 🔥
54 |
`
51 | }
52 | // console.log(mailBody);
53 | let data = JSON.stringify(req.body);
54 |
55 |
56 | let meow = await updateUser(userData[0]._id,formName, title,entry,formData);
57 | res.status(200).json({msg : 'Response Saved'});
58 |
59 | mg.messages().send( {
60 | from: 'Cheese 🐱
buy Cheese some cat food 🐟 `
64 | } , function (error, body) {
65 |
66 | if(error){
67 | console.log(error);
68 | }else{
69 | console.log(body);
70 | }
71 | });
72 |
73 |
74 |
75 |
76 | });
77 | module.exports = router;
--------------------------------------------------------------------------------
/backend/router/Response.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const router = express.Router();
3 | var axios = require("axios").default;
4 | const searchUser = require("../utility/searchUser");
5 | const updateUser = require("../utility/updateUser");
6 | const mailgun = require("mailgun-js");
7 | const DOMAIN = process.env.Domain ;
8 | const api_key = process.env.API_MONEY;
9 | const mg = mailgun({apiKey: api_key, domain: DOMAIN});
10 |
11 | const app = express();
12 |
13 | app.set('view engine','ejs');
14 | app.set('views', './views');
15 |
16 |
17 | router.post("/:email&:formName",async(req,res)=>{
18 |
19 |
20 |
21 |
22 | let email = req.params.email ;
23 | let userData = await searchUser(email) ;
24 | if(userData == ""){
25 | res.send("You must signUp with that email to use MeowFroms");
26 | return;
27 | }
28 |
29 | // console.log(userData[0].forms.length);
30 | let formName = req.params.formName;
31 | let temp = req.body;
32 |
33 | let formData = JSON.stringify(temp);
34 | temp = JSON.stringify(temp);
35 | temp = temp.replace(/{/g," ");
36 | temp = temp.replace(/}/g," ");
37 | temp = temp.split(",");
38 | let title = [];
39 | let entry = [];
40 | for(let i=0;i
`
51 | }
52 | // console.log(mailBody);
53 | let data = JSON.stringify(req.body);
54 |
55 |
56 | let meow = await updateUser(userData[0]._id,formName, title,entry,formData);
57 | res.sendFile("./views/submited.html" ,{root :__dirname });
58 |
59 | mg.messages().send( {
60 | from: 'Cheese 🐱
buy Cheese some cat food 🐟 `
64 | } , function (error, body) {
65 |
66 | if(error){
67 | console.log(error);
68 | }else{
69 | console.log(body);
70 | }
71 | });
72 |
73 |
74 |
75 |
76 | });
77 | module.exports = router;
--------------------------------------------------------------------------------
/backend/router/addForm.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const router = express.Router();
3 | const addFrom = require("../utility/addForm");
4 |
5 |
6 | router.post("/:authKey",async(req,res)=>{
7 | let authKey = req.params.authKey;
8 | if(authKey === process.env.authKey){
9 | let email = req.body.email;
10 | let formName = req.body.formName;
11 | let url = req.body.url || "";
12 | addFrom(email,formName ,url);
13 | }else{
14 | res.send("AuthKey does not match");
15 | }
16 |
17 | });
18 |
19 | module.exports = router;
--------------------------------------------------------------------------------
/backend/router/addUrl.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const router = express.Router();
3 | const User = require("../Modles/user");
4 | const updateUrl = require("../utility/updateUrl");
5 |
6 |
7 |
8 | router.post("/:mail&:authKey",async(req,res)=>{
9 |
10 | let authKey = req.params.authKey;
11 | if(authKey === process.env.authKey){
12 |
13 |
14 | let url = req.body.url;
15 | let formName = req.body.formName;
16 |
17 |
18 | let email = req.params.mail;
19 | updateUrl(email,url, formName);
20 |
21 | res.send("yo");
22 |
23 |
24 | }else{
25 | res.status(401).send("Auth Key does not match");
26 | }
27 |
28 |
29 |
30 | });
31 |
32 | module.exports = router;
--------------------------------------------------------------------------------
/backend/router/index.html:
--------------------------------------------------------------------------------
1 | !
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
54 |
66 |
67 |
68 |
73 |
74 |
--------------------------------------------------------------------------------
/backend/utility/addForm.js:
--------------------------------------------------------------------------------
1 | const User = require("../Modles/user");
2 |
3 |
4 |
5 |
6 | let addForm = async(email,formName,url) => {
7 |
8 | let index = 0;
9 | let result = await User.find({email});
10 | let temp = result[0]._id;
11 | result = await User.findById(temp);
12 | let newForm = {};
13 | newForm["formData"] = [];
14 | console.log(url);
15 | newForm["redirectUrl"] = url;
16 | newForm["formName"] = formName;
17 | result.forms.push(newForm);
18 | let finalForm = result.save();
19 | console.log(result);
20 | }
21 |
22 |
23 |
24 | module.exports = addForm;
--------------------------------------------------------------------------------
/backend/utility/createUser.js:
--------------------------------------------------------------------------------
1 | const User = require("../Modles/user");
2 |
3 | const log = async(email) => {
4 |
5 | const newUser = new User({
6 | email,
7 | })
8 | try{
9 | const a1 = await newUser.save();
10 | return a1;
11 | }catch(error){
12 | console.log(error);
13 | }
14 | }
15 | module.exports = log;
--------------------------------------------------------------------------------
/backend/utility/searchUser.js:
--------------------------------------------------------------------------------
1 | const User = require("../Modles/user");
2 |
3 | let result ;
4 | const search = async(email) => {
5 |
6 | let temp = await User.find({email});
7 | return temp;
8 |
9 | }
10 | module.exports = search;
--------------------------------------------------------------------------------
/backend/utility/sendMail.js:
--------------------------------------------------------------------------------
1 | const nodemailer = require("nodemailer");
2 |
3 | async function main() {
4 | // Generate test SMTP service account from ethereal.email
5 | // Only needed if you don't have a real mail account for testing
6 |
7 |
8 | let testAccount = await nodemailer.createTestAccount();
9 |
10 | // create reusable transporter object using the default SMTP transport
11 | let transporter = nodemailer.createTransport({
12 | host: "smtp.ethereal.email",
13 | port: 587,
14 | secure: false, // true for 465, false for other ports
15 | auth: {
16 | user: testAccount.user, // generated ethereal user
17 | pass: testAccount.pass, // generated ethereal password
18 | },
19 | });
20 |
21 | // send mail with defined transport object
22 | let info = await transporter.sendMail({
23 | from: '"Fred Foo 👻" 
55 |
56 |
58 | Meow!
57 |
59 |
60 | Your Form has been submited
61 |
62 |
65 |
22 |
49 | );
50 | }
51 |
52 | export default Faq
53 |
--------------------------------------------------------------------------------
/src/comp/Comp/Footer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Box, Text, Flex, useMediaQuery } from "@chakra-ui/react";
3 |
4 | function Footer(props) {
5 | const [check] = useMediaQuery("(min-width: 1025px)");
6 | return (
7 |
23 |
48 |
24 |
33 |
34 | {
35 | FAQ_Data.map((data) => (
36 |
47 |
37 |
44 | ))
45 | }
46 |
38 |
40 |
41 |
43 |
16 |
30 | );
31 | }
32 |
33 | export default FormData;
--------------------------------------------------------------------------------
/src/comp/Comp/FormHeading.js:
--------------------------------------------------------------------------------
1 | import { Spacer, Text } from '@chakra-ui/layout';
2 | import {Flex , Divider} from '@chakra-ui/react';
3 | import React from 'react';
4 |
5 | function FormHeading({obj}) {
6 | let arr = [];
7 | let temp = obj;
8 | const objectArray = Object.entries(temp);
9 | objectArray.forEach(([key, value]) => arr.push(key));
10 |
11 |
12 |
13 |
14 |
15 | return (
16 |
17 |
44 | );
45 | }
46 |
47 | export default FormHeading;
--------------------------------------------------------------------------------
/src/comp/Comp/MenuButtons.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Link} from 'react-router-dom';
3 | import {Button ,Text} from '@chakra-ui/react';
4 |
5 | function MenuButtons({link,icon,Tittle,click ,nextPage}) {
6 | return (
7 |
8 |
9 |
10 |
11 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 |
25 | export default MenuButtons;
--------------------------------------------------------------------------------
/src/comp/Comp/MenuItems.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MenuButtons from './MenuButtons';
3 | import {Button, IconButton} from "@chakra-ui/button";
4 | import { VStack,Flex ,Heading, Spacer , Box , Text , Divider} from "@chakra-ui/layout";
5 | import {useMediaQuery} from "@chakra-ui/react";
6 | import {Tooltip } from "@chakra-ui/react";
7 | import { FaSun , FaMoon, FaGithub, FaUser} from "react-icons/fa";
8 | import { FcList, FcSearch } from "react-icons/fc";
9 | import {BsSearch ,BsCalendarFill, BsPeopleFill, BsPerson, BsFillExclamationCircleFill, BsStar ,BsMenu} from "react-icons/bs";
10 | import { useColorMode ,useColorModeValue } from '@chakra-ui/color-mode';
11 | import {Link} from "react-router-dom";
12 | import {MdRemoveFromQueue , MdFindInPage , MdStar, MdPeople} from "react-icons/md";
13 |
14 | import {
15 | Drawer,
16 | DrawerBody,
17 | DrawerFooter,
18 | DrawerHeader,
19 | DrawerOverlay,
20 | DrawerContent,
21 | DrawerCloseButton,
22 | useDisclosure
23 | } from "@chakra-ui/react";
24 |
25 | function MenuItems({onClose}) {
26 | return (
27 |
28 |
60 | );
61 | }
62 |
63 | export default MenuItems;
--------------------------------------------------------------------------------
/src/comp/Comp/NavBar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Button, IconButton} from "@chakra-ui/button";
3 | import {Avatar }from '@chakra-ui/react';
4 | import { VStack,Flex, Spacer , Box , Text , Divider} from "@chakra-ui/layout";
5 | import {useMediaQuery} from "@chakra-ui/react";
6 | import {Tooltip } from "@chakra-ui/react";
7 | import { FaSun , FaMoon, FaGithub, FaList} from "react-icons/fa";
8 | import { useColorMode ,useColorModeValue } from '@chakra-ui/color-mode';
9 | import {Link} from "react-router-dom";
10 | import { useAuth0 } from "@auth0/auth0-react";
11 |
12 |
13 | import {
14 | Drawer,
15 | DrawerBody,
16 | DrawerHeader,
17 | DrawerOverlay,
18 | DrawerContent,
19 | useDisclosure,
20 | Menu,
21 | MenuButton,
22 | MenuList,
23 | MenuItem
24 |
25 | } from "@chakra-ui/react";
26 | import MenuItems from './MenuItems';
27 |
28 |
29 | function Navbar(props) {
30 | const {colorMode , toggleColorMode }= useColorMode();
31 | const isDark = colorMode === 'dark';
32 | const { isOpen, onOpen, onClose } = useDisclosure()
33 | const [size, setSize] = React.useState("md")
34 | const [check] = useMediaQuery("(min-width: 1025px)")
35 | const [meow ,setMeow] = React.useState(false);
36 | const [signIn,setSignIn] = React.useState(false);
37 | const formBackground = useColorModeValue("white.100","gray.900");
38 | const { loginWithRedirect , logout , isAuthenticated , user} = useAuth0();
39 |
40 |
41 | let flag = false;
42 | var setFlag = () =>{
43 | setMeow(!meow);
44 | onClose();
45 | }
46 |
47 | return (
48 | <>
49 |
50 |
17 |
31 | 
21 |
22 |
30 | Anmol Malik
23 |
32 |
45 | 
36 |
37 |
44 | Savio Martin
38 |
46 |
57 | 
50 |
51 |
56 | Devansh Dubey
52 |
7 |
28 | );
29 | }
30 |
31 | export default FullPage;
--------------------------------------------------------------------------------
/src/data/faq.js:
--------------------------------------------------------------------------------
1 | export const FAQ_Data = [{
2 | 'id': 1,
3 | 'question': 'How you are able to keep Meow Form Completely free?',
4 | 'answer': `Currently MeowForm's is costing me around $5 a month I am able to cover this cost.`
5 | },
6 | {
7 | 'id': 2,
8 | 'question': 'What if i do if a not receive email responses ?',
9 | 'answer': ' Currenlty due to bugeting Meowform has a cap of 30,000 emails a month . so if this limit is cross you would not receive any of the email. but still you can check you dashboard for new responses'
10 | },
11 | {
12 | 'id': 3,
13 | 'question': 'How can i support Meowforms ? ',
14 | 'answer': 'You can support it by contributing to meowform in github or by telling the whole world about Meowforms or by buying me a coffe or Ice Tea'
15 | },
16 | {
17 | 'id': 4,
18 | 'question': 'What if you stop Mainting MeowForms or Paying for the Services ',
19 | 'answer': `Surely MeowForms will go offline but the Code is open sourced so you can deploy a the code youself if you are heavly deponded on Meowform`
20 | },
21 | ]
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
15 | /* reviews */
16 | .carousel-root {
17 | width: 64% !important;
18 | margin: auto !important;
19 | margin-top: 3% !important;
20 | }
21 |
22 | .carousel .slide {
23 | background: #fff !important;
24 | color: black;
25 | height: 100%;
26 | }
27 |
28 | .carousel .slide img {
29 | width: 100px !important;
30 | border-radius: 50%;
31 | }
32 |
33 | .myCarousel {
34 | background: #fafafa;
35 | margin-top: -6%;
36 | width: 75%;
37 | margin-left: auto;
38 | margin-right: auto;
39 | padding-top: 6%;
40 | padding-bottom: 20%;
41 | padding-left: 5%;
42 | padding-right: 5%;
43 | border: 1px solid #ddd;
44 | height: 286px;
45 | }
46 |
47 | .carousel .control-dots {
48 | padding-left: 5px !important;
49 | outline: 0;
50 | bottom: 5% !important;
51 | }
52 |
53 | .myCarousel h3 {
54 | color: #222;
55 | font-weight: 100;
56 | letter-spacing: 0.2px;
57 | margin-bottom: 10px;
58 | font-weight: 600;
59 | /* text-transform: uppercase; */
60 | font-size: 22px;
61 | }
62 |
63 | .myCarousel p {
64 | font-weight: 140 !important;
65 | line-height: 29px !important;
66 | color: #222;
67 | font-size: 17px;
68 | font-family: sans-serif;
69 | max-height: 67px;
70 | }
71 |
72 | .myCarousel p:before {
73 | content: "“";
74 | color: rgb(192, 129, 46);;
75 | font-size: 26px;
76 | font-family: monospace;
77 | font-weight: 100;
78 | }
79 |
80 | .myCarousel p:after {
81 | content: "”";
82 | color: rgb(192, 129, 46);
83 | font-size: 26px;
84 | font-family: monospace;
85 | font-weight: 100;
86 | line-height: 0;
87 | }
88 |
89 | .carousel .control-dots .dot {
90 | box-shadow: none !important;
91 | background: orange !important;
92 | outline: 0;
93 | }
94 |
95 | .carousel.carousel-slider .control-arrow {
96 | background:orangered !important;
97 | height: 50px !important;
98 | position: absolute;
99 | top: 35% !important;
100 | }
101 |
102 | @media only screen and (max-width: 934px) {
103 | .carousel-root {
104 | outline: 0;
105 | width: 93% !important;
106 | margin: auto !important;
107 | }
108 |
109 | .carousel.carousel-slider .control-arrow {
110 | display: none !important;
111 | }
112 | .myCarousel {
113 | background: #fafafa;
114 | margin-top: -9%;
115 | width: 88%;
116 | margin-left: auto;
117 | margin-right: auto;
118 | padding-top: 8%;
119 | padding-bottom: 12.5%;
120 | padding-left: 5%;
121 | padding-right: 5%;
122 | border: 1px solid #ddd;
123 | height: 269px;
124 | }
125 |
126 | .carousel .slide img {
127 | width: 24% !important;
128 | border-radius: 50%;
129 | }
130 | }
131 |
132 | .Reviews{
133 | padding: 30px 10px 170px 10px ;
134 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | ReactDOM.render(
8 |
27 |
113 |
114 |
115 | .
116 |
117 |
118 | Meow Form in action
215 |
217 | {/*
219 |
220 |
222 |
223 | );
224 | }
225 |
226 | export default Home;
227 |
--------------------------------------------------------------------------------
/src/pages/Index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Fade from "react-reveal/Fade";
3 | import { BrowserRouter as Router, Route } from "react-router-dom";
4 |
5 | import Navbar from "../comp/Comp/NavBar";
6 | import Home from "./Home/Home";
7 | import Dashboard from "./Dashboard/Dashboard";
8 | import Auth0ProviderWithHistory from "../Util/AuthWithHistory";
9 | import Footer from "../comp/Comp/Footer";
10 |
11 | function Index(props) {
12 | return (
13 |