I’ve been asked to create a form that has an email field and a button for newsletter sign up.
i have tried a gaggle of things and am not entirely sure this is possible.
I did go to the legacy so i could enable raw html - i’m putting it together on a regular html file to get it functional and styled. currently it renders a blank screen.
Has anyone done anything like this? If so, please enlighten me as to how ya pulled this off?
Greetings @JohnInDallas
You can acieve this by simply creating a minimal form in HubSpot:
Example of the code below:
<!-- HubSpot Embed Form -->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1", // or your region
portalId: "123456",
formId: "abcdef12-3456-7890-abcd-ef1234567890"
});
</script>
Here’s how a simple form would look like that can be placed any where on the website with the embed code:
However if you want a raw HTML form, You can still post data into HubSpot, just not directly. You’d need to:
Example (simplified, using fetch):
<form id="newsletterForm">
<input type="email" name="email" placeholder="Enter your email" required />
<button type="submit">Subscribe</button>
</form>
<script>
document.getElementById("newsletterForm").addEventListener("submit", async (e) => {
e.preventDefault();
const email = e.target.email.value;
await fetch("https://api.hsforms.com/submissions/v3/integration/submit/PORTAL_ID/FORM_GUID", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
fields: [{ name: "email", value: email }]
})
});
alert("Thanks for subscribing!");
});
</script>
Replace PORTAL_ID and FORM_GUID with your actual HubSpot form’s values.
This will add the email to your HubSpot form submission database.
Happy HubSpotting,
Thanks & Regards,
Dilshad Shaikh
Thank you @DilshadShaikh
I didn’t get a chance to give it a try because i figured it out. I was just about to post the ‘how’. but it is very much like your solution. I have the button next to the field and it’s ready to be styled. The issue i was having was the V2 call. My page was rendering blank all because an error calling the js was being encountered.
I’ll post what I used here in a moment. Thank you soooo much for the speedy response. So grateful!!!
This is how I managed to resolve my issue and get the submit button to appear to the right of the email field. Now all is left is to style it. Additional info that may be helpful, i used the HubSpot Legacy forms and used the raw html to remove the default formatting that HubSpot applies.
#hsForm_FORM-ID-GOES-HERE {
display: flex !important;
gap: 10px;
align-items: center; /\* Vertical alignment \*/
padding: 0 !important;
max-width: 500px;
}
/* TARGETS THE FIELD WRAPPER AND OVERRIDE BLOCK BEHAVIOR */
#hsForm_FORM-ID-GOES-HERE .hs-form-field {
flex-grow: 1;
flex-basis: 70%;
margin-bottom: 0 !important;
width: auto !important;
}
#hsForm_FORM-ID-GOES-HERE input[type=“email”] {
width: 100% !important;
}
/* TARGETS THE BUTTON WRAPPER AND OVERRIDE BLOCK BEHAVIOR */
#hsForm_FORM-ID-GOES-HERE .actions {
flex-shrink: 0;
flex-basis: 30%;
width: auto !important;
margin-left: 0 !important;
margin-top: 0 !important;
}
#hsForm_FORM-ID-GOES-HERE input[type=“submit”] {
width: 100% !important;
}
/* HIDE LABEL */
#hsForm_FORM-ID-GOES-HERE label {
display: none !important;
}
<div id=“hubspot-inline-form-container”>
\</div>
<script charset=“utf-8” type=“text/javascript” src=“https://js.hsforms.net/forms/embed/v2.js”></script>
<script>
// The script now runs immediately after the container div is defined
hbspt.forms.create({
portalId: "YOUR-PORTAL-ID",
formId: "YOUR-FORM-ID",
region: "na1",
// Specify the unique ID target
target: "#hubspot-inline-form-container",
// Essential for unstyled forms
css: ""
});
</script>