Online Customer Forms

The online customer form is used to create leads to NetSuite. The form can be put in different ways such as proving the form external URL for using as webpage, as an iframe to use it as section in webpage. The below steps are done to use the online customer form as an iframe

1. Go to setup> Marketing> Online customer form> New
2. If you want to use NetSuite’s default UI for the form, you may select Default form template otherwise use custom form template
3. Add required fields in the select field section
4. Setup workflow if required in the workflow tab
5. Now, Hover near the template field and you will see a “+” icon, click on it to create a new HTML template
6. The HTML template must have the following for its proper working:
   <nlform> <EVERYTHING SHOULD BE INSIDE THIS TAG> </nlform>
7. Add the field tags to you template, for example: if you add firstname in the select field step, add <nlfirstname></nlfirstname> in the nlform tag. For other fields repeat the same, you may note that for creating field we use the same field id with nl prefix
8. Once all fields are added create a submit button <input type=”submit”>Submit</input>
9. Save and add a redirect link which is mandatory in the setup workflow tab

Now, that you have created the online form we’ll look how to create iframe using it.

What is iframe? An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page.

By default, iframe would have scroll and border which would affect user experience in the website thus we’ll create an iframe in a way that it doesnt have any scroll or border

<iframe class="<YOUR CLASS NAME>" src="<YOUR FORM EXTERNAL URL>" frameborder="0" scrolling="no"></iframe>

Now, we have check the height of our form in different devices and set the height of the form using media queries like show below:

<style> .NSiframe { width: 100%; min-height: 2450px; }
@media only screen and (max-height: 1366px) { .NSiframe { min-height: 3395px; } }
@media only screen and (max-height: 1024px) { .NSiframe { min-height: 3445px; } }
@media only screen and (max-height: 812px) { .NSiframe { min-height: 3430px; } }
@media only screen and (max-height: 640px) { .NSiframe { min-height: 3465px; } }
@media only screen and (max-height: 568px) { .NSiframe { min-height: 3505px; } }
@media screen and (min-width: 1200px) { .NSiframe { min-height: 2460px; } } </style>