Litehouse Create Forms
Forms are an essential component for any web page and one of the best ways to capture a potential lead. To create forms using 3rd party systems and then embed them into your Litehouse Create story, please follow the steps outlined below.
1. Setting up a form on a 3rd Party Platform
1) Create a form
To create a new form, you have to log in into your 3rd party form provider account and follow the instructions outlined there.
See below the list of the most common form providers and the links to their documentation:
Marketo Forms
Salesforce Forms
Formspree Forms
Hubspot Forms
SharpSpring Forms
2) Style your form
To design the form and customize it to suit your needs, you will have to follow the steps and use the tools provided by your 3rd party form platform. All the style edits are made solely on the 3rd party form platform. Follow the links below to find out how to style the most common types of forms:
Style Marketo Forms
Style Salesforce Forms
Style Formspree Forms
Style Hubspot Forms
Style SharpSpring Forms
3) Optimize your form
3rd party form platforms generate a single code snippet valid for both Desktop and Mobile view. If you face any styling issues on mobile devices, you have to update the source code to fix them. To make these code updates you should have a basic knowledge of HTML and CSS and understand the principles of responsive web design. There are plenty of resources available if you need to get up to speed first, such as http://bradfrost.github.io/this-is-responsive/resources.html. Below you can find more information provided by 3rd party services:
Optimize Marketo Forms
Optimize Salesforce Forms
Optimize Hubspot Forms
4) Generate an embed code
Once you followed all the steps of setting up the form, you will then have to generate a code snippet that will be used to embed the form into your Fabl story. Below you can find more information provided by 3rd party services:
Marketo Forms Embed Code
Salesforce Forms Embed Code
Formspree Forms Embed Code
Hubspot Forms Embed Code
SharpSpring Forms Embed Code
<script src="//app-sjst.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1057"></form>
<script>
MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057, function(form){
//SaaSquatch code will go here
});
</script>
2. Add a Code Block to your story
Once you have your form set up and you’ve generated a code snippet to embed the form, scroll down in your story to where you want to add this form. Click on the “+” symbol and add a new Code Block component.
3. Embed the form in your Fabl story
Click on “Edit Code Snippet” to open the code editor. Paste the generated code snippet for your form in the field and click on the “UPDATE” button. Save the story and see how it would appear in VIEW MODE.
NOTE: Be sure to check that the form is working correctly on all devices, and if any additional changes are needed, please make them within your 3rd party system.
This is how the form will appear based on our example:
4. Do a final check up
Before you start promoting your story, review the form’s functionality and styling both on desktop and mobile devices. If you need to make further adjustments, head back to your 3rd party tool, make the changes to the form, and generate a new code that contains all your updates. Make sure you replace the initial code with the updated version.
To review your form you can either open your story URL on your physical devices or use the PREVIEW option from to bottom right area of your screen. This allows you to easily switch between mobile, tablet and desktop view
