KickSnap Manual

 

KickSnap stack

---

This KickSnap Stack must be placed on any form on your page where you want the contact form to reside.  Use of other third party products which import or globally place content on your RapidWeaver project may or may not be able to import KickSnap.  To start with, we recommend placing an actual instance of KickSnap on your page and testing with a native (non-imported/extra contented) instance of the stack.

Also note that KickSnap has an awesome advanced built in color scheme editor - you can alter the appearance of your Kicksnap IN RapidWeaver preview mode.

Basic

• Recipient
  Destination email address where form results will be sent via email
• Subject (Default)
  If you choose NOT to use the SUBJECT input from the form and rather supply your own static value for the email subject, enter your desired text here
• Include Inputs
  Utilize the checkboxes to select inputs to include. Any inputs not displayed here are required and not optional.

Text

• First Line
  There are three test lines adjacent to the User Image area. These will most commonly be used to display name and title. For example, first line can be used for First Name, Second Line can be used for Last Name and Third Line can be used for Title/Role.
• Second Line
  Second line of text adjacent to User Image area.
• Third Line
  Second line of text adjacent to User Image area.
• Message to Sender
  Define text to email to the message sender as a message receipt acknowledgement.
• Send
  Text for the Send Message button
• Send More
  Text displayed after initial form submission prompting the user to send another instance of the form, if desired.
• Try Again
  Text displayed on the Message Fail dialog to dismiss the error and allow the user to try and submit again.
• Close
  Text on button used to close form slide out.
• Sending
  Text displayed while form is processing and sending message.
• Message Fail
  Text displayed when form can not be sent.
• Success
  Text displayed when form has been successfully processed and sent.

Style

• User Picture
  Select an image from your Mac's local drive to include as the image displayed next to the name on the form header.
• User Picture Style
  Enable/disable rounded corner effect on User Picture
• Theme
  Choose from one of the three included themes. A live edit-mode preview will be displayed as you change themes.
• Sidepar Position
  Choose to place your KickSnap contact form on the left or right hand side of the page
• Fade Style
  Determines how the body area of your page is treated when the contact form is open.  An overlay can be utilized to dim the body area of your site and focus the user on the contact form.  Your options are:  Light overlay (light mask over body area), Dark Overlay (dark mask over body area) or No Fade (body area is left at full visibility, no fade).
• Button Shape
  Establishes styling for the envelope icon button used to invoke the form:
  Circle - A solid background circle containing the envelope/contact icon
  Translucent Circle - A translucent circle allowing the background color to show through
  Rectangle - A solid background rectangle containing the envelope/contact icon
• Button Visibility
  Control when the contact button is displayed:
  Visible:  Button Always Visible
  Don't Show:  Button Never Visible
  Don't Show if less than 500px Wide:  Button disabled if Viewport is less than 500px in width
  Fade in when user scrolls:  Button fades in when user scrolls page beyond original page load position
  OTHER METHODS TO INVOKE KICKSNAP FORM:  If you leave button set to Don't Show, you'll need to provide another means to access the form.  You can make any text or image a link using the Link tool in Rapidweaver.  Simply set the link's class to:  kicksnap-trigger  
• Background Image
• 30 backgrounds are included with KickSnap. You can select one of the included images or patterns or use the Custom Background image drop zone to supply your own custom background.  The background is the area SURROUNDING the form, not the background of the form itself.
• Background Color
  The background color is displayed around the form ONLY when a Background Image is not utilized.    The background is the area SURROUNDING the form, not the background of the form itself (that can be customized via Color Schema tool)
• Label Top
  Controls placement of the Button on the side of the page.  Percent DOWN from top.  10% value would place the button near the top, 50% in the middle and 90% at the bottom of the page.
• Style
  Input for the Color Schema Tools color schemes (see Color Schema Tools below)
• Color Schema Tools
  Probably one of KickSnap's coolest features!  Enable Color Schema tools to enable a color scheme editor when you view your page in RapidWeaver PREVIEW MODE.  When in Preview mode, you can use the WYSIWYG tools to change the colors to your own custom scheme.  Then, simply copy the color scheme text from the Resulted Schema Array into the STYLE input just above the checkbox Voila!  You just applied your own custom colors and didn't ever have to look up a color value :)  Be sure to disable Color Schema Tools to allow normal preview of your RW page.

Social Bar

Enabling Social Bar will allow you to populate the top or bottom of the header of your form with icon based links to your social network profiles.  Simply enable Social Bar, then provide the URLs for any desired pages - be sure to include the http:// prefix.  For example, our twitter URL would be: http:// prefix.

Placeholders

Placeholders are the text labels for the names of your form fields.  You can modify the placeholders to alter the text (but not function of) next to each field on your form.

• Name
  Label for sender's name input
• Company
  Label for sender's company name input
• Phone
  Label for sender's phone # input
• Address
  Label for sender's address (physical, not email address) input
• Subject
  Label for email subject field input
• Email
  Label for sender's email address input
• Message
  Label for text message area input

Errors

• Require
  Error displayed when a required input is not provided by the user
• Minimum
  Error displayed if name field does not meet minimum entry of 2 characters
• Maximum
  Error displayed if name field exceeds maximum entry of 32 characters
• Numeric
  Error displayed if user entered non-numeric data in either the phone number or human test field - each of which accept ONLY numbers.
• Email
  Text displayed when users does not supply a valid email address in the Email input
• Wrong
  Text displayed when human challenge answer is incorrect