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.
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.
- 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.
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.
Text on button used to close form slide out.
Text displayed while form is processing and sending message.
- Message Fail
Text displayed when form can not be sent.
Text displayed when form has been successfully processed and sent.
- 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
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.
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.
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 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.
Label for sender's name input
Label for sender's company name input
Label for sender's phone # input
Label for sender's address (physical, not email address) input
Label for email subject field input
Label for sender's email address input
Label for text message area input
Error displayed when a required input is not provided by the user
Error displayed if name field does not meet minimum entry of 2 characters
Error displayed if name field exceeds maximum entry of 32 characters
Error displayed if user entered non-numeric data in either the phone number or human test field - each of which accept ONLY numbers.
Text displayed when users does not supply a valid email address in the Email input
Text displayed when human challenge answer is incorrect