Creating a “tell a friend” form

A “tell a friend” form is an email form that is growing more and more popular these days. The internet is so wide and deep that getting lost in it is really easy.  With the help of a “tell a friend” form a user can send someone an invitation to see a certain site, instead of having to remember the site’s name and telling him/her about it in other circumstances. Also this form helps the site owners to get the word out about their website.

A “tell a friend” form is usually a small and simple form which collects the friend’s email address and a message filled in by the form filler.

When pressing on submit an email is automatically sent to the friend containing text about the site and the content of the message that was filled in.

Steps to create a “tell a friend” form:
tellafriend
Part 1- create the form

1) Enter the form builder.
2) Drag a Label element in to the design area and enter text explaining what the form is about. For example: Please enter your friends email address in order to recommend this site to him/her.
3) Drag another Label element and enter the text “Friends email address”.
4) Drag an Email element, place it next to the label and go to its element settings.
5) Enter the text “Friends email address” in the element “caption” field.
* Make sure that the email element is defined as mandatory and that its “Send Copy” checkbox is turned on. This checkbox is in charge of sending an email to the address entered by a user in the email element.

6) Drag a label and change its text to “Personal message”
7) drag a textarea element and place it next to the label. Change its caption to “personal message”.
8) Add a submit button.
9) save the form

part 2 – customize the email sent to the friend
in order to customize the email you can choose one of the following methods:

1) Use the “Email User Message” option in the “form settings”.
This message will appear at the beginning of the email sent to friends.

Go to the “Form Settings” and fill in a message in the “Email User Message” field.
Make sure you use [n] when you want to create a line break. For example: Hi,[n]I wanted to tell you about this great site i found[n]Its called FormLogix.
press “apply” and save the form.
Read more about email user message

or

2) use the “custom user email” option in the “form settings”.
This option allows you to create your own message, place variables in it and edit its style.
Go to the form settings
press on the […] button to open the “custom user email”.

Start writing your message. (notice that You can insert variables from the form).

Press on “edit text” to edit the style of the text in the email.
save the design by pressing on the “save” icon and save the code generated in the “custom user email” window.
Read more about custom user email

Save the form.

Advertisements

User Emails and Messages

Features:
thank you message, email user message and custom user email (located in the “form settings”).

In this post I will explain how to add your own personal messages to the emails sent to form fillers, how to add a small thank you message to the alert that appears upon form submission and how to customize the entire email sent to form fillers.

Thank you message
once a form is submitted a small window appears saying that the form data was saved successfully. The form owner can easily add a small message (a few words only) to this window by using the “Thank you message” feature in the “form settings”.
steps to use the thank you message:
1- enter your form in the form creator
2- go to the “form settings” on the right
3- fill in a short message in the “Thank you message” textbox.

4- press on “apply”
5- save the form

Screenshot of the the Thank you message in the window that appears after form submission:
ThankyouResult

Read more about the thank you message

Email user message
if you create a form with an email element in it and make sure that the “send copy” option is turned on in the “element settings” than a carbon copy email will automatically be sent to the form filler containing the data he/she filled in.  

The “email user message” enables you to add a personal message which will appear at the top of the email sent to the form filler (and mailing list recipients).

steps to use the email user message:
1- enter your form in the form creator
2- go to the “form settings” on the right
3- fill in a message in the “email user message” textbox. If you wish to add a few rows of text make sure to put [n] in order to create a line break.
emailUserMessage
4- press on “apply”
5- save the form

Screenshot of the email with the added message:
emailUserMessage2

read more about the email user message

Custom user email
the email sent to form fillers (and mailing list recipients) has a fixed layout by default,
and contains the entry number and the values entered in the fields.
You can customize this fixed layout by creating a new user email yourself. The email may contain text, data entered in the field (by using form variables) and its style may be edited as well (font colors, font family etc)

steps to use the Custom user email:
1- enter your form in the form creator
2- go to the “form settings” on the right
3- press on the […] button in the “custom user email” option

4- enter the text you want and the variables you want.
emailUserMessage-text
5- press on “edit text” button to edit the style of the email
emailUserMessage-style
6- press on the “save icon” on the top left (disc icon)
7- save the new email layout code in the “custom user email” window
emailUserMessage-code
8- save the form

Screenshot of the custom email:
customUserEmailResult

read more about custom user email

The multiline mode element

The multiline mode element is a repeatable data row that enables the collection on multi rowed data (such as collecting an order of products, sizes and quantities).
This element is essentially a container into which the for owner can drag input elements such as a textbox, a numeric textbox, a textarea and so on.

Let’s get started and add a multiline mode element to a form!

as an example I will be creating a “parents and children” email form with which I can collect information about parents (name and role) and their children (name, age, sex and favorite color).  Since I expect the parent to fill in the information I plan to add the input elements for this data in the regular way (simply drag and drop on to the design area).
However, since I do not know how many children each parent has and I want him/her to have the opportunity to enter data about all their children I will put the children’s input fields inside a multiline mode element. This way the parent filling in the form could press on the “add” button to insert another row (and enter data on another child) or press “remove” to delete a row.
parents1

