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 be checking the Required option, but if you do enable it, page visitors will not be able to leave the input blank and progress to the next slide.

Version 1.5.0+ adds a new option titled “Validate as email”. Enabling this option will not allow the page visitor to progress to the next slide until they have entered a valid email address format. Best to ignore this for now.

answer settings

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).

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

Version 1.5.0+ adds per slide background style settings, these are cosmetic and completely optional.

slide settings

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 page visitor by name. An example of how to do so would be to change the question value ”What do you want to ask?” 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 that specific 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 “Clickable Content”.

6. Drag and drop a Text Stack into the “Drop Stacks here” section of slide 2′s answer component.

For our example, we are going to change the text 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 page visitor, “Clickable Content” 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 page 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 page visitor.

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

Version 1.5.0+: Enable the “Validate as email” option so that the form verifies the email format.

Answer values

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 when page visitors try to use the form.

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 page visitor has chosen “Phone”.

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

Version 1.5.0+ adds a new option titled “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.

conditional slide

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. For this example we just want to cover all of the information you need to create a form.

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

submit slide

This will remove the Question field and add a submit button. When page visitors 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 From (Titled “Reply To” in version 1.5.7+)  field by using a Slide ID from a corresponding slide that has an email value.

In our example slide “q3b” will have the page visitors email address.

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

16. Set the 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.

submit slide

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

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 send the message.

Note: No error will display if you have entered in an email address wrong. Be sure to check your To email 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 the Purchase Order Lookup Form.

Settings Panel

margin and padding

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.

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.

text font styles

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 (v1.5.0+) - 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.

Creating Multiple Branches

Version 1.5.0+ allows you to create multiple branches each with 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 the Purchase Order Lookup Form.

Conditional Content Within a Slide

Version 1.5.0 introduces a new included “If” Stack. This stack can be used to show conditional content in a slide depending on how a user has answered a previous slide. As an example you ask a user their age and show different content to people younger than 18 than those over 18, even changing what choosable answers there are.

if stack

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 or equal to 1 and (if) slide key i1 is less than or equal to 10″

This means this content would show if values 1-10 are given and would not display if the value was too high, too low, or if text was given instead. You can also use text values instead of numbers.

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 the Purchase Order Lookup Form.

Using Multiple Input Fields

If you want to use multiple input fields (Input or Text) in a single slide you are able. You can not however mix “Input fields” & “Text Fields” with “Clickable Content”.

Short-Codes

Display Slide Value-  To use a value from a previous slide, simply take the Slide ID (of slide that contains the answer 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 page visitor.

Multiple Input Fields -  When you want to create a short code for an input field value that comes from a slide with multiple input fields, 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

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 page visitor’s email address use that slide’s ID in the From 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.

submit short codes

Submit Slide – 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.

autoreply

Add your email address to the “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

Submit Slide – 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.

Submit Slide – Submitting to an Address Not Associated with Your Domain

As of version 1.5.7, Siphon now 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

AJAX to PHP (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"];
?>

 

Need to update your product? Use the Order Lookup Form to download the latest version.