How To Use Typeform

 
 

About

Typeform helps you ask awesomely online! If you ever need to run a survey, questionnaire, form, contest etc... Typeform will help you achieve it beautifully across all devices, every time, using its next generation platform.

Requirements

Typeform Access
Main Contact: Olamide Awofeso

Table of Contents

How To Create A Typeform Survey
How To Customize A Typeform Survey
How To Use Logic Jumps
How To Push A Typeform Survey Live
Appendix

How To Create A Typeform Survey

Typeform.png
  1. Go to https://admin.typeform.com
  2. Login with the credentials.
  3. In the "CLIENT SURVEYS" tab, navigate your way to the bottom where you will find the "SURVEY MASTER TEMPLATE (US)".
  4. Click on the ellipsis "..." and select "Duplicate".
  5. A "SURVEY MASTER TEMPLATE (US) (copy)" shows up. Click on the preview box to open it.
  6. Click on the "SURVEY MASTER TEMPLATE (US) (copy)" to rename the survey to the campaign you're working on.
  7. Once you've made the changes, click on the "Save changes" button to save it.
  8. Click on the "View" button to get your Typeform Code.
  9. The Typeform Code is a string of letters and numbers after "to/" and before "?brand".
    (e.g. https://brandshareus.typeform.com/to/XXXXX?brand)
  10. Copy the Typeform Code and send it to the Account Manager to fill out the Survey Request Form.

How To Customize A Typeform Survey

The Typeform Master Template (US) comes preloaded with questions. If a client is requesting to include additional questions, follow the instructions below to customize the survey.

  1. Click on the text of the question you want to customize. The top section should be the question. The middle area should be the description. The ones with "-" are the answers.
  2. To add a "Hidden Field," type "@" and a series of text should show up in a dropdown menu so you can add the:
    • Brand Name (brand)
    • Production/Distribution Format (format)
    • Program Detail (delivery)
    • Winner Selection Date (winselectdate)
    • Prize (prize)
    • Hashtag (uniquetag)
    • Brand's Twitter Handle (brandtwitter)
    • Survey Start Date (startdate)
    • Survey End Date (enddate)
    • Prize Value (prizevalue)
    • Prize Quantity (prizeqty)
  3. To add a custom question, click on the "Blocks" button. It looks like four squares. The options you have are as follows:
    • Welcome Screen - This is the opening page of your survey.
    • Thank You Screen - This is the closing page of your survey.
    • Multiple Choice - This question allows the user to choose multiple answers.
    • Short Text - This question allows the user to type in a short answer.
    • Long Text - This question allows the user to type in a long answer.
    • Statement - This is just a slide that shows the user a statement or text that cannot be edited.
    • Picture Choice - This question allows the user to choose a picture instead of text. Multiple answers are allowed when enabled.
    • Yes/No - This question only allows the user to answer yes or no to a question.
    • Email - This question only allows the user to put in an valid email.
    • Opinion Scale - This question allows the user to put in a rate as an answer. (e.g. stars, 1-5, etc.)
    • Rating - This question allows the user to put in a star rating.
    • Date - This question only allows the user to place a date.
    • Number - This question only allows the user to put in a number.
    • Dropdown - This question only allows the user to answer using a predetermined list of answers.
    • Legal - This question only allows the user to answer "I accept" or "I don't accept" to the legal question being asked.
    • File Upload - This question only allows the user to upload a file.
    • Payment - This question allows the user to put in a payment information. Not needed.
    • Website - This question only allows the user to place a website link.
    • Question Group - This allows you to organize questions into a group. This will be helpful later for Logic Jumps. See: How To Use Logic Jumps.
    • Hidden Field - These are customizable text values that repeats the text wherever it's placed in the survey.

How To Use Logic Jumps

Logic Jumps allows you to skip or add questions based on the user's answer. It's helpful for follow up questions when a user selects a certain answer you need more information on.

COMING SOON!

How To Push A Typeform Survey Live

  1. IMPORTANT! Have the Account Manager fill out the survey request form.
  2. Open Adobe Dreamweaver. (Make sure Adobe Dreamweaver has been set up.)
    See: How To Set Up Adobe Dreamweaver.
  3. Within the "Site" folder, navigate to the "brands" folder.
    IMPORTANT! Before you start editing, make sure you have the latest copy of the live site on your local copy. To update, click the "brands" folder the click on "Get". A prompt sometimes appears asking you to overwrite your local copy. Click "Okay".
  4. Right click the "TYPEFORM_TEMPLATE" folder > Edit > Duplicate or press Command + D on your keyboard.
  5. Rename the "TYPEFORM_TEMPLATE copy" folder to the survey URL without the "www." and the ".com" by right clicking the folder > Edit > Rename.
    (e.g. "www.surveyurl.com" becomes "surveyurl".)
  6. Open the "index.html" inside that folder by double clicking it.
  7. Once the survey request comes in, copy all the code from the section you want to include.
  8. Paste the code in the "index.html" document.
  9. Save the "index.html" document.
  10. Close "index.html"
  11. Right click the "Survey URL Folder" and click "Put".
    This uploads the file to the live site.
  12. Go to DomainZoo and log in.
  13. Go to the "Web Hosting" section and click on "Manage All".
  14. Click on "brandsharemedianetwork.com".
  15. Click on the "cPanel Admin" button.
  16. Navigate to the "Domains" section.
  17. Click on "Addon Domains".
  18. Enter the Survey URL in the "New Domain Name" text box with the .com.
    (e.g. surveyurl.com)
  19. The "Subdomain" text box automatically updates. Leave as is.
  20. Enter "brands/surveyurl" in the Document Root Home/" text box with "surveyurl" as the folder name you specified in Adobe Dreamweaver. Once you start typing, a dropdown should show up with "brands/surveyurl". This confirms that you have uploaded the files to the live site. If the "brands/surveyurl" doesn't pop down, STOP and repeat Step 11.
  21. Click on "Add Domain".
  22. A confirmation page shows up and the survey site is live.
    IMPORTANT! It usually takes an hour for the servers to update.

Appendix

Text Anomalies

If you see some text anomalies in the survey site, like a series of extra letters and/or numbers, this usually means that the quotation marks are being parsed as an unknown symbol so the website doesn't know what to do with it. It replaces the unknown symbol with a string of letters and/or numbers.

To fix this, follow these instructions:

  1. Open Adobe Dreamweaver.
  2. Open the "Survey URL" folder the text is appearing on.
  3. Open the "index.html" file in that folder by double-clicking it.
  4. Find the opening quotation mark and highlight it.
  5. Go to the top menu and click on Find > Find and Replace in Files...
    or press Command + Shift + F on your keyboard.
  6. Make sure you're in the "Basic" tab in: "Current Document".
  7. Type quotation marks " in the "Replace..." text box.
  8. Click "Replace All".
  9. Find the closing quotation mark and highlight it.
  10. Repeat Steps 5-8.
  11. Save the "index.html" document.
  12. Close "index.html"
  13. Right click the "Survey URL Folder" and click "Put".
    This uploads the file to the live site. The text anomaly should be gone.

Text Changes

From time to time, text changes are imminent for the survey site. Whether it's updating the rules and regulations, to changing the start and end dates.

First and foremost, DON'T MESS WITH THE CODE. If you don't know how to code in HTML, please refer to someone who does. If one letter or symbol is missing, the whole site could break and you'll end up with a malfunctioning survey.

Editable areas are clearly marked within the HTML code. HTML marks start with "<!--" and end with "-->". Only edit text within these areas.

HTML Basics

  • Add "</br>" tags if you want to add a line break.
  • Add "<strong>" before and "</strong>" after a text or phrase to BOLD it.
  • Add "<h1>" before and "</h1>" after a text or phrase to make it into a TITLE.
  • Add "<a href="LINK" target="_blank">" before and "</a>" after a text or phrase to add a link.
    To add a link, update "LINK" to the URL of choice. Keep the quotation marks. Make sure you add the full link. They usually look like: "http://www.link.com"
    To add an email link, update "LINK" to "mailto:[email protected]". Make sure you add "mailto:" otherwise the link won't work.
 
 
TypeformKurt Tacastacas