How to Create a Custom HubSpot Contact Form with API Integration

Introduction:
HubSpot is a powerful CRM platform that allows businesses to manage their contacts efficiently. In this tutorial, we will create a simple custom contact form using PHP that integrates with HubSpot’s API to store user data directly into your HubSpot CRM.

Why Use a Custom Contact Form?
A custom contact form offers more flexibility than standard HubSpot forms. You can customize the design, add validations, and integrate with other tools as needed.

Steps to Create a Custom HubSpot Contact Form

1. Get Your HubSpot API Key

To connect to HubSpot's API, you need an API key. You can find it by navigating to:

  • HubSpot Dashboard → Settings → Integrations → API Key

Copy and keep this key safe as we will use it in our code.

2. Create the PHP Form

Below is the PHP code for the custom HubSpot contact form:

  
  
// Define HubSpot API Key
$hubspot_api_key = 'YOUR_HUBSPOT_API_KEY';

// Check if form is submitted
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $contact_data = [
        'fields' => [
            ['name' => 'firstname', 'value' => $_POST['firstname']],
            ['name' => 'lastname', 'value' => $_POST['lastname']],
            ['name' => 'email', 'value' => $_POST['email']]
        ]
    ];
    
    $endpoint = "https://api.hubapi.com/crm/v3/objects/contacts?hapikey=$hubspot_api_key";
    
    $ch = curl_init($endpoint);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($contact_data));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        'Content-Type: application/json'
    ]);
    
    $response = curl_exec($ch);
    curl_close($ch);
    
    echo "Contact submitted successfully!";
}

3. Create the HTML Form

Add this HTML code to your project to create a user-friendly form:




    
    
    HubSpot Contact Form


    

HubSpot Contact Form




4. Deploy and Test the Form

  • Save the PHP file and host it on your web server.
  • Open the form in your browser, enter details, and submit.
  • The submitted contact details should now appear in your HubSpot CRM.
Creating a custom HubSpot contact form using API integration allows for more flexibility in capturing user data. You can further enhance this by adding custom fields, validation, and error handling. Try implementing this on your website and streamline your lead management with HubSpot CRM.

Introduction to HubSpot Development: A Beginner’s Guide

HubSpot is a powerful platform that offers marketing, sales, customer service, and content management solutions. Developers can extend and customize its functionality through HubSpot’s API, CMS Hub, and custom modules. If you're new to HubSpot development, this guide will help you get started.

Why Develop on HubSpot?

  1. User-Friendly CMS - HubSpot’s CMS is designed for marketers but offers flexibility for developers to create custom themes and modules.
  2. Extensive API Support - HubSpot provides REST APIs for CRM, marketing automation, and more, allowing integration with third-party services.
  3. HubL Templating Language - HubSpot uses HubL, a proprietary templating language, to create dynamic pages and emails.
  4. Built-in Security & Performance - The platform handles hosting, security, and performance optimization, reducing the need for external configurations.

Getting Started with HubSpot Development

1. Setting Up a Developer Account

To start developing on HubSpot, you need a free developer account. Sign up at HubSpot Developer Portal.

2. Understanding HubSpot CMS

HubSpot’s CMS allows you to create themes, templates, and modules using HubL, HTML, CSS, and JavaScript.

  • Themes: Collections of templates and assets to define the site's design.
  • Modules: Reusable UI components for adding functionality.
  • Templates: Define page layouts and content structure.

3. Using HubSpot CLI

HubSpot’s CMS allows you to create themes, templates, and modules using HubL, HTML, CSS, and JavaScript.HubSpot offers a Command Line Interface (CLI) for local development. Install it using:

  
npm install -g @hubspot/cli

With this, you can develop themes, modules, and templates locally and sync them with your HubSpot account.

4. Working with HubL (HubSpot Markup Language)

HubL is HubSpot’s templating language, used for dynamic content. Example of a simple loop:

  
{% for post in blog_posts %}
   

{{ post.title }}

{% endfor %}

5. Exploring HubSpot API

HubSpot provides a range of APIs for automation and integration:

  • CRM API - Manage contacts, companies, and deals.
  • Forms API - Handle form submissions programmatically.
  • Marketing API - Automate emails, social posts, and campaigns.
  • Tickets API - Manage customer support tickets.

Example API call using JavaScript:

  
fetch('https://api.hubapi.com/crm/v3/objects/contacts', {
   headers: { 'Authorization': 'Bearer YOUR_ACCESS_TOKEN' }
})
.then(response => response.json())
.then(data => console.log(data));

HubSpot development provides a wide range of tools for customizing websites, automating tasks, and integrating with external services. Whether you're a beginner or an advanced developer, mastering HubL, API integrations, and HubSpot’s CMS will help you create powerful solutions.

