How to Integrate a Custom Next.js Website With HubSpot for Email Automation

Develop, Build & Integrate APIs & Integrations
1

I’m looking for some advice on integrating HubSpot with my website.

I run website, which is a custom-built Next.js website, not WordPress or another CRM-based website. We collect users’ email addresses when they subscribe to outage updates, and we also have browser push notifications.

I mainly want to use HubSpot for email management and automated email sending. Is there a way to connect my existing Next.js website directly to HubSpot so that when a user submits their email on my website, the contact is automatically added to HubSpot and can receive automated emails through HubSpot?

I don’t need to move my website to HubSpot. I just want to use HubSpot for the email/automation part while keeping my existing Next.js website and push notification system.

3

Hi @alinay, I hope that you are well!

Great question, thanks for asking the HubSpot Community!

I can confirm that once the contact exists in HubSpot, you can set up automated emails via HubSpot workflows enrolled on contact creation or form submission, there is no need to move your site into HubSpot.

Here are some resources for you:

I’d love to hear from our Top Experts: Hi @Anton, @Mike_Eastwood and @alyssamwilie do you have suggestions, please?

Thanks so much and have a fantastic day!

Bérangère

5

Hey @alinay,

the easiest way would be to simply embed the HubSpot forms into your existing page.
Doing this will enrich your CRM/HubSpot portal.

Once your data is in HubSpot, you can create (dynamic lists), let contacts run through workflows and do what ever you need to do.

Setting up the actual email sending is quite straight forward and can be automated with lists.

Important note:
Since every email requires a subscription type, you need to manage them in HubSpot and use the preference center of HubSpot.
While you can create/modify the template itself, I highly advise you to not touch the functionality as this might end in legal actions.

Another way to get user data from your website into HubSpot would be APIs, but this tends to be an overengineered solution most times imo

Hope this helps

Best,
Anton

Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.

7

Thanks for the suggestion. Embedding the HubSpot form sounds like a good approach.

My main concern is the design. I already have a custom report form on my Next.js website, and I want the HubSpot form to look exactly like my existing form so users don’t feel like they are being redirected to or using another service.

I would like to keep the same fields, layout, styling, and overall user experience, while having the submitted data go into HubSpot for contact management and email automation.

Is it possible to embed a HubSpot form but fully customize its styling to match an existing Next.js form like this?

8

You can render legacy HubSpot forms in raw HTML.

The embed code is probably the path of least compromise on your website design. There are trade-offs with either choice.

Native HubSpot forms lack some useful form features (address/email/phone validation APIs/logic).

The HubSpot tracking script will scrape submissions, but internal values need to match for mapping to contact properties to work.

An API call from your website after a successful submission is a nice option, but you lose some of the native HubSpot engagement analytics.

It’s a bit of picking your lesser evil. For some, ease of management trumps everything else. Others need robust analytics to flow into the CRM.

9

Hi @alinay
You can use the form submission API to get the user into the HubSpot instance. The API is already present in the API documentation, and you can call it on the form submission on the webpage.