如何将选择器选中的国家信息填充至HubSpot表单？

Got it, let's walk through how to seamlessly pass the user's selected country to your HubSpot form while replacing the original "Contact Sales" step. Here's a practical, code-based approach tailored to your existing form structure:

Step 1: Capture the Selected Country Value #

First, we need to listen for when the user picks a country from any of your region-specific dropdowns (like country-north-america). We'll store this value so we can use it later to prefill the HubSpot form.

Add this JavaScript to your page:

// Listen for changes on all country dropdowns
document.addEventListener('change', function(e) {
  // Target only the country select elements
  const isCountrySelect = e.target.classList.contains('form-control') && e.target.name.startsWith('country-');
  if (isCountrySelect) {
    const selectedCountry = e.target.value;
    // Store the value in localStorage (persists across page refreshes)
    localStorage.setItem('userSelectedCountry', selectedCountry);
    
    // Optional: Auto-load HubSpot form immediately after selection (skip the button)
    // loadPrefilledHubSpotForm(selectedCountry);
  }
});

Step 2: Load HubSpot Form with Prefilled Country #

Next, we'll create a function that loads your HubSpot form and injects the selected country value into the corresponding field. Make sure you replace YOUR_PORTAL_ID and YOUR_FORM_ID with your actual HubSpot credentials, and match the field name (e.g., country) to the internal name of your country field in HubSpot.

function loadPrefilledHubSpotForm(selectedCountry) {
  // Clean up any existing HubSpot form to avoid duplicates
  const existingFormContainer = document.getElementById('hubspot-form-container');
  if (existingFormContainer) existingFormContainer.remove();

  // Create a container for the new form
  const formContainer = document.createElement('div');
  formContainer.id = 'hubspot-form-container';
  // Insert the form after the original country selection section
  document.querySelector('.form-group.country').after(formContainer);

  // Initialize HubSpot form with prefilled country
  hbspt.forms.create({
    portalId: 'YOUR_PORTAL_ID',
    formId: 'YOUR_FORM_ID',
    target: '#hubspot-form-container',
    // Prepopulate the country field - adjust the key to match your HubSpot field's internal name
    fields: {
      country: selectedCountry
    },
    onFormReady: function() {
      // Hide the original country selection section once HubSpot form loads
      document.querySelector('.form-group.country').classList.add('hidden');
    }
  });
}

Step 3: Trigger the Form (Replace "Contact Sales" Button) #

If you want to keep a button to trigger the HubSpot form (instead of auto-loading it), add a click handler to your "Contact Sales" button:

// Replace #contact-sales-btn with your actual button ID
document.querySelector('#contact-sales-btn').addEventListener('click', function() {
  const selectedCountry = localStorage.getItem('userSelectedCountry');
  if (selectedCountry) {
    loadPrefilledHubSpotForm(selectedCountry);
  } else {
    // Prompt user to select a country first if they skipped it
    alert('Please select a country before proceeding.');
  }
});

Key Notes to Remember #

• HubSpot Field Name: Double-check the internal name of your country field in HubSpot (you can find this in the form editor under "Field Settings"). If it's something like country_code, update the fields object in the code accordingly.
• Dynamic Region Dropdowns: Since your country dropdowns are hidden by region (e.g., country-north-america is hidden until the user selects North America), the change listener will still work because we're targeting all elements starting with country- in their name.
• LocalStorage vs. Global Variable: We used localStorage here to persist the selected country if the user refreshes the page. If your flow is entirely single-page, you could use a global variable instead for slightly faster access.

内容的提问来源于stack exchange，提问作者Jake