Add Multiselect Options

The following form is based on the Basic Contact Form - V.1 example, note that the code used does not use a chunk for the form.

If you prefer to use a chunk for the form, make sure you remember to add the "&parseDocumentSource" parameter to the Formlister call, as can be seen here.

Rendered form

Snippet call

[!FormLister?
&formid=`ContactForm`
&to=`name@domain.com`
&config=`default:core`
&isHtml=`0`
&protectSubmit=`1`
&rules=`{
"name":{
    "required":"Please enter your full name"
},
"email":{
    "required":"Please enter your email",
    "email":"Please enter a valid email"
},
"phone":{
    "required":"Please enter your phone number",
    "phone":"Please enter a valid phone number",
    "minLength":{
        "params":5,
        "message":"Please enter a valid phone number"
    }
},
"subject":{
    "required":"Please enter your subject"
},
"message":{
    "required":"Please enter your message",
    "minLength":{
        "params":100,
        "message":"Your message must have at least 100 characters"
    }
},
"multiselect":{
    "required":"Please choose from the options",
    "minCount":{
		"params":1,
		"message":"At least 1 option is required"
	}
}
}`
&formControls=`multiselect`
&arraySplitter=`<br>`
&messagesTpl=`@CODE:<div><ul>[+required+][+errors+][+messages+]</ul></div>`
&messagesOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesRequiredOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesErrorOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesSplitter=`</li><li>`
&messagesRequiredSplitter=`</li><li>`
&messagesErrorSplitter=`</li><li>`
&errorClass=`error`
&requiredClass=`required`
&formTpl=`@CODE:
[+form.messages+]
<form action="[~[*id*]~]" method="post">
  <input type="hidden" name="formid" value="ContactForm">
  <!-- Name -->
  <div class="[+name.errorClass+][+name.requiredClass+]">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Name" value="[+name.value+]">
  </div>
  <!-- Email -->
  <div class="[+email.errorClass+][+email.requiredClass+]">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="Email" value="[+email.value+]">
  </div>
  <!-- Phone Number -->
  <div class="[+phone.errorClass+][+phone.requiredClass+]">
    <label for="phone">Phone</label>
    <input type="tel" name="phone" id="phone" placeholder="Only Enter Digits" value="[+phone.value+]">
  </div>
  <!-- Subject -->
  <div class="[+subject.errorClass+][+subject.requiredClass+]">
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" placeholder="Subject" value="[+subject.value+]">
  </div>
  <!-- Message -->
  <div class="[+message.errorClass+][+message.requiredClass+]">
    <label for="message">Message</label>
    <textarea rows="10" name="message" id="message" placeholder="Type your message here">[+message.value+]</textarea>
  </div>
  <!-- Multiple Select Options -->
  <div class="[+multiselect.errorClass+][+multiselect.requiredClass+]">
    <label for="multiselect">Multiple Options</label>
    <select name="multiselect[]" id="multiselect" multiple="multiple">
      <option value="1" [+s.multiselect.1+]>Test 1</option>
      <option value="2" [+s.multiselect.2+]>Test 2</option>
      <option value="3" [+s.multiselect.3+]>Test 3</option>
      <option value="4" [+s.multiselect.4+]>Test 4</option>
      <option value="5" [+s.multiselect.5+]>Test 5</option>
    </select>
  </div>
  <!-- Submit Button -->
  <button type="submit">Submit</button>
</form>`
&successTpl=`@CODE:<div>Thank you, we will get back to you ASAP.</div>`
&reportTpl=`ContactFormReport`
!]

Additional Elements

The following code shows you what has been added to the Formlister call to make the multiselect field work, it is broken down into its specific elements:

Code added to the Formlister call

&rules=`{
BLAH…
"multiselect":{
    "required":"Please choose from the options",
    "minCount":{
		"params":1,
		"message":"At least 1 option is required"
	}
}
}`
&formControls=`multiselect`
&arraySplitter=`<br>`

For more information about the parameters used in this example please read the documentation on form controls and templates.

If you take a closer look at the documentation you will see that the "arraySplitter" parameter can be made to only affect a specific field, by adding the elements name to the parameter, e.g:

NAME.arraySplitter=`<br>`

So if you have multiple elements that have multiple options, you can add a bespoke separator to each of them. Our example would look like this:

multiselect.arraySplitter=`<br>`

The separator is simply there to help you distinguish between the options when they are viewed in the form report that is sent to you when the form is filled out.

Code added to the Form

<!-- Multiple Select Options -->
<div class="[+multiselect.errorClass+][+multiselect.requiredClass+]">
  <label for="multiselect">Multiple Options</label>
  <select name="multiselect[]" id="multiselect" multiple="multiple">
    <option value="1" [+s.multiselect.1+]>Test 1</option>
    <option value="2" [+s.multiselect.2+]>Test 2</option>
    <option value="3" [+s.multiselect.3+]>Test 3</option>
    <option value="4" [+s.multiselect.4+]>Test 4</option>
    <option value="5" [+s.multiselect.5+]>Test 5</option>
  </select>
</div>

For more information about the "option" parameter used in this example and how to use it, please read the documentation found here (Setting select or radio-button).

Remember:

You can change the name of the field used in the example, yours doesn't have to be called "multiselect".

Rendered HTML source code

Time to test the form, simply preview the page in the browser and review your HTML source code, you should get something like the following.

Please note that the "action" will be different in your install.

<form action="contact-5.html" method="post">
  <input type="hidden" name="formid" value="ContactForm">
  <!-- Name -->
  <div class="">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Name" value="">
  </div>
  <!-- Email -->
  <div class="">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="Email" value="">
  </div>
  <!-- Phone Number -->
  <div class="">
    <label for="phone">Phone</label>
    <input type="tel" name="phone" id="phone" placeholder="Only Enter Digits" value="">
  </div>
  <!-- Subject -->
  <div class="">
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" placeholder="Subject" value="">
  </div>
  <!-- Message -->
  <div class="">
    <label for="message">Message</label>
    <textarea rows="10" name="message" id="message" placeholder="Type your message here"></textarea>
  </div>
  <!-- Multiple Select Options -->
  <div class="">
    <label for="multiselect">Multiple Options</label>
    <select name="multiselect[]" id="multiselect" multiple="multiple">
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
      <option value="3">Test 3</option>
      <option value="4">Test 4</option>
      <option value="5">Test 5</option>
    </select>
  </div>
  <!-- Submit Button -->
  <button type="submit">Submit</button>
</form>

Suggest an edit to this page.