Building a flexible ACF landing page template with HubSpot form integration
When a client needed a custom landing page template built with Advanced Custom Fields (ACF), the Freshy development team designed a reusable, dynamic layout that could be extended for future marketing pages — complete with embedded HubSpot forms and brand-consistent styling.
Issue background
The goal was to create a three-section landing page template using ACF that mirrored the layout of a reference marketing page provided by the client. The sections included:
- A single-column hero area with a centered logo.
- A two-column content section featuring a headline, body text, button, and image.
- A two-column call-to-action section containing text on one side and a HubSpot form on the other.
The client also requested a simplified thank-you page using the same template but without the final form section.
The site was hosted on AWS, which introduced some access limitations — particularly around file editing and script embedding — requiring creative problem-solving to complete the work efficiently.
Diagnosis
Initial attempts to use an existing Elementor template failed due to layout constraints. The development team determined a custom ACF-based flexible content layout would offer the best balance of scalability and ease of management.
However, there were a few key challenges:
- Limited access to the live site: the theme file editor on AWS was restricted, and FTP access was not initially available.
- JavaScript execution limitations: the live environment blocked certain inline scripts, including HubSpot’s embed JS.
- HubSpot form handling: the form needed to redirect to the thank-you page after submission, requiring custom script logic.
Resolution steps
- Built flexible ACF layout: The developer created modular sections using ACF’s Flexible Content field type, allowing marketing staff to easily rearrange or expand the landing page in the future.
- Developed a custom page template: The template was coded in the theme’s files, with clean separation of structure and content. Each ACF section handled specific layouts (single-column hero, dual-column content, and form integration).
- Added HubSpot form embed and redirect logic: To support a redirect after form submission, the following HubSpot script was implemented:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script> <script> hbspt.forms.create({ portalId: "24402923", formId: "7856394b-d78a-42fe-be5f-fde574e3c352", region: "na1", onFormSubmit: function(form) { setTimeout(function() { window.location.href = "https://example.com/thank-you"; }, 2000); } }); </script> - Created staging environment for development: Since AWS restrictions prevented direct edits, the team used BlogVault staging with full SFTP access to build and test the ACF template safely before transferring it live.
- Styled and refined design: The developer adjusted section spacing, backgrounds, and typography to match the site’s branding. The button was anchored to scroll to the form section for smoother UX.
- Migrated to live environment: Once approved, the new ACF files were moved to production, and the template was applied to both the landing and thank-you pages.
Final outcome
The final solution delivered:
- A fully dynamic, reusable ACF template for landing pages and thank-you pages.
- Integrated HubSpot forms with redirect functionality and consistent visual design.
- Improved flexibility for future marketing campaigns, enabling new landing pages without developer intervention.
The project demonstrated Freshy’s ability to deliver complex custom WordPress templates even under strict hosting limitations — ensuring robust functionality and seamless marketing workflow integration.
Need a custom WordPress landing page?
Freshy specializes in building ACF-powered templates, HubSpot integrations, and optimized landing pages tailored to your marketing goals. Contact our team today.
