This guide is designed to provide developer resources for Embedded Numero Forms. At a high level, embedding works simply by pasting in the code snippet from our form editors. The snippet contains a script tag that securely fetches Numero Form data and renders it at the div tag anywhere on your website. After that, the embedded page includes its own styles (which can be customized, see Customizing CSS Styles below) and manages form state and submissions, error messages, etc.
No - at the end of the day, our embeds are HTML, CSS, and JavaScript functions that live on your webpage. We deliberately did not use iFrames so that you can more easily customize the look and feel of all the form elements to fit your page.
They shouldn’t! We have attempted to scope all of our CSS to a limited set of class names and exposed a public class names API below for easy customization. None of our styles include unscoped element references (i.e. no global p tag styling).
Yes, you can have multiple embeds per page, but they should probably refer to different Numero Pages to avoid unexpected behavior.
A few things!
While Numero Forms have some opinionated default styles, for embeds almost everything is designed to be customizable. In particular, almost all elements are given a Numero- class that can be used to easily select and override styles for.
Here is a structural overview of some of the most commonly customized class names. Note that some elements have multiple class names, for instance the NumeroInput , which will be on every <input> element and NumeroTextInput which will be only on input[type=text] inputs.