MarketHype for Developers

Advanced form setup

If you need more fine grained control over your form and how it is initialized, there are more advanced options available to you.

Loading the script

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 utilze 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.

Creating a form

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.

Form options

OptionTypeOptionsRequiredDefaultDescription
formIdstring-true-The ID of the form you want to embed.
targetHTMLElement-true-HTML element to reference when inserting the form
insertstringbefore
after
append
prepend		falseafterWhere to inject the form in relation to the target element

Styling a form

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 hereopen in new window.

Styling by class

To make styling easy, all generated form elements provide BEMopen in new window-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.

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.

Form specific styling

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.

<div id="footer-form">
  <script async
    src="https://forms.markethype.io/client/script.v2.js"
    onload="mhForm.create({formId:'[YOUR-FORM-ID]',target:this})"
  ></script>
<div>

Then you can easily scope your styling using your wrapper id:

/* Applies to all forms */
.mhForm__input {
  border-radius: 3px;
}

/* Only applies to the footer form */
#footer-form .mhForm__input {
  color: #BADA55;
}

Do not rely on internal IDs

You might be tempted to rely on the IDs provided by the form to scope your styling to a specific form - don't do it!

To support multiple instances of the same form on a single page, each form will generate unique IDs - these ids change every time a form is initiated and cannot be used for styling.

Last Updated: