# How to customize and embed Google Forms on your website?

Landing pages are crucial for any business. They're your first impression, your lead generator, and your user engagement driver. But as crucial as they are, there's one component that can be surprisingly cumbersome to implement effectively - the **contact form**.

I am sure you would have come across people setting up dedicated servers to handle form submissions. This is an overkill and definitely could be optimized. There are existing products like [Google Forms](https://www.google.com/forms/about/) that store form responses in [Google Sheets](https://www.google.com/sheets/about/), but you can't customize the styles and match them with your site's existing design.  
  
That's why I built [form2Sheets](https://formtosheets.vercel.app/) using NextJS, TailwindCSS, and Typescript, this tool allows you to use your Google form on your website. This blog explains how to use [form2Sheets](https://formtosheets.vercel.app/) step by step.

1. Create a Google form by visiting [forms.google.com](https://docs.google.com/forms/u/0/)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699284372653/83533663-e371-4e55-8606-a78a9dea0aef.png align="center")
    
2. Click on send and copy the URL
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699284495072/7236fa12-e4af-4126-bace-7ae4a156d4dd.png align="center")
    
3. Visit [formtosheets.vercel.app](https://formtosheets.vercel.app/)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699284619585/6c2bbb17-bdd7-4b63-a0b5-6c95c6f08eb8.png align="center")
    
4. Paste the copied URL and click on the generate button
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699284670133/d0308907-08f8-4c87-b3bc-099391ec435e.png align="center")
    
5. Now you can see that the code for multiple frameworks is generated
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699284737025/f90cd953-8445-45aa-b0ee-a4697ef9cc4c.png align="center")
    
6. If you paste the HTML you'll see the output like this
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699284937943/830ff6b1-87cd-44fe-8765-7828cfb973c0.png align="center")
    
7. After entering the details and clicking on submit you'll be redirected to Google Forms' submitted page, you can write Javascript to prevent this redirect, for now, I consider this to be out of the scope of this blog
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699285015242/0606c161-9541-4789-adba-e282637a8798.png align="center")
    
8. In the responses tab, you can check that your response is recorded
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699285160401/5e2228a8-09ac-4034-9eda-d217bec3283c.png align="center")
    
      
    Hope [form2Sheets](https://formtosheets.vercel.app/) makes your work easier when you build forms on your websites. If you're curious about how I have built this tool you can have a look at the [GitHub repository](https://github.com/sudharsangs/formtosheets)  
      
    Happy Learning!
    
    [**sudharsangs.in**](http://sudharsangs.in)