Style my forms to match my website
Open Leads forms were designed from the beginning to be used on a client website, so that leads can easily be added to the Open Leads database with little or no technical knowledge.
On this page
| Styling Your Forms |
Open Leads forms were designed from the beginning to be used on users websites', so that leads can easily be added to the Open Leads database with little or no technical knowledge.
As you create a new form in Open Leads, each form has three ways of integrating it into a public website -
- Embedding it in an "iframe", the code for which is generated automatically;
- Copying and pasting the HTML for the form within your own website code; or
- Leaving it hosted on your Open Leads account and using HTML headers/and footers - which we call "Styles" and applying your style to your form.
Each option has its advantages and disadvantages - for example an "iframe" cannot be edited, other than for height and width, and limits your ability to redirect upon submission. This means it is easiest to implement, but not so useful if you are using Google Analytics to track conversions, etc.
The second option, copying and pasting HTML is the most flexible, and allows users the most leeway in how the form is deployed and how it looks. This requires some knowledge and skill in coding in HTML and using CSS for design. Simply choose the link for "View Source Code" on the form editor page, and copy the code that is displayed in the popup. Paste this on the page of your website that you want your form to appear on, and implement your existing styling. You can also move fields around as needed, change the width or default field content, labels, etc, all from within the HTML.
Finally, you may keep your form hosted on your Open Leads account. Each new form has a public URL, i.e. http://yourcompany.openleads.com/form/12345, that displays using our default form styling. At the top of your form list there is a link called "Manage Styles" - clicking this opens the Styles Editor, where you can click "Add Style" and add your own custom HTML headers and footers to create a custom design on your hosted form. Once you have entered your HTML and saved the style, simply go back to your Form, and on the right hand side of the screen, click on the "Apply Style" line and choose the style you created for this form from the dropdown menu.
Now your form will have a custom look, and you can the simply point your website navigation to its custom URL to direct your website visitors to it.