Super Wizard Form Pack: Documentation

Getting Started

Welcome

Thanks for purchasing our Super Wizard Form Pack :)

It is our great pleasure that you purchased our tools.

If you have any questions, feel free to contact us at support@designcollection.in.

Features

Form Creation
Add Form Titles and Subtitles
Multiple Design Options
Customization the Form
Social Media Sharing
Data Submission to Google Sheets
App Script URL Generation

Change Log

:: VERSION 3.0 WAS RELEASED ::

Updated Google App Script
Added Simple Amdin Dashboard
Added More Person Information Field

:: VERSION 2.0 WAS RELEASED ::

Enhanced Form Titles and Subtitles
Customize the Form
Generate URL with App Script
Submit Custom HTML form data to Google Sheets
Efficient Data Management
Bug Fixes and Performance Enhancements

:: VERSION 1.0 WAS RELEASED ::

Initial Release

Authentication

Change Credentials

To change the credentials, open the login.php web page and change your username and password.

Make a spreadsheet

Step 1: For of all open your gmail account and Make a spreadsheet.

Start a new spreadsheet

Form Integration

Step 2: Generate URL with App Script

Moving on, we now need to generate a Google Sheets app URL that will give us the ability to automatically send data to Google Sheets when we submit our PHP form.

We'll all get along don't worry!

1. We name our Google Spreadsheet “super-wizard-form-pack”. You can give a different name. whatever you'd like. I have named it “super-wizard-form-pack”. Just remember that we will need this name later.

2. We give our Google Sheets column the same name as our name attribute in the PHP form. Remember our first input field is named "email" and second one is named "phone" and third one is named "permanent_address" and there are many more..

Note: You must complete the Google Sheets column fields that we have captured. Please do not remove any of the fields or change any of the fields. Please put them in the correct order.

3. Go to the Extension Tab in Google Sheets once the field names have been properly configured. Select the Apps Script function by clicking on it. You will be taken to a different page as a result..

4. In this Apps Script page, you will see a sample code of the JavaScript function.

5. We can now just copy and paste our JavaScript code. This is how the code looks:

                            var sheetName = 'Sheet1'
                            var scriptProp = PropertiesService.getScriptProperties()
                            
                            function intialSetup () {
                            var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
                            scriptProp.setProperty('key', activeSpreadsheet.getId())
                            }
                            
                            function doPost (e) {
                            var lock = LockService.getScriptLock()
                            lock.tryLock(10000)
                            
                            try {
                                var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
                                var sheet = doc.getSheetByName(sheetName)
                            
                                var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
                                var nextRow = sheet.getLastRow() + 1
                            
                                var newRow = headers.map(function(header) {
                                return header === 'timestamp' ? new Date() : e.parameter[header]
                                })
                            
                                sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
                            
                                return ContentService
                                .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
                                .setMimeType(ContentService.MimeType.JSON)
                            }
                            
                            catch (e) {
                                return ContentService
                                .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
                                .setMimeType(ContentService.MimeType.JSON)
                            }
                            
                            finally {
                                lock.releaseLock()
                            }
                            }

Here our code after replacing

6. Next, we just run our Apps Script.

7. After running the script, Google will ask you to allow the script to run.

8. Execution log indicating the successful execution of your code

9. The next step in the PHP form submit for our Google Apps script is to Add a trigger and select the appropriate option for it. which are listed below:

10. Add Trigger for google-sheet-form-deta

11. Now that Apps Script has a trigger attached to it. Here, we select the newly available deployment option by clicking the Deploy button.

12. We must grant access to all when we publish the Apps Script. Select "Anyone" under the "who has access" option. However, you may be asked to grant access. Finally, your deployment URL will appear.

Note: Open the demo-1.php, demo-2.php, demo-3.php, demo-4.php, demo-5.php web page and Replace this URL with your own macros url in all pages

Note: demo-1.php, demo-2.php, demo-3.php, demo-4.php, demo-5.php Open the web page and I named my spreadsheet "super-wizard-form-pack", so I Taking. You will change the name of the spreadsheet with the name you create.

13. Now you have to share the link.

14. You have to paste the URL of Google Spreadsheet in demo-1.php, demo-2.php, demo-3.php, demo-4.php, demo-5.php.

Congratulations! Your Setup hasbeen Completed

Support