Submit form data in Liquid (CraftCMS)


#1

Hello,

I have my code in liquid, and I need to add hs_context variables, but no idea to do it in Liquid

This the code:

{% set portalId = craft.request.getPost('portalId') %}
{% set formGUID = craft.request.getPost('formGUID') %}
{% set data = craft.request.getPost('data') %}
{% set params = data|merge({
headers: [{ 'Content-Type': 'application/x-www-form-urlencoded' }]
}) %}
{% set response = craft.httpReq.post("https://forms.hubspot.com/uploads/form/v2/#{portalId}/#{formGUID}", params) %}

How to add hs_context variables ?

FYI, the ajax below:

const onSubmit = (e) => {
e.preventDefault();
if(hasErrors) return;
const portalId = form.getAttribute('data-portal-id');
const formGUID = form.getAttribute('data-guid');
let csrfToken;
const data = $(form).serializeArray().reduce((result, { name, value }) => {
if(name !== 'CRAFT_CSRF_TOKEN')
result[name] = value;
else
csrfToken = value;

        return result;
    }, {});
    
    submitBtn.disabled = true;
    $.ajax({
        method: 'POST',
        url: `/hubspot-submit`,
        data: {
            CRAFT_CSRF_TOKEN: csrfToken,
            portalId,
            formGUID,
            data,
        }
    })
        .done(({ statusCode, body }) => {
            submitBtn.disabled = false;
            switch(statusCode) {
                case 200:
                case 204:
                case 302:
                    onSuccess();
                    break;
                default:
                    onError(body);
            }
        });
};

Please let me know
olivier


#2

Hi @Olivier_Volatier,

I'm not familiar with Liquid, but the hs_context is just another form field. The value must be a JSON string with the information you're looking to submit, but otherwise you should treat it the same way you would any other form field. Check out some of the examples on the following developer doc:


#3

Hey Derek,

Do you mean if I include the hs_content, hutk, ipaddress, pageUrl and pagename as hidden field in html, it should work ?

I am concern because in the example, all data are json inside hs_content

see example:
'hs_context': JSON.stringify({
"hutk": req.cookies.hubspotutk,
"ipAddress": req.headers['x-forwarded-for'] || req.connection.remoteAddress,
"pageUrl": "http://www.example.com/form-page",
"pageName": "Example Title"
})


#4

Hi @Olivier_Volatier,

That's not what I meant; you shouldn't include those values individually as hidden fields. What I mean is that hs_context is a field, and the JSON object with hutk, ipAddress, etc. is the value. This is POST-ed to the form submission endpoint in the same way other properties are. Check out the following example written in Node:

var postData = querystring.stringify({
    'email': req.body.email,
    'firstname': req.body.firstname,
    'lastname': req.body.lastname,
    'hs_context': JSON.stringify({
        "hutk": req.cookies.hubspotutk,
        "ipAddress": req.headers['x-forwarded-for'] || req.connection.remoteAddress,
        "pageUrl": "http://www.example.com/form-page",
        "pageName": "Example Title"
    })
});

The hs_context object is a JSON string, but it's included in the form submission in the same way the other fields are. Does that help clarify things?