Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates...
Transcript of Work with Forms in Joomla (Visforms and SAS Invite System) · A content management system isolates...
WorkwithFormsinJoomla(VisformsandSASInviteSystem)InstructorforthisWorkshop–LauraGordon
WebDevelopment
SchoolofArtsandSciences
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
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.
Joomla!WorkingwithFormsinJoomla!2018
4
WORKWITHVISFORMSVisformsisaformtoolinJoomlathatcancollectdata.Thisinformationcanbesavedinatableandexportedeasilyto.xlsortoaccessasa.csvfile.Thedatacanalsobedisplayedonawebsiteifneeded.
Theformsare100%customizabledifferentfieldscanbecreateddependingonwhatinformationyouneedtocollect.
CREATEANEWFORM/FORMPROPERTIESComponents-!VISFORMS
CreateaCOPYofaForm
1.Selecttheform
2.ClickonBATCH
ClickonYESforcopyexistingfields
Page 5
CreateaNewForm
BasicFormProperties
ClickNewForm
Basic
FormTitle–Displayedtitle
Name:Cannothavespaces
Canleavetherestblank
Joomla!WorkingwithFormsinJoomla!2018
6
Result
MailOptions
Result
SaveResultàYES
ThismeansdatawillbeSTOREDwhentheformiscompleted
TextResult
Thisisdisplayedaftertheformiscompleted,suchas,‘Thankyouforregistering’
RedirectURL
Ifyoupreferfortheusertobetakentoadifferentpageaftertheformiscompleted.
ToppartofthispagereferencestheADMINMail,orthesiteOwnerEmail,specifyifyouwanttheperson‘runningtheevent’toreceiveanemailandthedetailsyouwantthemtoreceive.
Page 7
OptionsforRecipientMail
TheseoptionsaredefinedforthepersonthatisFILLINGouttheform.
SpamProtection
Ifyouwantthefieldsthattheyfilledoutincludedintheemail,clickIncludeData=Yes
• ScrolltowardsthebottomoftheoptionstoCAPTCHAS
• Someusersprefertheregular‘recaptchaplugin’(insteadofthevisformscaptcha)
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
TextArea
RadioButton
TextAreaisgoodfora‘largetext’fieldsuchas‘comments’,‘instructions’.
RadioButtonworkslikea‘checkboxgroup’.ExceptonlyONEoptioncanbeselectedatatime(notmultipleitems)
Joomla!WorkingwithFormsinJoomla!2018
10
FileUpload
Select
Fileuploadallowsafiletobeuploadedwiththeform.This‘pdf’canbestoredonthewebsite.
Thisfieldtypeisgoodifyouwanttoincludean‘uploadofaabstract’forexample.
PleasekeepinmindfilesthatareuploadedshouldNOTcontainpersonalinformation.Anythingthatisuploadedcouldbeaccessedtothepublic.
Weareintheprocessofcreatingourfileuploadpolicy.
SelectworkssimilartotheMultipleCheckBoxGroup.
Toallowfor‘multipleitems’tobeselected,checkoffthe‘multipleitems’.
Page 11
SubmitButton
AdvancedTabonallFields
Thesubmitbuttonisthe‘SEND’buttontosubmittheform.
ClickontheADVANCEDTAB
CustomTextPosition:
• BelowInput• AboveLabel• AboveInput
Customtextisthetexttobedisplayed.
Joomla!WorkingwithFormsinJoomla!2018
12
WORKWITHDATARESULTSAslongastheformwassettoSTOREDATAresults,itiseasytodisplaythedataresultsinthebackend,exporttoa.csv,oronthefrontend.
Visitvisforms–WorkwithForms
ClickDisplayData
ClickEXPORTDatatobringdatainto.csvor.xls
ClickBacktoFormtoreturntoForm
FORMStogetbacktothelistingofallforms.
Page 13
CREATEFORMSMENUITEM
1.CreatenewMenuitem!Menus!MainMenu!AddnewMenuItem
2.Detailsforthenewmenuitem
1.Nameit
2.Menuitemtype:visforms/Form
3.Selecttheform
4.Forthisclass,putitinparentitemFORMSWORKSHOP
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
TYPESOFPAGESAMPLES
LANDINGPAGEThispageallowsyoutohavea‘landingpage’formultipleevents(priortothemoccurring).Youcanselectwhicheventsyouwanttoappearonaspecificlandingpage.Forexampleifyouhavespecificseminarsinaspecificgrouping,theycanbegroupedtogetherhere.
EVENTPAGEThese‘eventpages’areforspecificclasses/Events
SampleEventPage:
CREATEANEVENTPAGEOPTIONS
Joomla!WorkingwithFormsinJoomla!2018
16
SINGLEEVENTOPTIONS
RequirenetidAuthenticationmeansthatthepersonmustlogintotheCASloginsysteminordertoregister(thisisoptional)
Itispossibletoaskanadditionalquestionofyourguests.
Oncethefirstquestionisasked(canuseyes/no,select,text,etc)
Itispossibletoaskadditionalquestionsaswell.
Page 17
EDITEXISTINGEVENTOncetheeventiscreated,youcanvisityoureventspage,toviewthelistofevents:
https://secure.sas.rutgers.edu/apps/invite/host
Itispossibletoaddmoreinformationabouttheevent,includingaddinganadditionaladministrator:
Joomla!WorkingwithFormsinJoomla!2018
18
MANAGEGUESTLISTItispossibletochangethepersonsresponse/rsvp,viewdetails
Exporttheguestlist,emailreminderstoguests,etc.
Page 19
ADDLINKTOWEBSITE
COPYTHEURLFORTHEFORMFIRST
CREATENEWARTICLEFortheworkshop,createanarticleinthecategory-FormsWorkshop
Inthearticle:
1. type:Clickheretoregisterfortheformsworkshop2. Highlighttheentireline3. ClickontheLINKBUTTON(intheeditor)4. Setupthelinkpropertiesasbelow
CopytheURLonthetopofthepage
PuttheURLintoanarticleonyourjoomlawebsite.
1.PastetheURLtotheform
2.SettheTARGET=OpeninNewWindow
Joomla!WorkingwithFormsinJoomla!2018
20
5.SettheCLASS=BUTTON(Ifyouwantthelinktolooklikeabutton)