If you’re looking for more tutorials, stay tuned to our blog for advanced HubSpot development tips!

How to Use Elementor Forms in Your Custom Template

Elementor is a powerful page builder that simplifies WordPress design, but sometimes you may want to use an Elementor Form inside a custom template. Whether you're building a custom theme or creating a special layout, integrating an Elementor Form is straightforward. In this post, I'll walk you through three simple methods to achieve this.

Method 1: Using Elementor Shortcode

The easiest way to insert an Elementor form into a custom template is by using the Elementor template shortcode.

Steps:

  1. Create Your Form – Design your form using the Elementor Form widget and save it as a template.
  2. Get the Template Shortcode – Navigate to Templates > Saved Templates in WordPress and copy the shortcode of the saved template.
  3. Embed the Shortcode in Your Custom Template – Paste the shortcode into your custom template file using the following PHP function
  
echo do_shortcode('[elementor-template id="YOUR_TEMPLATE_ID"]');

Replace

YOUR_TEMPLATE_ID
with the actual ID of your saved template.

Method 2: Using Elementor's PHP Function

For better control over the output, you can use Elementor's built-in function to render a template inside your PHP file.

Steps:

  1. Ensure your form is saved as a template in Elementor.
  2. Insert the following PHP code in your custom template file:
  
echo \Elementor\Plugin::instance()->frontend->get_builder_content(YOUR_TEMPLATE_ID);

his function retrieves and displays the content of the specified Elementor template.

Method 3: Using Elementor’s API for Dynamic Embedding

If you need more flexibility, you can use Elementor’s API to dynamically fetch and display the form template.

Steps:

  1. Ensure Elementor is active on your site.
  2. Add this code to your custom template file:
  
use Elementor\Plugin;

$elementor = Plugin::instance();
echo $elementor->frontend->get_builder_content_for_display(YOUR_TEMPLATE_ID);

This method allows for more dynamic form rendering.

Final Thoughts

Using Elementor Forms in a custom template can enhance your website’s functionality without relying on additional plugins. Whether you prefer using a shortcode, PHP functions, or Elementor's API, these methods provide a seamless way to integrate forms into your custom layouts.

Do you use Elementor Forms in your custom templates? Let me know in the comments!

How to Limit Navigation Dots in Slick Slider Using jQuery

Slick Slider is a popular jQuery plugin for creating responsive carousels. However, when working with large numbers of slides, the default dot navigation can become overwhelming. In this tutorial, we will learn how to limit the number of visible dots in Slick Slider using jQuery.

Why Limit Navigation Dots?

By default, Slick Slider generates one dot for each slide. If your slider has 20+ slides, it results in a cluttered navigation UI. Limiting the dots to a fixed number (e.g., 6 dots at a time) ensures a clean and user-friendly interface.

Implementing Slick Slider with Limited Dots

Step 1: Include Required Files

First, make sure to include jQuery and Slick Slider in your project.

  







Step 2: Create the Slider Markup

 

Step 3: Initialize Slick Slider and Limit Dots

 
jQuery(document).ready(function($) {
    var maxDots = 6; // Limit the visible dots to 6

    $('.brand_list_slider').slick({
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        centerMode: true,
        centerPadding: '80px',
    });

    $('.brand_list_slider').on('init', function(event, slick) {
        setTimeout(function() { limitDots($('.brand_list_slider'), maxDots, slick); }, 100);
    });

    $('.brand_list_slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
        limitDots($('.brand_list_slider'), maxDots, slick, nextSlide);
    });

    function limitDots(slider, maxDots, slick, currentIndex = 0) {
        var dots = slider.find('.slick-dots li');
        var totalDots = dots.length;

        if (totalDots > maxDots) {
            dots.hide(); // Hide all dots

            var start = Math.max(0, Math.min(totalDots - maxDots, currentIndex - Math.floor(maxDots / 2)));
            var end = start + maxDots;

            dots.slice(start, end).show(); // Show only a limited set of dots
        }
    }
});

Step 4: Custom CSS for Dot Navigation

 
.slick-dots {
    display: flex !important;
    justify-content: center;
    overflow: hidden;
}
.slick-dots li {
    display: none; /* Hide all dots initially */
}
.slick-dots li button {
    font-size: 14px;
}

How It Works

  • Slick Slider Initialization – We initialize the slider with navigation dots enabled.
  • limitDots()** Function** – It hides all dots initially and then displays only 6 at a time.
  • Event Handling – The function runs on init and beforeChange to update the dots dynamically as the slides change.

Conclusion

By implementing this approach, you can enhance the usability and appearance of Slick Slider’s navigation. This method is especially useful for sliders with many slides, keeping the navigation clean and intuitive.

Try it out in your next project and let us know your thoughts in the comments!