在NetSuite中创建响应式表单

时间:2016-10-07 22:50:17

标签: forms netsuite

NetSuite中的自定义表单需要使用NLFORM和NLCATEGORY等字段标记。但是我不清楚如何将这些标记正确地合并到响应形式的模板中,以便它可以工作。

这是我到目前为止所拥有的:

<!DOCTYPE html>

<html lang="en">
<head>
<Title>General Contact Form</Title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
h1, p {
  font-family: 'Lato', sans-serif;
  }
</style>
</head>

<Body>
<div class="container">
<h1>
<center>Submit a Message</center>
</h1>
 <form class="form-horizontal">
<NLFORM>
<br>
<fieldset>
<legend>How Can We Help You?</legend>
<div class="form-group">
<p class="control-label col-sm-2">Type of Inquiry*</p>
<div class="col-sm-10">
<NLCATEGORY>
</div>
</div>
<div class="form-group">
<p class="control-label col-sm-2">Subject*</p>
<div class="col-sm-10"><NLTITLE> </div></div>
<div class="form-group">
<p class="control-label col-sm-2">Message*</label>
<div class="col-sm-10"><NLINCOMINGMESSAGE> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLFILE">File Upload</label>
<div class="col-sm-10"><NLFILE> </div></div>
</fieldset>

<fieldset>
<legend>Contact Information</legend>
<div class="form-group">
<label class="control-label col-sm-2" for="first-name">First Name*</label>
<div class="col-sm-10">
<NLFIRSTNAME></div></div>
<div class="form-group">
<label class="control-label col-sm-2" for ="NLLASTNAME">Last Name*</label>
<div class="col-sm-10"><NLLASTNAME></div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLEMAIL">E-mail*</label>
<div class="col-sm-10"><NLEMAIL> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLPHONE">Phone</label>
<div class="col-sm-10"><NLPHONE> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLCOUNTRY">Country</label>
<div class="col-sm-10"><NLCOUNTRY> </div></div>
</fieldset>


<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Submit"> - or - 
<input type="button" value="Reset" onclick="page_reset(); return false;"></div></div>
<NLSUBSIDIARY>
<br>
<p align=center>Fields marked with an<img src="http://shopping.na2.netsuite.com/core/media/media.nl?id=35211&c=4382721&h=2eef11083f182592e0bb">are required.</p>

</form>


</Body>

</HTML>

表单字段确实响应调整浏览器窗口的大小,但NetSuite无法使用此特定表单正确创建记录。任何人都可以看到我在这里做错了什么!?

这里是表单网址:http://www.boxcomponents.com/support-form

NetSuite字段标签由UI内部控制;所以字段宽度是固定的,不接受百分比;还有下拉菜单,它们有一个固定的宽度,这有点令人讨厌。我似乎无法在不删除所有NetSuite标签的情况下正确回复表单。

1 个答案:

答案 0 :(得分:2)

您需要做的是在打开时使用脚本处理表单。在</form>标记之后添加脚本标记,以添加和删除表单元素中的类。

这也是多余的,你最终会遇到某种破碎的形式:

<form class="form-horizontal">
<NLFORM>

所以例如你只有:

<NLFORM>
   ...
</form>
<script>
jQuery(function($){
    $("#main_form").addClass('form-horizontal');
});
</script>