56311

creating a responsive form within NetSuite

Question:

custom forms within NetSuite require the use of field tags like NLFORM and NLCATEGORY, etc. However it's unclear to me how to incorporate these tags properly into the template of a responsive form so it works.

Here's what I have so far:

<!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">

<center>Submit a Message</center>

<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*

<div class="col-sm-10"> <NLCATEGORY> </div> </div> <div class="form-group"> <p class="control-label col-sm-2">Subject*

<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.

</form> </Body> </HTML>

the form fields do respond to resizing the browser window, but NetSuite is not able to properly create a record using this particular form. can anyone see what I'm doing wrong here!?

here's the form URL: <a href="http://www.boxcomponents.com/support-form" rel="nofollow">http://www.boxcomponents.com/support-form</a>

NetSuite Field Tags are controlled from within the UI; so field width is fixed and doesn't accept percentages; there are also drop-down menus which have a fixed width, which is mildly annoying. I can't seem to get the form to respond properly without removing all of NetSuite's tags.

Answer1:

What you'll need to do is process the form with script when it opens. Add a script tag after the </form> tag to add and remove classes from the form elements.

Also this is redundant and you'll end up with some sort of broken form:

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

So for instance you'd just have:

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

Recommend

  • Bootstrap 4 Mobile Navbar Disappearing
  • Google Fonts in Ionic 2
  • Google Chart: How to draw the vertical line for bar graph
  • Why does Wget have Host Header in its HTTP request?
  • Extract text from “” HTML tag
  • Docker container for google cloudML on compute engine - authenticating for mounting bucket
  • Font Awesome in Viewpager Previous Next
  • Eclipse dark color theme fixes
  • Is it possible to “shrink” a PdfPtable?
  • How to use arithmetic operators with SAS macro variables [duplicate]
  • Netlink sockets and libnl - nl_recvmsgs_default returning -16 (EBUSY)
  • jinja2 template not found and internal server error
  • How can I make this modal persistent?
  • Floated image with variable width and heading with background image
  • Uncaught TypeError: $(…).select2 is not a function
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Jetty Server not starting: Unable to establish loopback connection
  • Xamarin Forms - UWP Fonts
  • req.body is undefined - nodejs
  • Modifying destination and filename of gulp-svg-sprite
  • MySQL WHERE-condition in procedure ignored
  • Change an a tag attribute in JavaScript based on screen width
  • Importing jscolor library in angular 2
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • Web-crawler for facebook in python
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Unanticipated behavior
  • How to format a variable of double type
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • How to disable jQuery.jplayer autoplay?
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Binding checkboxes to object values in AngularJs
  • java string with new operator and a literal