Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates...

20
Work with Forms in Joomla (Visforms and SAS Invite System) Instructor for this Workshop – Laura Gordon Web Development School of Arts and Sciences

Transcript of Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates...

Page 1: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

WorkwithFormsinJoomla(VisformsandSASInviteSystem)InstructorforthisWorkshop–LauraGordon

WebDevelopment

SchoolofArtsandSciences

Page 2: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Joomla!WorkingwithFormsinJoomla!2018

2

TABLEOFCONTENTS

Welcome...............................................................................................................................................3WhatisJoomla?.................................................................................................................................................3

WhatisaComponent?......................................................................................................................3WorkwithVISFORMS.......................................................................................................................4CreateaNewForm/FormProperties...................................................................................................4CreateaCOPYofaForm............................................................................................................................................4CreateaNewForm......................................................................................................................................................5BasicFormProperties................................................................................................................................................5Result.................................................................................................................................................................................6MailOptions....................................................................................................................................................................6SpamProtection............................................................................................................................................................7

WorkwithFieldsforForm...........................................................................................................................8TextField..........................................................................................................................................................................8TextArea..........................................................................................................................................................................9RadioButton...................................................................................................................................................................9FileUpload.....................................................................................................................................................................10Select................................................................................................................................................................................10SubmitButton..............................................................................................................................................................11AdvancedTabonallFields.....................................................................................................................................11

WorkwithDataResults..............................................................................................................................12CreateFormsMenuItem..............................................................................................................13

InviteSystem..........................................................................................................................14HostanEvent..................................................................................................................................................14

OpeningPageOptions...................................................................................................................14TypesofPageSamples..................................................................................................................15LandingPage...................................................................................................................................................15EventPage........................................................................................................................................................15

CreateanEventPageOptions.....................................................................................................15SingleEventOptions....................................................................................................................................16EditexistingEvent........................................................................................................................................17ManageGuestList.........................................................................................................................................18

AddLinktowebsite.......................................................................................................................19CopytheURLfortheformfirst...............................................................................................................19CreateNewArticle........................................................................................................................................19

Page 3: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Page 3

ComponentsinJoomla!

WELCOMEInstructorforthisWorkshop

SchoolofArts&Sciences,WebDevelopment

Onceyouarrive:

1. LogintotheworkstationwithyourNetID2. Openawebbrowser(FirefoxorChrome)

3. Gotothewebsite:http://www.sas.rutgers.edu/cms/sandbox34. OpentheAdministratorPanel:

:http://www.sas.rutgers.edu/cms/sandbox3/administrator

WHATISJOOMLA?Joomla!isContentManagementSystem(CMS)softwarethatrunsonawebserver,andallowsyoutoupdateyourunit'swebsitethroughabrowser(suchasGoogleChrome,MozillaFirefox,orSafari).

Acontentmanagementsystemisolatestheprocessofupdatinginformationfromthemoretechnicalaspectsofupdatingawebsite(suchasadministration,configuration,anddesign),andeliminatestheneedtoeditHTMLorusewebdesignsoftware.

Visitwww.joomla.organdhelp.joomla.orgformoreinformationonJoomla!

WHATISACOMPONENT?AcomponentinJoomla!Isaprogramthatcanincludemorecomplexinformationthenjusta‘plain’Joomlaarticle.Thesecomponentsarereferencedas‘miniprograms’.TheycanbeassimpleasaweblinksmanagerorascomplexasJeventswhereeventsaremanagedandcreatedandorganized.

AJoomlaComponentmightalsoincludeamoduleaswell,whichcanpulltheinformationtogether.

Page 4: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Joomla!WorkingwithFormsinJoomla!2018

4

WORKWITHVISFORMSVisformsisaformtoolinJoomlathatcancollectdata.Thisinformationcanbesavedinatableandexportedeasilyto.xlsortoaccessasa.csvfile.Thedatacanalsobedisplayedonawebsiteifneeded.

Theformsare100%customizabledifferentfieldscanbecreateddependingonwhatinformationyouneedtocollect.

CREATEANEWFORM/FORMPROPERTIESComponents-!VISFORMS

CreateaCOPYofaForm

1.Selecttheform

2.ClickonBATCH

ClickonYESforcopyexistingfields

Page 5: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Page 5

CreateaNewForm

BasicFormProperties

ClickNewForm

Basic

FormTitle–Displayedtitle

Name:Cannothavespaces

Canleavetherestblank

Page 6: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Joomla!WorkingwithFormsinJoomla!2018

6

Result

MailOptions

Result

SaveResultàYES

ThismeansdatawillbeSTOREDwhentheformiscompleted

TextResult

Thisisdisplayedaftertheformiscompleted,suchas,‘Thankyouforregistering’

RedirectURL

Ifyoupreferfortheusertobetakentoadifferentpageaftertheformiscompleted.

ToppartofthispagereferencestheADMINMail,orthesiteOwnerEmail,specifyifyouwanttheperson‘runningtheevent’toreceiveanemailandthedetailsyouwantthemtoreceive.

Page 7: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Page 7

OptionsforRecipientMail

TheseoptionsaredefinedforthepersonthatisFILLINGouttheform.

SpamProtection

Ifyouwantthefieldsthattheyfilledoutincludedintheemail,clickIncludeData=Yes

• ScrolltowardsthebottomoftheoptionstoCAPTCHAS

• Someusersprefertheregular‘recaptchaplugin’(insteadofthevisformscaptcha)

Page 8: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Joomla!WorkingwithFormsinJoomla!2018

8

WORKWITHFIELDSFORFORMOnceaformiscreated,toeditthefields,clicktoedittheform,thenclickonthe‘FIELDS’button

