More advanced options are available if you need more fine-grained control over your form and how it is initialized.
The easiest way to load the form is to use an async script tag to load the script from https://forms.markethype.io/client/script.v2.js and then utilize the onload event to
render the form as soon as the file has loaded - just like the default script tag does:
<script async src="<https://forms.markethype.io/client/script.v2.js>" onload="mhForm.create({formId:'[YOUR-FORM-ID]',target:this})"></script>
If you have a single-page application, or want more fine grain control over when the script is loaded and when the form is rendered, you could load the script as part of your <head> tag,
and create the form at a later stage.
When the MarketHype form client is loaded, the global window object will be extended with a mhForm namespace. The mhForm namespace expose a single create method to call to embed
a form at your site.
<div id="my-form-container"></div>
<script>
const target = document.getElementById('my-form-container')
mhForm.create({ formId: '[YOUR-FORM-ID]', target })
</script>
By default, the form markup and necessary styling elements will be added after the target element. This is because the default script tag will inject the form markup right after the embedded script tag. If you want a different behavior, the insert option lets you control if the form should be added before or after the target element, or if you want to append or prepend the form within the target element.
| Option | Type | Options | Required | Default | Description |
|---|---|---|---|---|---|
| formId | string |
- | true | - | The ID of the form you want to embed. |
| target | HTMLElement |
- | true | - | HTML element to reference when inserting the form |
| insert | string |
before after append prepend |
false | after | Where to inject the form in relation to the target element |
There are multiple ways to provide styling for your form. When the form is embedded within your DOM, it will automatically be subject to styling already loaded on your page.
It is also possible to define form specific styling in the MarketHype app, which will be injected along side the form when the form is embedded. Styling can either be inlined in the form editor, or provided as an external CSS file. More on providing styling through the form editor is available here.
To make styling easy, all generated form elements provide BEM-like classes you can use in your style sheets. All classes are prefixed with the mhForm namespace, and an input
field for the email input would get the following two classes mhForm__input mhForm__input--email.
<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" />
Stick to classes for styling To make sure your styling does not break, you should base your styling solely on the classes provided by the form. Element id, data attributes and other element properties should be considered internal and could change without prior warning.
</aside>
If you have multiple forms on the same page and want individual styling for the forms you should wrap each form in a container element and give the container an id or class that you can use to namespace your form.
As an example, you could wrap your footer form in an extra element and provide an id for the wrapper.