3.2 Embed HubSpot Forms

This tutorial is going to demostrate how to integrate and utilize HubSpot in your personal webpage.

HubSpot Marketing Forms

HubSpot provides the capability to create custom forms for the purposes of registration, contact, support and more. Every form you create you can select what contact, company, ticket or other properties you need. This tutorial demonstrates how to create a HubSpot form and embed that form onto your webpage.

Create & Embed Form

Open your Hubspot Console (Click Go to my account)
In the menu click Marketing, Forms
Click Create a free form
Select Embedded form and click Next
Select Blank template and click Start
Click and drag Email, First name, Last name, Phone Number and Message fields into your form
Hover over First name
Click More, Make Required
Do the same for Email and Message
Click Update, Publish
Click the Embed code tab, Copy
Open your index.html file in your IDE
1. You may have to change your branch
2. Open Terminal in IDE
3. Run the following command to get into the branch where your code is
```
 git checkout gh-pages
```
Paste the code in your index.html file above the </body> tag

Push Changes to GitHub website

Open Terminal in IDE
1. Run the following command to get into the branch where your code is
```
 git checkout gh-pages
```
Run the following commands
1. Add code to staging area (local changes are tracked)
```
 git add --all
```
2. Record file in version history
```
 git commit -am "Added HubSpot Form"
```
3. Send changes to remote repository (where your website is built from)
```
 git push
```
Wait about 1 minute for git to build your webpae and open the link to your website. (<github-username>.github.io/<repository-name>)
Send a test submission of your form!

Note: See 1.2 Create a Public Webpagewith GitHub Pages, Deploy to GitHub Pages form more information on GitHub Pages set up.

See Form Submissions

Open your Hubspot Console (Click Go to my account)
In the menu cllick Marketing, Forms
Select your form
Click the Submissions tab