Loading...
biz499 Createx Logo
Contact us

how Make a World-Class Website for Free Using GitHub Pages, Google Forms, Spreadsheets, and App.j

4 min read

Step 1: Set Up GitHub Pages for Free Hosting

  1. Create a GitHub Repository:

    • Sign in to GitHub and create a new repository.

    • Name your repository (e.g., my-website) and set it to "Public."

  2. Upload Your Website Files:

    • Create your website files: index.html, style.css, and script.js.

    • Push these files to your GitHub repository using Git or the web interface.

  3. Enable GitHub Pages:

    • Go to the repository settings.

    • Scroll to the "Pages" section and select the branch where your files are stored (usually main).

    • Save your changes. Your website will be live at https://<your-github-username>.github.io/<repository-name>/.

Step 2: Create a Contact Form Using Google Forms

  1. Create a Google Form:

    • Go to Google Sheet and create a new form.

    • Add fields such as "Name," "Email," and "Message."

  2. Publish the Form:

    • Click the "Send" button and copy the form link.

  3. Embed the Form:

    • In your index.html, embed the form using the <iframe> tag:

      <iframe src="<Google Form URL>" width="100%" height="500" frameborder="0"></iframe>

Step 3: Collect Responses in Google Sheets

  1. Link Google Form to a Google Sheet:

    • In the Google Form editor, go to "Responses" and click the green spreadsheet icon.

    • This will create a new Google Sheet to store form responses.

  2. View Submissions:

    • Open the linked Google Sheet to see all form submissions in real time.

Step 4: Use Google Apps Script to Handle Form Submissions

  1. Create a Google Apps Script:

    • Open the linked Google Sheet, click on Extensions > Apps Script.

  2. Add a Script:

    • Paste the following script to send data via a web app:

      function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = JSON.parse(e.postData.contents);
  sheet.appendRow([data.name, data.email, data.message]);
  return ContentService.createTextOutput("Success");
}

  3. Deploy the Script:

    • Click Deploy > New Deployment.

    • Select "Web app" and deploy it.

    • Copy the web app URL for the next step.

Step 5: Add Dynamic Form Submission with App.js

  1. Create a Contact Form:

    • In your index.html, create a form:

      <form id="contactForm">
  <input type="text" id="name" placeholder="Name" required>
  <input type="email" id="email" placeholder="Email" required>
  <textarea id="message" placeholder="Message" required></textarea>
  <button type="submit">Submit</button>
</form>
<div id="responseMessage"></div>

  2. Add JavaScript for Form Submission:

    • In script.js, add the following code:

      document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const message = document.getElementById('message').value;

  fetch('https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, email, message })
  })
  .then(response => response.text())
  .then(data => {
    document.getElementById('responseMessage').textContent = 'Form submitted successfully!';
  })
  .catch(error => {
    document.getElementById('responseMessage').textContent = 'Error submitting form. Please try again.';
  });
});

Step 6: Customize and Deploy Your Website

  1. Design Your Website:

    • Use CSS for styling and ensure your website is mobile-friendly.

  2. Test Your Website:

    • Test the form submission and ensure data is correctly recorded in your Google Sheet.

  3. Share Your Website:

    • Share the GitHub Pages link with your audience.

Tags: