Tutorials

Siphon

Setup

1. Drag the Siphon Stack into the Stacks editor.

Once the Stack is in the editor, you will see three components. The Container on the outside wrapping a single Slide, and the Slide wrapping a single Answer. The container is purple, the slides have a black border around them, and answers have a white border around them. There are also blue buttons that will allow you to add more slides to the container or add more answers to a single slide.

siphon components

 

2. Change the text “What do you want to ask?”, found above the answer, and replace it with a relevant question.

In this example we will ask “What is your name?”.

Now we need to set up how the form users will reply to this answer. Since the answer will be unique we need to use an input field. By default the answer is set to “Clickable Content”, to change it:

3. Click on the answer component to bring up its settings panel to the right of the editor. Change the option Answer Type to “Input Field”.

There is also an option to change what the label says underneath the input field. We will change it to “Name”. We will not need to use the 3 remaining checkbox options:

Required – When enabled, form users will not be able to leave the input blank and progress to the next slide.

Validate as Email Address – Enabling this option will not allow the form user to progress to the next slide until they have entered a valid email address format. 

Always Visible Confirm Button – Enabling this option will make the confirm / next button visible (Instead of only appearing after the input field has been focused / edited).

answer example

4. Click on the Slide component to pull up it’s settings panel and give the slide a unique Slide ID.

The ID can be anything you want it to be, but every slide should have it’s own unique ID. The value is case sensitive and you should avoid using special characters (!@#$%^& etc) with the exception of dashes  and underscores _ .

There are three fields in the settings panel, but we will only need to set the Slide ID for this slideIn this example we will give it the ID “q1” (for question 1). Note that the short-code [q1] we will be using later displays in the top right corner of the slide.

Background Styles are cosmetic and completely optional.

Leave Display Order set to “Automatic”, we will go over this option later.

The first slide is now finished and does not need anymore content, but you can add any additional info or Stacks content by dragging and dropping other stacks inside the Slide’s black border. You could also add more answer input fields if you wanted to get more information from a single slide.

5. Click the Add New Slide button to add a second slide.

In this slide we can use Siphon’s short-codes to greet the form user by name. An example of how to do so would be to change the question to “Hello [q1], what is the best way to contact you?”. The short-code:

[q1]

is simply made by wrapping the first slide’s Slide ID in brackets. The short-code will be replaced by the value given in the last slide.

short-code example

Now we need to create answers for this second slide. This slide is going to have multiple choice answers, so we can leave the Answer component set to “Text (Submits on click)”.

Submits on click – If a form user clicks on this type of answer, the slide will automatically submit and move to the next slide.

6. Double click the text “Click here to edit text.” and change the value to “Phone”.

7. Click on the answer component to open it’s settings panel and create a Value for the answer.

Unlike the input field, which gets it’s value from what has been typed in by the form user, “Text” answers do not have a value by default, so one will need to be createdIn our example, we will change the value of this answer to “Contact by phone”. When a form user visitor clicks on this answer, that value will be recorded.

To add a second answer, you can either duplicate the phone answer or:

8. Click the Add New Answer button to add a second choice for the form user.

In this answer we will add the text “Email” with the answer value being “Contact by email”. 

Just like we did for the first slide we need to:

9.  Create a unique Slide ID for this slide.

In this example we will give this slide the ID “q2”.

Note: It’s very important to remember to give each slide an ID. If a slide is missing an ID it can cause errors.

Now we need to show conditional slides according to how the second question is answered. First we will create a slide for people who want to be contacted by phone.

10. Add a new slide. This slide will only display on a condition based on the previous slide’s answer.

For our example the question will be “What number should we use to contact you?”. The answer should be an input field and in our example we are using “q3a” as the Slide ID.

conditional slide

We do not want this slide to display automatically, so:

11. In the slide settings panel uncheck the option “Automatic”. Two new fields will appear. To set what slide should come before this one, type in the previous slide’s ID into the After Slide ID field.

This slide is based on the second slide’s answer so we will put “q2”.

We want this slide to show only if the form user has chosen “Phone”.

12. Set the field Has Value equal to one of the answer values of the previous slide.

Has any Value – For more information on what that does see the section titled “Creating Multiple Branches” below. For now you can ignore this option.

In our example we will put “Contact by phone”.

This field is case sensitive and the value should match completely to the value you added to the answer in question 2.

13. Create a new slide just like the previous conditional slide.

In this new slide the question will be “What email address should we use to contact you?” and we want it to show when slide ID “q2” has the value “Contact by email”. This new slide ID will be “q3b”.

Now we can create a submit slide to do something with the collected answers. You can definitely create more slides gathering more information or skip adding a submit slide altogether if you just want to provide links or display conditional content. 

14.  Add a new slide and in the slide’s settings panel, change the slide type to “Submit /  Email Data”.

This will remove the Question field and add a submit button. When form user click the submit button all of the chosen and filled in answer values will be emailed to the address you provide.

15. While still in the settings panel, set the Reply To field by using a Slide ID from a corresponding slide that has an email address value.

In our example slide “q3b” will have the form user email address.

Note: Our example is just to teach you how to set up Siphon. You may want to make sure every form user provides an email address, not just those who want to be contacted by email.

16. Set the Send To field to the address you want to receive the form data. You can also change the Email Subject to whatever you would like as well as the text found in the submit button.

17. Give the submit slide a unique Slide ID.

We now need to create a final slide to show once all other slides have been filled out and submitted.

The Custom Email Format, Declare Custom “From”, and Enable Autoreply checkbox options can be ignored. You can find more information about them below.

18.  Add a new slide and in the slide’s settings panel, change the slide type to “End /  Complete”. This is a blank slide that you can add any stacks content to. This slide will only display if the submit slide has successfully sent the message.

Note: No error will display if you have entered in an email address wrong. Be sure to check your Send To field for spelling errors.

19. Finally, you can click on the outer Container element to get to the Siphon Styles settings panel. In this panel you can customize the form.

styles

Siphon includes an example file showing you how a simple contact form is set up. If you need to re-download the example file you can use this form.

Settings Panel Breakdown

Margin – Adjust the space outside of the Stack.

Padding – Adjust the space inside of the Stack.

Content Width – Set the a limit to how wide the content can be. The content will be centered with equal padding added to the left and right  if the browser window or parent stack is wider than the set amount.

Content Height – There are three options to choose from. The two Fixed options will make Siphon same height as it’s largest / tallest slide. The third option Dynamic will adjust the height of Siphon to match the currently active slide.

Content Align – Set the text alignment of the content inside of Siphon.

Navigation Style – Choose between two options. Back Button will place a arrow button at the bottom of each slide to allow users to back up to the previous slide. Pagination will place clickable bullets at the top of the slide allowing users to navigate to any previous slide in a single click. Note: Because Siphon slides are not static and the slides used as well as the amount of slides there are can change depending on how a form user interacts with the form, the pagination bullets will reset any time a form user makes a change to their input and re-submits a slide. All previously inputed data will be maintained however.

Next Button Style – Set by default, Checkmark will display a checkmark graphic inside of the button. Custom Text will replace the checkmark graphic and allow you to place any text inside the button. Note: When the Custom Text option is enabled, the Input Field’s special built-on submit (demonstrated below) button will be removed.

Built-on Next Button (Checkmark only):

Custom Text Next Button:

Button Text – The text that displays inside of the next button.

Button Font Size – The size of the text inside of the next button.

background styles

Background Gradient Mode & Animate Gradient – If the background has been set to gradient, you can animate it by enabling the “Animate Gradient” option. This will cause the background to move slowly back and forth in the direction of the gradient.

Background Image Mode & Attachment – If the background has been set to image, you can make it so the image does not move when the page is scrolled adding a parallax style effect by settings Attachment to “Fixed”.

question font styles

Question Styles – These settings only effect the question or text found at the top of each slide.

Answer & Text Styles – These settings affect all the text below the question or text found at the top of each slide.

Hover Color – This setting affects the color of the answer elements when they are hovered.

Input Color – This setting affects the color of the text inside the input elements when they are filled in.

Input Bg Color – This setting affects the color of the background of the input elements.

Input Style – Change the style of the input fields from underlines to boxes.

debug mode

Debug Mode – If you are having trouble with the Stack, you can enable this mode to have the console display a log of what is happening step by step. We only recommend enabling this option when contacting support to help resolve an issue.

Answer Type Descriptions

Text – Create a simple clickable text link. If this link is clicked, Siphon will automatically advance to the next slide and the field’s value will be applied to the Slide’s Short-Code (See “Using Short-Codes” below for more info).

Content – Create a simple clickable link out of an image, button Stack, or any other 3rd-party Stack. If this link is clicked, Siphon will automatically advance to the next slide and the field’s value will be applied to the Slide’s Short-Code (See “Using Short-Codes” below for more info).

Input Field – A basic input field that allows form users to provide numbers, email addresses, or a short amount of text. The input field has a built-on confirm button that displays once the field has been focused. You can make the confirm button always visible by using the “Always Visible Confirm Button” option in the Settings Panel.

Text Field – A basic input field that allows form users to provide large amount text. The input field has a built-on confirm button that displays once the field has been focused. You can make the confirm button always visible by using the “Always Visible Confirm Button” option in the Settings Panel.

Checkbox – A clickable checkbox that does not cause Siphon to automatically advance to the next slide. If the checkbox is checked, it’s value will be applied to the Slide’s Short-Code. If the checkbox is left unchecked, it’s value will be blank. Note: The Checkbox uses Font-Awesome Icons and the Font-Awesome Stack must be added to the page in order for checkbox to display.

Radio Button – A clickable radio button that does not cause Siphon to automatically advance to the next slide. Radio button’s can be group together by giving them matching “Radio Group ID”s in the Settings Panel. Only one Radio Button can be enabled per group. If a radio button is enabled, it’s value will be applied to the Slide’s Short-Code relative to the Radio Buttons position in this slide. If the radio button is disabled, it’s value will be blank. Note: Each Radio Button acts as it’s own input field that has it’s own short-code. See the tutorial “Using Multiple Answer Types in a Single Slide” below to learn how to get the short-codes for slides with multiple inputs.

File – This input is solely for allowing form users to upload files. Note: This Answer Type does not serve well in the case of displaying values or advancing to conditional slides. 

Using Short-Codes

To Display a Previously Given Value –  Take the Slide ID (of slide that contains the value you want to use) and wrap it in brackets [ ]

For example, if I had a slide with the id “slide3”, I would place the short-code

[slide3]

anywhere text is accepted in any following slide. That short-code will be replaced by the value given by the form user.

In the Submit / Email Data Slide – You can also use short codes in the From and Email Subject fields of a Submit / Email Data slide. If you have a slide that collects the form user’s email address use that slide’s ID in the Reply To field. Do not include the brackets when placing the slide’s ID in this field. You can also include multiple short-codes in the Email Subject field to help you quickly identify the contents of the email message.

Using Multiple Answer Types in a Single Slide

You are able use multiple Input fields, text fields, checkboxes, radio buttons, and files in a single slide. However, you cannot use any Answer Type that is tagged “Submits on click” as these options will automatically navigate to the next slide if clicked.

Multiple Input Field Short-Codes

When you want to create a short code for an input field value that comes from a slide with multiple Answer Types, you will need to reference which value you want to use by adding a dash (-) followed by a number representing it’s placement order. For example, If I had two input fields and one text field in a single slide, and I wanted to get the value from the second input field, my resulting short-code would be

[slide3-2]

slide3 example

 

Creating an Autoreply

When setting the Slide Type to “Submit / Email Data”, you will have the option to send an automatic reply message when a user submits the form.

Add your email address to the “Autoreply From” field to allow users to reply to your automated message. You can add a value like “No-reply” if you do not want users to be able to reply to the message. The subject and body fields support short-codes so that you can add information gathered by the form (like a name for instance).

Note: If one of the slides has not asked the user for their email address, the Autoreply will not have an address to reply to. The Submit Slide From field will need to contain the Slide ID of the slide that gathers the user’s email address.

short-code email address

Creating a Custom Email Format

The “Submit / Email Data” Slide Type will send a message with the user’s answers to the email address you specify. By default, when a user submits the information, the message sent to your email will contain all the answers given by the user separated line by line. To create a custom layout and to make the email more readable for your specific needs you can enable the “Custom Email Format” option.

custom format

This will allow you to use short-codes to organize the slide answers, adding titles and grouping them together.

Email Troubleshooting – Submitting to an Address Not Associated with Your Domain

Siphon includes an option titled Declare Custom “From”‘. Enabling this will allow you to set a value for the PHP email “From” Header. This is useful if you are having trouble getting your message to send to an address not associated with your domain. After enabling this option, place your domain email address in to the new field titled “From”.

custom from

Creating Multiple Branches

You to create multiple branches in Siphon with each branch having their own submit and end slides. This way you can combine multiple forms into a single Siphon Stack.

multi branch flow chart

Lets say you wanted to create a multiple branch form like in the illustration above. The grey box shaped like a chat bubble would be slide ID: s1 while the branch on the left would be slides: red1, red2, and red3. We will ignore the other two branches as they will be set up the same way the red one will be.

s1 would ask a question and give you three answers to choose from: Red Branch, Green Branch, and Blue Branch. 

For slide red1 we will set it to display after slide s1 has the value Red Branch.

has value

Slide red2 will then need to be set to display after slide red1 “Has Any Value”. The “Has Value” field should be left blank as it does not mater what value is given in slide red1, this slide will display always after slide red1.

has any value

If we had set slide red2 to display Automatically it would have displayed regardless if slide red1 was displayed at all.

Slide red3 would then also need to be set to display after slide red2 has any value.

Siphon includes an example file showing you how to set up multiple branches. If you need to re-download the example file you can use this form.

How to Use the ‘If’ Stack to Display Conditional Content

The included If Stack can be used to show conditional content in a slide depending on how a user has answered a previous slide.

For example, you can show a coupon code to form users who input a value greater that 10 in previous slide. If we created a slide with the id “i1” that asks the form user how many t-shirts he wants to order, we could use the If Stack like so:

The stack functions as if you were reading it from top to bottom. In the above screen shot it would read:

“Show this content if slide key i1 is greater than 10 and (if) slide key i1 is less than 20”

Then whatever you place inside the “Drop stacks here” section would only display if the form user says he is going to be more than 10 t-shirts but less than 20.

Note: This Stack would need to be placed in a slide after the slide with the ID “i1”.

Siphon includes an example file showing you how to use the “If” Stack. If you need to re-download the example file you can use this form.

Using AJAX to Submit to a PHP File For Data Processing (Advanced)

ajax to php

This Slide type is meant for those users who know a little about PHP and have or will write a custom script to handle the submitted form values. The values will be posted to a custom URL. The posted values can be used like so:

<?php
$data = $_POST["submitted_data"];
?>

 

Updates & Changelog

Need to update your product? Use this form to download the latest version.