Eachfieldhasdifferent‘variables’thatcanbedefined…

TextField

CheckBoxGroup

SelectType=TEXT

SelectREQUIRED(forarequiredfield)

Type:CheckBoxGroup

Addnewvalues,notethe‘VALUE’iswhatisstoredinthedatabase

ACheckBoxGroupallowsmultipleoptionstobeselected.

Page 9: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Page 9

TextArea

RadioButton

TextAreaisgoodfora‘largetext’fieldsuchas‘comments’,‘instructions’.

RadioButtonworkslikea‘checkboxgroup’.ExceptonlyONEoptioncanbeselectedatatime(notmultipleitems)

Page 10: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Joomla!WorkingwithFormsinJoomla!2018

10

FileUpload

Select

Fileuploadallowsafiletobeuploadedwiththeform.This‘pdf’canbestoredonthewebsite.

Thisfieldtypeisgoodifyouwanttoincludean‘uploadofaabstract’forexample.

PleasekeepinmindfilesthatareuploadedshouldNOTcontainpersonalinformation.Anythingthatisuploadedcouldbeaccessedtothepublic.

Weareintheprocessofcreatingourfileuploadpolicy.

SelectworkssimilartotheMultipleCheckBoxGroup.

Toallowfor‘multipleitems’tobeselected,checkoffthe‘multipleitems’.

Page 11: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Page 11

SubmitButton

AdvancedTabonallFields

Thesubmitbuttonisthe‘SEND’buttontosubmittheform.

ClickontheADVANCEDTAB

CustomTextPosition:

• BelowInput• AboveLabel• AboveInput

Customtextisthetexttobedisplayed.

Page 12: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Joomla!WorkingwithFormsinJoomla!2018

12

WORKWITHDATARESULTSAslongastheformwassettoSTOREDATAresults,itiseasytodisplaythedataresultsinthebackend,exporttoa.csv,oronthefrontend.

Visitvisforms–WorkwithForms

ClickDisplayData

ClickEXPORTDatatobringdatainto.csvor.xls

ClickBacktoFormtoreturntoForm

FORMStogetbacktothelistingofallforms.

Page 13: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Page 13

CREATEFORMSMENUITEM

1.CreatenewMenuitem!Menus!MainMenu!AddnewMenuItem

2.Detailsforthenewmenuitem

1.Nameit

2.Menuitemtype:visforms/Form

3.Selecttheform

4.Forthisclass,putitinparentitemFORMSWORKSHOP

Page 14: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Joomla!WorkingwithFormsinJoomla!2018

14

INVITESYSTEM DESCRIPTION:Thissystemallowsuserstomanageaninvitationlistforanevent.Asingleeventcantakeplaceoneormoretimes,andinthecaseofthelatterthehostcanallowgueststoRSVPoranyorallofthesessions,orjustone.ThehostcaninvitespecificpeopleoruseauniqueURLtoallowgueststoself-register.Ahostplanninganeventcanalsopresentseveralpossibledatesandaskprospectivegueststovoteonwhenitshouldtakeplace.DEPARTMENT(S)

SASITOffice.

URL:https://secure.sas.rutgers.edu/apps/invite

HOSTANEVENT

OPENINGPAGEOPTIONS

ClickonbuttontoHOSTanevent

LoginwithyourNETID/PASSWORD

HostanEvent

CreateaLandingPage

Page 15: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Page 15

TYPESOFPAGESAMPLES

LANDINGPAGEThispageallowsyoutohavea‘landingpage’formultipleevents(priortothemoccurring).Youcanselectwhicheventsyouwanttoappearonaspecificlandingpage.Forexampleifyouhavespecificseminarsinaspecificgrouping,theycanbegroupedtogetherhere.

EVENTPAGEThese‘eventpages’areforspecificclasses/Events

SampleEventPage:

CREATEANEVENTPAGEOPTIONS

Page 16: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Joomla!WorkingwithFormsinJoomla!2018

16

SINGLEEVENTOPTIONS

RequirenetidAuthenticationmeansthatthepersonmustlogintotheCASloginsysteminordertoregister(thisisoptional)

Itispossibletoaskanadditionalquestionofyourguests.

Oncethefirstquestionisasked(canuseyes/no,select,text,etc)

Itispossibletoaskadditionalquestionsaswell.

Page 17: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Page 17

EDITEXISTINGEVENTOncetheeventiscreated,youcanvisityoureventspage,toviewthelistofevents:

https://secure.sas.rutgers.edu/apps/invite/host

Itispossibletoaddmoreinformationabouttheevent,includingaddinganadditionaladministrator:

Page 18: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Joomla!WorkingwithFormsinJoomla!2018

18

MANAGEGUESTLISTItispossibletochangethepersonsresponse/rsvp,viewdetails

Exporttheguestlist,emailreminderstoguests,etc.

Page 19: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Page 19

ADDLINKTOWEBSITE

COPYTHEURLFORTHEFORMFIRST

CREATENEWARTICLEFortheworkshop,createanarticleinthecategory-FormsWorkshop

Inthearticle:

1. type:Clickheretoregisterfortheformsworkshop2. Highlighttheentireline3. ClickontheLINKBUTTON(intheeditor)4. Setupthelinkpropertiesasbelow

CopytheURLonthetopofthepage

PuttheURLintoanarticleonyourjoomlawebsite.

1.PastetheURLtotheform

2.SettheTARGET=OpeninNewWindow

Page 20: Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates the process of updating information from the more technical aspects of updating

Joomla!WorkingwithFormsinJoomla!2018

20

5.SettheCLASS=BUTTON(Ifyouwantthelinktolooklikeabutton)