I want to create a form that allows a user to recommend 5 people.

  • Profile Image
    Ayrtam Ryall
    Asked on February 24, 2011 at 06:35 PM

    I want to create a form that allows a user to recommend 5 people by providing their email address and when pressing submit the are sent an email with a message from the person who has provided the email addresses with a link to the service he/she has recommended.

    If you follow the link we have created a free 30 second personality test and want people to refer this on.

    Thanks

    Erty

  • Profile Image
    abajan
    Answered on February 24, 2011 at 08:03 PM

    Hello Erty. Yes, this can certainly be done.

    This post is being edited and might appear as a jumbled mass of confusion, reflecting the way my mind tends to work. So beware! :-) It's advisable to only follow its directions after I have finished editing it.

    Upon reading your post and visiting the link to get "the big picture" of what you want to accomplish, we can get started:

    Create a new blank form. Since it's asking you for a title ("Title Me"), we'll do just that by giving the form a heading and editing its text to state: "Personality Test Referrals". An optional subheading of "Refer up to five (5) friends and get our FREE eBook!" or whatever incentive you can offer to persuade people to use the form, might not be a bad idea. I stated that the subheading is optional but in actuality, so is the heading. You could just as easily have changed the title by clicking it and changing it. It's just that having a heading gives the form a nice finished look.

    Summary of actions in last paragraph: My Forms > New Form > Continue > under "Form Tools" in the menu on the left, click "Heading" > change it's text to "Personality Test Referrals" > (Optional) click "Sub Heading" in the toolbar and type whatever you wish to.

    Let's continue: "...a form that allows a user (referrer) to recommend (refer) five (5) people by providing their email address...". So, we need 5 email fields:

    From the "Quick Tools" menu on the left, click "E-mail" 5 times. (Optionally, it can be dragged into the form but I usually find clicking to be faster.) For strictly presentational purposes which will have no effect on the functioning of the form, let's right-align those labels:

    "Form Style" tab > "Label Align" tool > Right Aligned > change their text from "E-mail" to "E-mail No. 1", "E-mail No. 2" and so on (How? Click the first "E-mail" label and when it becomes highlighted and italicized, type "E-mail No. 1". Now do likewise for the rest). Also, the "Submit" button would be better positioned if aligned to the center (How? Click anywhere within the "Submit Form" field to activate the "Properties: Submit Form" tab > "Button Align" > "Center").

    Before proceeding further, you stated "...that allows a user..." as opposed to "requires". This means that the user may choose to reffer any number of persons (including none at all), up to to a maximum of five (5). But the sole purpose of this form is to give referrals. So, at least one referrence is required. (Click the first email field to select it and then click "Required" in the toolbar)

     

    Moving on:

    "...and when pressing submit the(y) are sent an email with a message from the person who has provided the email addreses..."

    Okay, we better pause because there's a lot of stuff happening here! To clarify things, perhaps we ought to "re-phrase the phrase", so to speak: Upon submission, each referral is to be emailed a message from the person who recommended them (the referrer: the person using the form).

    If you study the situation carefully, you will see that at least three (3) people and as many as seven (7) are to be notified when the form is submitted. How did I arrive at those figures? Well, for one, you will be automatically notified (see next paragraph), the user is to get another and then there's at least one referral who's to be sent a message (with a link but we'll get to that later). That's a total of 3 people. If the user decides to refer the maximum number allowed by the form (5 people), that will be a total of 7 notifications. But the good news is, following the DRY principle, you will only need to create and configure two (2) notifications! (At least, I think so LOL)

    To the best of my knowledge, every new JotForm form has a default notification pre-configured to alert the form's creator (that would be you) via the current email address on record at his JotForm account, of any submissions made via that form. Bearing this in mind, that notification need not be edited, as it can be used to notify just you. FYI, in addition to notification via email, each submission from the form will automatically generate its own record in a table which can be downloaded at anytime (Form Builder > click the form whose records you wish to view > click "Submissions" toolbar button > scroll down the page and you will see the table > download the version you wish via the buttons immediately above the table).

    But we're getting ahead of ourselves because we haven't finished building the form. This should be done before the notifiations are configured.

    Since the referrals will want to know who referred them, there needs to be a field for the referrer to enter his/her name (the full name because there is more than one boy named Jack and more than one girl named Jill!). Also, if the referrer wants feedback from the referrals regarding what they thought about the site, there needs to be a (required) field for his/her email address. After inserting it, change its label to "My E-mail" to avoid any confusion on the referrer's part. 

    Summary of last paragraph: Click the header field to highlight it > click "Form Tools" to expand that section of the menu > Quick Tools > click "Full Name" > Now that the "Full Name" field has been inserted, click it to highlight it > in the same "Quick Tools" submenu click "E-mail" > change its label from "E-mail" to "My E-mail". Of course, one could argue that it would have been simpler to just drag the fields into position but many times I have done that, only to find duplicate fields showing up in the form. It may be a bug of some sort or perhaps just a bit of clumsyness on my part. (Incidentally, licking the header to highlight it before clicking "Full Name", causes "Full Name" to be inserted immediately underneath the header. The same reasoning was behind clicking the "Full Name" field before inserting the referrer's email field.)

    Anyway, onward!

    What else needs to be done before we deal with the notifications? Well, you state that the refferals are to be: "sent an email with a message from the person who has provided the email addresses..."

    Okay, there are a couple of ways to do this. While it's true that you could configure the form to send a standard message to every referral, on various occasions, I have had the experience of wishing I could change some standard text on forms (not JotForm forms) used to refer people to some service or the other. I think it's better to allow the referrer the option of changing pre-filled text, if he so desires. So, let's pop a textarea field into the form and pre-fill it with text. But we need to choose some appropriate text. Let's read the last part of your request:

    "...with a link to the service he/she has recommended." Having browsed the link earlier, I think something like that shown in the next screenshot, a few paragraphs down, should suffice but of course, it's totally your choice what to put. So, click the "E-mail No. 5" field and in the "Form Tools" submenu, click "Text Area". Now that it has been inserted, change its label to "My Message" and type the text you see in the screenshot below the next paragraph.

    Now, to the last part of your request: "...with a link to the service he/she has recommended." Now, this next field is mainly for cosmetic purposes but it needs to be included for the message in the text area to make sense to the referrer. The referrals will actually get a duplicate link that we will construct shortly.

    Everything is pretty much in place to begin working on the notifications. However, we can tweak things a bit before leaving this section. The form could do with some color and there ought to be more space between the referrer's email address and the others:

    To change the form's background color:

    "Form Style" tab > "Backgound" tool > click within the sidebar on the right until you find a suitable hue and then click within the square to adjust its saturation and brightness. Alternatively, if you know the hexadecimal code of a favorite color, enter it in the text box > click OK.

    That was easy! However, increasing the space between the referrer's email address and the others is a bit trickier because that's not quite as GUI an operation as changing the background color. You will need to search your form's source (source code) to know what ID was automatically assigned to either the list item element containing the referrer's email field or the one containing the first referral's email field. Once armed with that information, you can adjust the spacing between the fields by targeting either ID via the Inject Custom CSS tool. That's not as complicated as it sounds!

    First, find out where on JotForm.com your form resides: In the toolbar above the "Form Tools" menu, click "Preview" and then click the URL in the text box to select it. Now copy (Ctrl+C on Windows) and paste it (Ctrl+V) to the address bar of a separate browser tab or window and hit "Enter" to go to your form's page.

    If you're using Firefox and have the Firebug extension, super! Start up Firebug, right click on the blue line highlighting the "body" element and in the shortcut menu select "Expand all". Now move the mouse down the screen over that expanded source until the "E-mail No. 1" field is highlighted as shown in the screenshot at the link below:

    Using Firebug to find ID of the "Email No. 1" field

    If you don't have Firebug, a less elegant method would be to (depending on your browser) right-click on the page and from the contextual menu choose "View source" or perhaps "View source code" or some similar command. Usually, pressing the F3 key will invoke Search but here again, this would probably depend on the browser.

    Note the ID and switch back to the form builder tab or window. On the Setup & Share tab, click Preferences >  Form Styles > click "click to edit" in the cell to the right of "Inject Custom CSS" and enter the rule shown in the screenshot, substituting your ID for the one shown if it's different:

     

    Okay, let's get that link to the site in and then move on to setting up the notifications.

    Click anywhere within the "My Message" textarea field to select it and then in the "Power Tools" submenu, click "Free Text (HTML)" to insert this final field into the form.

    Double-click on the text that states "click to edit this text..." because I have found just clicking it once doesn't work. Now, replace those words with "FREE Comprehensive Personality Test" then select that text and align it to the center. With the text sill selected, click the Insert/edit link button and when the window pops up, enter the URL in the text box labelled "Link URL" and click "Insert". Click "Complete".

    Summary of the last couple of paragraphs: Click textarea field > "Free Text (HTML)" > double-click anywhere in the box > replace text with "FREE Comprehensive Personality Test" > select and center align it > while still selected, click "Insert/edit link" button > Insert > Complete.

    Before we configure the notifications, let's set up the "Thank You" page. While on the Setup & Share tab, click the "Thank You" toolbar button:

     

    Select "Tank You message" and click Next.

     

    This is how the finished Thank You message will look. Select all (Ctrl+A) of the text at this link and copy (Ctrl+C) it to your clipboard. Startup the Thank You Page Wizard and select "Custom Message". Click "HTML" (the rightmost button in the top row of the toolbar), click inside the work area, select all the text, paste (Ctrl+V) what you copied to the clipboard and click "Update" then "Finish" to close the wizard.

    My apologies for the delay, Erty but I'm trying to incorporate some conditional logic into your form and I am consulting with fellow support team members and developers via a Google Docs forum we use. However, in the interim, I think it's best (in the interest of time) to just proceed with my original plan and get your form done. Later, if we get the conditional branching to perform as it should, I will let you know how to upgrade the functionality of your form.

    So, let us continue: ... more coming up shortly

    Erty, there's an urgent matter of which you may be aware that I need to tend to, regarding several clients apparently losing data from their forms. Sorry for yet another interruption. 

  • Profile Image
    WhichVenture
    Answered on February 25, 2011 at 09:04 AM

    Hi Abajan

    Thanks that sounds great - I will attempt this leter when I can think and will report back.

    Great service

    Thanks

    Ayrtam

  • Profile Image
    WhichVenture
    Answered on February 28, 2011 at 06:41 PM

    Hi Abajan

    Yes I can wait a little longer as I need to allocate a few hours to attempt this.  Really impressed and I will feed back it I can get it working.

    Brilliant!!

    Regards

    Erty

  • Profile Image
    abajan
    Answered on March 03, 2011 at 09:37 PM

    Erty, your form is done but I'm just running some tests to see that everything is working as it should.

    Because of a limitation of which I was formerly unaware, regarding the email wizard, I was unable to have the "From" field in the referrals' inboxes populated with the name of the referrer. However, I was able to work around that by having the name appear in the subject line instead and place a note in the body of the message alerting referrals who wished to reply, of the need to compose a new message and to use the email address contained in the first message. I realize this sounds a bit confusing but you'll see what I mean when you test the form for yourself.

    Insofar as the longwinded and convoluted instructions above are concerned, I think it's probably best to take my time and re-write them and then once properly vetted, contribute them to the User Guide for the benefit of others requiring similar forms. Hopefully, I'll get that done in the not too distant future but lately my plate seems to have been unusually full. So, it might well take a while.

    Here's what to do:

    Clone the form at http://www.jotform.com/form/10553739426 and remove the word "Clone" from the title.

    Summary of how to clone: My Forms > New Form > Import Form > From a webpage > enter URL > Continue > remove the word "Clone" from form's title.

    Additional information regarding cloning forms can be found in our user guide.

    If you would like to test it without worrying about spamming genuine email addresses, you can use temporary email addresses from Mailinator.

  • Profile Image
    whichventure
    Answered on March 04, 2011 at 03:34 AM

    Dear Abajan

    You are a true star - I have been putting off starting the form as I find software and coding does not mix well with my brain!

    I cannot thank you enough - are you on LinkedIn - I would gladly give you a recommendation, I cannot express how impressed I am with your willingness to support and help.

    When the form is ready how will I get access to it?

    I have only created a 2 field form before and this took a while although Jotform is absolutely great and easy – its just me!

    Regards

    Erty

     

  • Profile Image
    whichventure
    Answered on March 04, 2011 at 03:36 AM

    Hi Abajan

    I have just read the final sentence on how to clone the form – thanks

    Regards

    Erty

     

  • Profile Image
    abajan
    Answered on March 04, 2011 at 04:23 AM

    Your kind words are much appreciated, Erty. Should you need additional assitance with this or any other JotForm form, please feel free to post your question and our team will gladly assist however best we can.

    I'm not on LinkedIn at the moment but perhaps I will explore the site and post a resume there sometime. But many thanks for the offer to post a recommendation in my behalf! :)

    P.S. I inadvertently omitted instructions on how to embed the form on your site. It doesn't absolutely need to be embedded because you could just put a link on your site to it but embedding eliminates a step (having to click the link) on the user's part before filling out the form and is thus more "user friendly". Embedding also makes the form appear to be part of your website. Would you be needing assistance with that?

  • Profile Image
    whichventure
    Answered on March 04, 2011 at 06:10 AM

    Hi Abajan

    I should be OK with the embedding of the form - I usually use the code in a place holder - my website is www.whichventure.co.uk and I have a simple submit form on the front page and a more detailed one on the contact page.

    Again thanks for your help and support.

    Regards

    Erty

  • Profile Image
    abajan
    Answered on March 04, 2011 at 08:37 AM

    Having viewed the source of your page (not that I am saying it will definitely be a problem) I see that there's some JavaScript. In some cases, conflicts can arise between existing and embedded scripts. Should you find this happening after embedding the form, use the iFrame option and see if that helps.

    You can read more about embedding in our User Guide.

    Good luck, Jim.

  • Profile Image
    WhichVenture
    Answered on March 04, 2011 at 10:00 AM

    Hi

    Thanks - I will feedback and send a link - I am sure it will be great.

    Regards

    Erty

  • Profile Image
    abajan
    Answered on March 05, 2011 at 08:12 AM

    Hi Erty

    Something funny seems to have occurred (have a look at the screenshot I emailed you) but I think I know what caused it. I'm betting that you tested your form and that even though you received the information which you entered on it just fine via email, the records for the form were not updated. That's because (and this is just my best guess) you actually mistakenly completed my form instead of yours (the clone).

    Every JotForm form has a unique ID which can be seen at the end of its URL. So, since the URL of my form is http://www.jotform.com/form/10553739426, its ID is 10553739426. If you see that string anywhere in your page's source, you have embedded the wrong form. Although it is fully functional and the notification and auto responses will go to the intended parties, I will get the records of the submissions because it is my form.

    To correct this situation, just be sure to first generate its clone, as described above, and embed that cloned form instead of the original.

    Cheers.

     

    ~ abajan