Forms

Conversational Forms Fade In

Visual Example

Code Usage

HTML
  1. <div class="__mst_conversational_form" id="conversational-form-1">
  2. 	<form class="__mst_form" action="#" method="POST">									
  3. 		<div class="__mst_form_item">
  4. 			<h4 class="__mst_heading">Hi, my name is</h4>
  5. 			<input type="text" class="__mst_form_input" name="conversational_name" data-character-width="20">
  6. 			<h4 class="__mst_heading">.</h4>
  7. 		</div>
  8.  
  9. 		<div class="__mst_form_item">
  10. 			<h4 class="__mst_heading">I'm</h4>
  11. 			<input type="number" class="__mst_form_input" name="conversational_age" data-character-width="2">
  12. 		</div>
  13.  
  14. 		<div class="__mst_form_item">
  15. 			<h4 class="__mst_heading">years old and </h4>
  16. 			<select class="__mst_form_input" name="converstional_marital_status">
  17. 				<option value="null"></option>
  18. 				<option value="single">single</option>
  19. 				<option value="married">married</option>
  20. 				<option value="divorced">divorced</option>
  21. 				<option value="cohabiting">cohabiting</option>
  22. 			</select>
  23. 			<h4 class="__mst_heading">.</h4>
  24. 		</div>
  25. 		<div class="__mst_form_item">
  26. 			<h4 class="__mst_heading">I have</h4>
  27. 			<input type="number" class="__mst_form_input" name="conversational_kids" data-character-width="2">
  28. 			<h4 class="__mst_heading">.</h4>
  29. 		</div>
  30. 		<div class="__mst_form_item">
  31. 			<h4 class="__mst_heading">kids, and live in</h4>
  32. 			<input type="text" class="__mst_form_input" name="conversational_postcode" data-character-width="5">
  33. 			<h4 class="__mst_heading">.</h4>
  34. 		</div>
  35. 	</form>
  36. </div>
Javascript
  1. $('#conversational-form-1').__mstConversationalForm({
  2. 	autoExpandInput: true // Disabled by default
  3. });

Always Showing

Visual Example

Code Usage

HTML
  1. <div class="__mst_conversational_form" id="conversational-form-2">
  2. 	<form class="__mst_form" action="#" method="POST">									
  3. 		<div class="__mst_form_item">
  4. 			<h4 class="__mst_heading">Hi, my name is</h4>
  5. 			<input type="text" class="__mst_form_input" name="conversational_name" data-character-width="20">
  6. 			<h4 class="__mst_heading">.</h4>
  7. 		</div>
  8.  
  9. 		<div class="__mst_form_item">
  10. 			<h4 class="__mst_heading">I'm</h4>
  11. 			<input type="number" class="__mst_form_input" name="conversational_age" data-character-width="2">
  12. 		</div>
  13.  
  14. 		<div class="__mst_form_item">
  15. 			<h4 class="__mst_heading">years old and </h4>
  16. 			<select class="__mst_form_input" name="converstional_marital_status">
  17. 				<option value="null"></option>
  18. 				<option value="single">single</option>
  19. 				<option value="married">married</option>
  20. 				<option value="divorced">divorced</option>
  21. 				<option value="cohabiting">cohabiting</option>
  22. 			</select>
  23. 			<h4 class="__mst_heading">.</h4>
  24. 		</div>
  25. 		<div class="__mst_form_item">
  26. 			<h4 class="__mst_heading">I have</h4>
  27. 			<input type="number" class="__mst_form_input" name="conversational_kids" data-character-width="2">
  28. 			<h4 class="__mst_heading">.</h4>
  29. 		</div>
  30. 		<div class="__mst_form_item">
  31. 			<h4 class="__mst_heading">kids, and live in</h4>
  32. 			<input type="text" class="__mst_form_input" name="conversational_postcode" data-character-width="5">
  33. 			<h4 class="__mst_heading">.</h4>
  34. 		</div>
  35. 	</form>
  36. </div>
Javascript
  1. $('#conversational-form-1').__mstConversationalForm({
  2. 	autoExpandInput: true // Disabled by default
  3. });

Plugin Information

Conversational Form Options

The Conversational Forms Plugin has several options that can be used. These include the following:

  • autoExpandInput: Whether or not the input should grow in size based upon the user's input. Default 'false'
  • animationChain: Whether to always show or to progress the user with each interaction. Default 'true'
  • animationTime: The time in milliseconds for animations. Default '400'

An example of code usage with these values below:

  1. $('#conversational-form-1').__mstConversationalForm({
  2. 	autoExpandInput: false,
  3. 	animationChain: true,
  4. 	animationTime: 400
  5. });