The package supports integration with form service Hubspot. All you need is either provide hubspotPortalId
(your Hubspot id) and hubspotFormId
for your Hubspot form, or submit callback function to the Form
component.
yarn add @halo-lab/vue-form-hubspot
or
npm install @halo-lab/vue-form-hubspot
-
create an account on Hubspot`
-
add tracking code into your
index.html
(you may use this link with instructions) -
create a form in your Hubspot account. Important: please, make sure that the types of your form can be
text
,email
,phone
, ornumber
- all types, that can be converted intostring
. -
import all components
import {
Form,
Label,
Input,
TextArea,
Button
} from '@halo-lab/vue-form-hubspot'
- import styles
<style>
@import "@halo-lab/vue-form-hubspot/styles";
</style>
-
:hubspotPortalId
(required parameter, string) - the id of your portal on Hubspot service. IfsubmitHandler
is provided, the parameter becomes optional:hubspotFormId
(required parameter, string) - the id of your form on Hubspot service. IfsubmitHandler
is provided, the parameter becomes optionalsubmitHandler
(optional parameter, function) - your custom submit handler (will be responsible for submitting the form on your platform and should receive values of the form). If not provided,:formId
is requiredclassName
(optional parameter, string) - class name for custom styling
-
-
placeholder
(required parameter, string) - the placeholder in an input fieldtype
(required parameter, string) - the type of an input, may betext
,email
ornumber
name
(required parameter, string) - the name of an input fieldlabel
(required parameter , string) - the label of an input fieldvalidator
(optional parameter) - the array of objects in form of[name: <validatorKey>, message<optional>: <validatorMessage>, parameter<required for max, min, maxLength, minLength, regexp>: <validatorValue>
. Validator's names may be:required
,email
,number
,maxLength
(must be provided the<validatorValue>
),minLength
(must be provided the<validatorValue>
),max
(must be provided the<validatorValue>
),min
(must be provided the<validatorValue>
),regexp
(must be provided the<validatorValue>
),func
(must be provided the<validatorValue>
) - the validation function, which returns a truthy value if an error is detected, and a message for an error. For example:[{name: "required"}, {name: "email", message: "Please, enter a valid email"}, {name: "max", message: "should be a number!", value: 6}, {name: regexp, value: /^[0-9]*$/}]
.
defaultValue
(optional parameter, string) - the default value of an inputfieldClassName
(optional parameter, string) - the class name for custom input container stylinglabelClassName
(optional parameter, string) - the class name for custom label stylinginputClassName
(optional parameter, string) - the class name for custom input stylingerrorClassName
(optional parameter, string) - the class name for custom error state stylingisDisabled
(optional parameter, boolean) - the flag to make an input field disabled
-
name
(required parameter, string) - the name of an input fieldlabel
(required parameter , string) - the label of an input fieldoptions
(required parameter) - the array of objects in form of{label: <display value>, value: <option value>}
validator
(optional parameter) - the array of objects in the form of{name: <validatorKey>, message<optional>: <validatorMessage>, parameter<required for max, min, maxLength, minLength, regexp>: <validatorValue>}
. The validator's name may be:required
, For example:[{name: "required", message: "Please, select a city"}
.
search
(optional parameter, boolean) - the flag if using searchable selectdefaultValue
(optional parameter, string) - the default value of the inputfieldClassName
(optional parameter, string) - the class name for custom input container stylinglabelClassName
(optional parameter, string) - the class name for custom label stylinginputClassName
(optional parameter, string) - the class name for custom input stylingerrorClassName
(optional parameter, string) - the class name for custom error state stylingisDisabled
(optional parameter, boolean) - the flag to make an input field disabled
-
name
(required parameter, string) - the name of an input fieldlabel
(required parameter , string) - the label of an input fieldfields
(required parameter) - the array of objects in form of{value: <input value>, label: <input label>, <checked>: <boolean flag if the input should be checked default>}
fieldClassName
(optional parameter, string) - the class name for custom input container stylinglabelClassName
(optional parameter, string) - the class name for custom label stylinginputClassName
(optional parameter, string) - the class name for custom input stylinginputLabelClassName
(optional parameter, string) - the class name for custom label stylingisDisabled
(optional parameter, boolean) - the flag to make an input field disabled
-
name
(required parameter, string) - the name of an input fieldlabel
(required parameter , string) - the label of an input fieldfields
(required parameter) - the array of objects in form of{value: <input value>, label: <input label>}
fieldClassName
(optional parameter, string) - the class name for custom input container stylinglabelClassName
(optional parameter, string) - the class name for custom label stylinginputClassName
(optional parameter, string) - the class name for custom input stylinginputLabelClassName
(optional parameter, string) - the class name for custom label stylingisDisabled
(optional parameter, boolean) - the flag to make an input field disabled
-
label
(required parameter, string) - the text for the button's labeltype
(optional parameter, string) - the type of the buttonclassName
(optional parameter, string) - the class name for custom button styling
Important: be sure, that the form structure on your page completely matches the Hubspot form structure (e.g. inputs names and types).
-
<Form :hubspotFormId="hubspotFormId" :hubspotPortalId="hubspotPortalId">
<Input
fieldClassName="myField"
inputClassName="inputMy"
errorClassName="error"
labelClassName="myLabel"
type="text"
placeholder="Your Name"
name="name"
:validator="[
{ name: 'required' },
{ name: 'letters' }
]"
label="Your Name"
/>
<Input
placeholder="Email Address"
type="email" name="email"
:validator="[{ name: 'required' }, { name: 'email' }]"
label="Email Address"
/>
<TextArea
label="Message"
placeholder="Message"
name="message"
:validator="[{ name: 'required' }]"
/>
<Select
label="Your City"
name="city"
search
:validator="[{ name: 'required' }]"
:options="[
{ label: 'New York', value: 'New York' },
{ label: 'Paris', value: 'Paris' },
{ label: 'Kyiv', value: 'Kyiv' }
]"
/>
<RadioGroup
label="Your Gender"
name="gender"
:fields="[
{value: 'male', label: 'Male'},
{value: 'female', label: 'Female', checked: true}
]"
/>
<CheckBoxGroup
label="Your Favorite food"
name="food"
:fields="[
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'ice-cream', label: 'Ice-cream' },
{ value: 'coffee', label: 'Coffee' }
]"
/>
<Button label="Send form" type="submit" className="button-filledMy" />
</Form>
Have fun โ๏ธ