Step by step:
1- enter the form builder to create a new form
2- drag and drop elements on to the design area:
– label –for the title
– a container  which will contain the parents information (I will be using the regular container for graphic purposes only it has no functional purpose here)
– a multiline mode element
– a submit button.
drag_elements1

3- Change the title label to: “parents and children”.
4- drag 2 labels
(parent name and role) and textbox (for collecting the parent’s name) in to the top container), and a listbox (containing the values: Mom and Dad).
drag_elements2
5- drag input fields in to the multiline mode element : 4 labels for the fiels captions (child name, child age, sex and Favorite color), 3 textboxes and 1 listbox containing the Sex values: Male and Feamle.
drag_elements3
6-Make the MultiLine element bigger to better fit the elements in it:
first select and widen the *external border and after that the inner one. You can also drag the “add” button out of the outer border to prevent it being duplicated per each row.

*Notice that the multiline has 2 borders – an outer border and an inner border. The Outer border shows the real size of the multiline container while the inner border shows the size of the data row container.

Don’t forget to give each input element a caption (name same as the label next to it and a tab index number)
7- Design the form as you wish (color backgrounds, containers, choose font sizes etc…)
8-      Save the form.
9-      Use the “preview” option to test the form and enter 2 rows in the multiline element.
preview1
preview2
10-      Enter the data management tool to view the data entered.
notice that only the parents information will appear in the table rows.
data1
in order to view the children’s data entered in the multiline mode element you will need to press on the “+” button situated in the second column.
data2

Read more about the multi line mode.

Basing your form on a template

while you can use the form builder to create custom forms you can also use readymade templates and shared user forms as the basis to your form.
The readymade forms are a great solution for those who want to shorten the form creation time or want to create common forms (such as a contact form).  Using a template is easy. All you need to do is view the templates, choose the one you want and use it.

FormLogix offers 3 kinds of readymade forms:
1- templates
2- shared user forms
3- widgets

Templates
the templates are data driven readymade forms created by the FormLogix team. Data driven means that the data entered in the forms is stored in a data management tool which allows the user to filter, edit, sort, delete, analyze and so forth.
Steps to use the template:
1- login to FormLogix (login is required in order to use this feature)
2- in the data center  choose: “Create form based on template”.
(You can also reach the template gallery by pressing on the “new page from template” icon in the form creator “general toolbar”)
basedOnTemplate
3- in the template gallery: use the template list “view” links to look at the forms. Each form you choose will appear on the right side.
ViewTemplate
4- You can also search for a template using the template search box.
TemplteSearch
5- Once you find your dream template –press on the “load” link (in the template list).
This operation will open the form for you in the form creator.
ClonedForm
6- in the form creator: give the form a name and save it
* needless to say you can use this template as the basis of your form and change it as much as you like.


Shared user forms
shared forms are forms created by FormLogix users. These forms are also data driven (same as the regular templates).
Steps to use the shared form:
1- login to FormLogix (login is required in order to use this feature)
2- in the data center  choose: “Create form based on a shared form”.
basedOnSharedForm
3- in the shared forms gallery: use the forms list to look at the forms – pressing on a form’s name will make it appear on the right side. Each form you choose will appear on the right side.
ViewShared
4- You can also search for a form using the user form’s search box.
SharedSerach
5- Once you find your dream form –press on the clone icon (looks like a stamp tool).
This operation will open the form for you in the form creator.
CloneShared
6- in the form creator: give the form a name and save it
* needless to say you can use this template as the basis of your form and change it as much as you like.
saveClonedShared

 

Widgets
the widgets are simple readymade forms created by the FormLogix team. These forms are not data driven, which means that the data entered in them is not stored in a data management tool and so does not allow data manipulation such as filtering, sorting,  editing and so on.  When these forms are submitted by the form filler an automatic data entry alert is sent via email to the form owner.
The FormLogix widgets may be used via google gadgets or  widgetbox widgets.
steps to use the google/widgetbox form:
1- go to the widget directory page (http://www.formlogix.com/gadgets.aspx)
widgetPage
2- choose the form you are interested in from the page.
3- press on the “add to google”  button or “widgettbox”  button  under the form details.
4- the relevant google/widgetbox page will open and will display the widget.
5- in google:
press on “add to google” button and it will appear on your google page.
GoogleGadget1
GoogleGadget2
please note that you will need to enter your emal address in order to receive the data entry alerts. In addition you can choose the widget’s background color from a drop down list.
GoogleGadget3

 Press on “save” and you are ready to go.
GoogleGadget4

in widgetbox:
  press on “get widget” and the form code will be displayed.
Widgetbox1
 Please notice that the widget’s settings will appear on the right – please change the email address to your own so you will be the recipient of the data entry alerts.  
You may also determine the form’s background color.
Once you are done  Copy and paste the code  in your site.
Widgetbox3