custom-gform

Google Form Customizer

Beautify and customize your Google Form with custom HTML and CSS.

Update 4/11/2020:

Added placeholder attribute to the shortanswer paragraph, and dropdown objects. Used for model data binding in custom form if user wishes to add placeholder (which does not exist in Google Form).

Original Google Form (left) vs Customized Google Form (right)

---

Install the package

npm i custom-gform

Run npm install to install all dependencies only if you are cloning the project.

---

API

API	Description	Params
get	Retrieve all form data in the same order listed	none
getBasicData	Returns the form title and description	none
getByCategory	Retrieve all form data and categorize the questions into its own category (short answers, multiple choice...)	none
vueSubmitForm	Submit form on Vue app with one line of code	(gFormData, formData)

---

Supported Question Types

0: Short answers
1: Paragraph
2: Multiple Choice
3: Drop Down
4: Checkboxes  
5: Linear Scale

---

Example .get Output

    // Works with both edit and preview link
    const formData = await get("Replace with your Google Form link");

    {
        formTitle: 'Custom G Form',
        formDescription: 'Form Description',
        questions: [ 
            { 
                entry: 'entry.159023240',
                type: 'multiple-choice',
                title: 'Multiple choice',
                description: 'MC Description',
                choices: [ [Object], [Object], [Object] ],
                required: false 
            },
            { 
                entry: 'entry.1862994755',
                title: 'Multiple choice',
                type: 'multiple-choice',
                description: 'MC Description REQUIRED',
                choices: [ [Object], [Object] ],
                required: true },
            { 
                entry: 'entry.1536591222',
                title: 'Short Answer',
                type: 'short-answer',
                description: 'Description: REQUIRED',
                placeholder: '',
                required: true 
            }
        ]
    }

Example .getByCategory Output

    // Works with both edit and preview link
    const formData = await getByCategory("Replace with your Google Form link");
    { 
        formAction: 'https://docs.google.com/forms/u/0/d/e/1FAIpQLSeHM3lr79IGiu57NR6lwUMqBZDKsp9C5IpzRApgLfdZX2gwkw/formResponse',
        formTitle: 'Custom G Form',
        formDescription: 'Form Description',
        questions: { 
            shortAnswers: [ [Object], [Object] ],
            paragraphs: [ [Object], [Object] ],
            multipleChoice: [ [Object], [Object] ],
            dropDown: [ [Object] ],
            checkBoxes: [ [Object], [Object] ],
            linearScale: [ [Object] ] 
        } 
    }

---

Return Object Info

Key	Description
formAction	POST api to submit the form response
entry	Use this in the name attribute of each form input
required	Check for required form field

---

NEW: Submit forms with one line of code (VUE ONLY)

Always validate your form and don't submit empty forms. Remember to import the api as well.

    import { vueSubmitForm } from 'custom-gform';

    methods: {
        /*
            Retrieve this.gFormData with the .get api and pass it to the first param
            Pass all v-model formData into the second param
            Check code in the next section to learn how to dynamically assign v-models for your form
        */
       
        async submitForm() {
            // Returns a promise with {code: success/fail}!
            await vueSubmitForm(this.gFormData, this.formData);
        },
    }

Dynamically assigns v-model (view example in examples/vue-bootstrap.vue for more info)

    mounted(){
        const dynamicVModel = this.gFormData.questions.map((i) => i.title);

        dynamicVModel.forEach((i) => {
            this.$set(this.formData, i, null);
        });
    }

---

Vue + Bootstrap Example

Check out the examples/vue-bootstrap.vue folder in GitHub for example usage

---

Credits

Custom GForm is created and maintained by Graphicito. For custom web development solution or Google Form customization, contact us at Contact Graphicito.

---

Changelog

    4/11/2020: Added placeholder attribute to the shortanswer paragraph, and dropdown objects. Used for model data binding in custom form if user wishes to add placeholder (which does not exist in Google Form).

    3/11/2020: Added easy vue form submit without importing axios and name attribute dependency.