Align HubSpot form horizontally

Question

I would like the HubSpot form to align horizontally like below. I have used the embed code feature in hubspot which basically links to there JavaScript.

I tried fiddling around with these paramaters http://designers.hubspot.com/docs/cos/hubspot-form-markup but am not having any luck.

Answer 1

Start with this link to learn the ins and outs of customizing the HubSpot Form Embed code: http://developers.hubspot.com/docs/methods/forms/advanced_form_options

Your unstyled form JS will look something like this:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> 
<script> 
    hbspt.forms.create({
        portalId: 'XXXXXXX',
        formId:   'XYZXYZXYZXYZ',
        css: '' // <-- Intentionally empty string! 
    });
</script>

Providing an empty string for css will prevent the snippet from loading the default hs-form stylesheet.

Congrats! You can now override the unstyled content with your own CSS stylesheet. In your own sheet, define the classes that you need mentioned here in the Designer docs: http://designers.hubspot.com/docs/cos/hubspot-form-markup#styling-forms

If we're missing the mark and you need help with defining your own CSS classes, let me know.

Answer 2

Making assumptions on the element names since I can't see your code. But this will do the trick.

label,
button {
  display: inline-block;
}
input {
  display: inline-block;
  width: 30%;
}

Answer 3

This can be done by adding CSS to the particular Field and button "display:inline-block;" or "float:left;" will work by providing width to the labels