LocalSignal Forms

LocalSignal Forms allow users to select which form will be used on a page within the page's content editor.

LS Forms are managed on a per website capsule basis. The forms are managed by selecting the Forms option on the menu. Once you create a new form it can be used multiple times throughout that website.

To get started, create a LocalSignal form inside of the website capsule. Use the Code editor provided to create the form. Add a relative or direct URL path under the redirect after form submission text field. Once your form is saved, all of your input fields should be displayed in the Found Fields box.

After your LocalSignal form is created you can display it using a CMS-Type.

LocalSignal Forms

Code Example for Form

LocalSignal forms are managed within the Forms section of the Website.

LocalSignal Forms

Code	Notes
form-activity-label	Allows the LocalSignal App to use the information as a header on an activity card.

LocalSignal Forms Example


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<form role="form" id="contact-form">
 <div class="row">
  <div class="col-xs-12 ">
   <div class="row">
    <div class="col-xs-6">
     <div class="form-group">
      <input type="text" class="form-control" placeholder="First Name" name="name" aria-required="true" form-activity-label required="required"> 
     </div>
    </div>
    <div class="col-xs-6">
     <div class="form-group">
      <input type="text" class="form-control" placeholder="Last Name" name="lastname" aria-required="true" form-activity-label required="required"> 
     </div>
    </div>
   </div>
   <div class="form-group">
    <input type="phone" class="form-control" placeholder="Phone" data-mask="(999) 999-9999" name="phone" required="required"> 
   </div>
   <div class="form-group">
    <input type="email" class="form-control" placeholder="Email" name="email" aria-required="true" email required="required"> 
   </div>
   <div class="form-group">
    <textarea class="form-control" rows="5" cols="50" placeholder="How Can We Help You?" name="message"  aria-required="true" required="required"></textarea>
   </div>
   <button type="submit" class="btn btn-success btn-block">Send Message</button>
  </div>
 </div>
</form>

Inserting a LocalSignal Form using CMS-Type

cms-type="form"

LocalSignal CMS Type form allows developers to select which form is used within the page editor. Once the cms-type="form" is implemented in a panel, LocalSignal generates a dropdown that is shown on the page content editor. Select the form you wish to use and save to view the form.

Inserting a Form with CMS-Type

Code	Notes
cms-type="form"	Allows users to select from a list of LocalSignal Forms in the content editor.
cms-global	Used to make a cms item global across every instance of the panel

Inserting a Form with CMS-Type


1
2
3
4
5

<div class="p-contact-us">
 <div class="container">
  <div cms-type="form" cms-id="form" cms-name="LocalSignal Form" cms-global></div>
 </div>
</div>

Validation

Form Validation

In LocalSignal developers must add their own Validation for forms. This can be easily done by adding a jQuery Validation script to the Assets manager. Then adding a Validate function to the panel that the form is called in.

Form Validation

Code	Notes
$("form").validate()	Uses Developers preferred Validation process on the LocalSignal forms.