Translate Hubspot Form Using Javascript

Develop, Build & Integrate CMS Development
1

Hi, I’m trying to translate the HubSpot form without duplicating using javascript I successfully was able the translate the names and the fields of the form but I have an issue with text like:

‘Please complete this required field.’ if it is empty.

'Email must be formatted correctly." if you put the wrong email address

The ‘Submit’ Button is not translated as well

and the last issue is that I want to add the red star that front of the names of the fields to show that field is requirement.

I have an issue with the last 4 code, I try different method but is still the same issue.

this is the link test: https://dev.codingdojo.africa/fr/hubspot-form-test/

this is the code that I use, please help me:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
 document.addEventListener("DOMContentLoaded", function() {
 hbspt.forms.create({
 portalId: "XXXXXXXX",
 formId: "XXXXXXXXXX",
 target: "#hubspot-form-container",
 onFormReady: function($form) {
 // Manually translate form elements to French
 $form.find(".hs_firstname label").text("Prénom");
 $form.find(".hs_firstname input").attr("placeholder", "Prénom");
 $form.find(".hs_lastname label").text("Nom");
 $form.find(".hs_lastname input").attr("placeholder", "Nom");
 $form.find(".hs_email label").text("Adresse Email");
 $form.find(".hs_email input").attr("placeholder", "Adresse Email");
 $form.find(".hs_phone label").text("Numéro de Téléphone");
 $form.find(".hs_phone input").attr("placeholder", "Numéro de Téléphone");

 // Add requirement indicator to the label of required fields
 $form.find(".hs-form-field.hs-form-required label").append('<span class="hs-form-field-required">*</span>');

 // Translate the submit button text
 $form.find("button[type='submit']").text("Envoyer");

 // Translate the email validation error message
 $form.find(".hs_email .hs-error-msgs li label:contains('Email must be formatted correctly.')").text("L'adresse email doit être correctement formatée.");

 // Translate the required field error message
 $form.find(".hs-error-msgs li label:contains('Please complete this required field.')").text("Veuillez remplir ce champ obligatoire.");
 }
 });
 });
</script>

<div id="hubspot-form-container"></div>

Thank you

Rabii Mechergui

2

Hi @RMechergui

There are several different languages available in the forms, you can customise the embed code.

Also, you can add your own labels if you want to override them.

This should be easier, faster and more flexible than coding your own solution.

Have fun

Mike