>>>>
Widgets, Carousels, Forms & Other Elements

Widgets, Carousels, Forms & Other Elements


A guide on how to use widgets, carousels, forms and other elements on your website 

Logging in

To start managing your website the first step is to login to your website. The website address to edit your website is always your main website and “/admin” at the end i.e. http://mycommunitywebsite.onesuffolk.net/admin

Simply go to this address and then insert your username and password and click “login


 

Widgets

Widgets are nicely formatted boxes that display some form of information – usually in a left or right hand navigation bar. Within the new One Suffolk Silverstripe software there are a variety of different types of widgets you can have on your website. These are listed below with descriptions against them of they are and how you need to work with them.

  • Blog Date Archive Widget – Shows a summary of no of news item per month

Requires no further setup or interaction with parts of the system – simply add and go.

  • Post Classified Advert Widget – Adds ability to end users to post Classified Ads from the website using a box on the left or right hand side of any page

Requires no further setup or interaction with parts of the system – simply add and go.

  • Calendar Widget – Adds a small calendar to the left or right hand side of any page

Requires no further setup or interaction with parts of the system – simply add and go.

  • Facebook Feed Widget – Adds a facebook feed to the left or right hand side of any page

Requires you to setup the feed in the Services section first

  • Form Widget – Adds a small form box to the left or right hand side of any page

Requires you to add a shortcode to the form in the content area of the page

  • Instagram Feed Widget - Adds a Instagram feed to the left or right hand side of any page (NO LONGER WORKS DUE TO INSTAGRAM CHANGE)

Requires you to setup the feed in the Services section first

  • Mailchimp Subscribe Widget - Adds a Mailchimp subscribe form feed to the left or right hand side of any page (NO LONGER WORKS DUE TO MAILCHIMP CHANGE)

Requires you to setup the feed in the Services section first

  • Poll Widget - Adds a poll to the left or right hand side of any page

Some small setup is required in the widget – simply link to the poll you want to link to

  • Testimonials Slider Widget - Adds a testimonials box  to the left or right hand side of any page showing all your testimonials

Requires no further setup or interaction with parts of the system – simply add and go.

  • Twitter Feed Widget - Adds a twitter feed to the left or right hand side of any page

Requires you to setup the feed in the Services section first

  • Gallery Widget - Adds a small gallery box to the left or right hand side of any page

Some small setup is required in the widget – simply link to the gallery you want to link to

  • Categories Widget – Will show event categories, news categories or classified categories to the left or right hand side of any page

Requires no further setup or interaction with parts of the system – simply add and go.

  • Google Maps Widget - Adds a small Google map to the left or right hand side of any page

Some small setup is required in the widget – simply add the address

  • Asset Listing Widget – Adds a box that displays files of your choosing to the left or right hand side of any page

Requires you to change a number of settings in the widget

  • Site Navigation -  Adds a navigation bar to the left or right hand side of any page

Requires no further setup or interaction with parts of the system – simply add and go.

  • Tags Widget -– Will show event tags or news tags in a box on the right or left of any page

Requires no further setup or interaction with parts of the system – simply add and go.

  • Video Widget - - Adds a small video box to the left or right hand side of any page

Some small setup is required in the widget – simply add the video website address

  • RSS Widget – Adds a box to the left or right hand side of your page that displays an RSS feed of your choice.

Add the service first and then choose the feed in the widget setup

  • Recent Posts Widget – Will show the most recent event items, news  items or classified ad’’s to the left or right hand side of any page

Requires no further setup or interaction with parts of the system – simply add and go.

  • Site Search Widget -  Adds a search box to the left or right hand side of any page

Requires no further setup or interaction with parts of the system – simply add and go

  • Social Media Icons Widget – Adds a nicely formatted box with all your social media icons in them

Some small setup is required in the widget – simply add the social media and feeds you require

  • HTML Widget – Allows you to have a box with any HTML code you need in it

Some setup within the widget is required. Copy and paste the HTML code in that you require.

Widget Areas

Widgets are set in what we call “Widget Areas”. These are groupings of 1 or more widgets that will get displayed together - think of a widget area as a container for the widgets. 

A widget area can be displayed on any page on your website and they can be used multiple times.

To access widget areas click on "Elements" on the left hand side and then click on "Widget Areas" along the top.

To then access a specific widget area click on one of them in the list on the screen (as shown below)

widgetareas

Once you have clicked on them you will then see all the widgets you have in that widget area.

To add a new widget area just click on the "Add Widget Area" button on the screen above and give your Widget a name and start adding widgets to them.

Finding out which Widget Areas are used on which page

Before adding widgets, if you are unsure which page uses which widget area then simply click on “Elements” down the left hand side and then on the “Elements” page click on “Widget Areas” and then click on the widget area you want to check. As shown on the images below, from here, click on the "show pages using this widget area" link and then on the screen it will show you all the pages on your site using that widget area. If it says "Widgets hidden by template" next to the listing then it means that the widget area is set on the page but the page itself is a full page layout so therefore won't get displayed.

show pages using widget areas

 

 

widgetpages list2

Adding Widgets

I won’t detail how to add every single Widget as most of them follow the same logic and require no further changes once added but I will give instructions on the core things you need to remember and to show you specifically how to add some of the more critical widgets.

In this version of the One Suffolk Silverstripe software, one of the big differences is that you can choose to have a side bar on the left or right hand side or you can have no sidebar at all – and this is completely changeable on a page by page basis. This means that you are not limited to having side bars or no side bars on the whole site. This gives you a lot more flexibility.

This is important to know because widgets only work in side bars. If you do not set a page to have a sidebar in the “Page Settings” tab (which was detailed in our Pages guide) then widgets will not appear.  

To add a widget to any of the widget areas click on “Elements” down the left hand side and then on the “Elements” page click on “Widget Areas” along the top and then you will see a screen like the one below.

widgetarea

To add or remove widgets to these simply click on the one you wish to edit and then you will see any widgets you have in your widget area.  To add a new one click “Add Widget” and then you will be greeted with a screen like on the next page.

widgetnew

From here you need to give your Widget a name in the “Widget Heading” box and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.

The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown (think of this as "choose widget") and selecting the one from the list. In this example we will add the “Asset Listing” widget to the widget area. The Asset Listing is what a number of Parish Councils use to display a set of files in a set folder on a website down the left hand or right hand side.

Ensure you click “Create” after you have selected “Asset Listing”.

The Asset Listing widget has a number of unique settings – like the ones shows in the screen shot on the next page.

 widgetinfo

One new feature in this version of the One Suffolk Silverstripe software is the ability to either choose all the files in a folder (like the old software) or you can pick and choose which files from any set of folders you want to add to your box on the website. To set this, click on the “Media to show” dropdown and select  “Choose Assets to show” if you want to pick and choose your files.

If you want to just list all of the files in a folder , like it does in the old version of the software then select “All assets in a folder” and select the folder on your Files section which you want to use in the “Folder” box below.

If you do want to pick and choose your files and you have set the “Choose Assets to show”  option then the bottom section of the page is where you add your files. You can either just add them from your computer or from your File Store.

If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click Open to upload them. If you want to upload multiple files at once then the new upgraded system allows you to do this. Simply click on the first item you want to upload, then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click Open.

If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your image gallery and click “attach files”.

You can also add multiple files at once in the File Store, simply click the first item you want to add then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click “attach files”.

Click "Save" when done.

Setting your widget area on the page

Now that you have created your widget area and widgets the final task is to actually set this on the page so that it displays your widgets.

To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.

Adding a Twitter Widget

Another widget example we could use is if you wanted to add a widget that displayed your organisation’s twitter feed on it. With the Twitter, Instagram, Facebook & Mailchimp widgets you first have to set up the feed on the “Services” option down the left hand side. Click on this and then along the top you will see tabs for each one of these.

Click on “Twitter” and then click the “Add Twitter Feed” button. On the page that comes up (see below screenshot) give your feed a title and then enter in the TwitterID of the twitter page of your organisation (usually this is the bit after the @ in your twitter name.

Click “Create

twitter 

Once you have created your feed on the site you can then add the widget to your site. To do this, click “Add Widget” and then From here you need to give your Widget a name in the “Widget Heading” box and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.

The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown and selecting “Twitter Widget” from the list. Click “Create” and the final step is to set which feed you want to display as you can setup multiple feeds. In the “Choose Feed” dropdown select the feed and click “Save” and then your website will show your organisation’s twitter feed on the left or right hand bar of the page you choose to show your widget area.

Setting your widget area on the page

Now that you have created your widget area and widgets the final task is to actually set this on the page so that it displays your widgets.

To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.

Adding an Instagram Widget

One Suffolk used to provide an official Instagram widget but due to changes Instagram have made this will no longer be possible. However, there is an alternative method of adding your own Instagram widget to your site - to add it to your site follow the instructions below.

To add the Instagram widget to any of the widget areas click on “Elements” down the left hand side and then on the “Elements” page click on “Widget Areas” along the top and then you will see a screen like the one below.

widgetarea

To add or remove widgets to these simply click on the one you wish to edit and then you will see any widgets you have in your widget area.  To add an instagram widget click “Add Widget” and then you will be greeted with a screen like on the next page.

widgetnew

Type in the word "Instagram" into the "Widget Heading" box, tick the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box. On "Choose Field Type" you need to select the "HTML Widget" and then click "Create". Once you have done that you then need to visit an external site - https://instawidget.net/generate. (keep the one suffolk site open) 

Once you are on this site you simply need to type in the username of your Instagram account in the username box on this page (shown below).

instagram

Once you have done this click "Preview" and then click "Get Embed Code" and copy and paste all the code in the "Widget Content" box into your One Suffolk page that should still be up. Click "Save" when you are done and your widget should be setup.

Setting your widget area on the page

Now that you have created your widget area and widgets the final task is to actually set this on the page so that it displays your widgets.

To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.

Adding a Facebook Widget

With a Facebook widget you first have to set up the feed on the “Services” option down the left hand side. Click on this and then along the top you will see a Facebook tab.

Click on “Facebook” and then click the “Add Facebook Feed” button. On the page that comes up give your feed a title and then enter in the Facebook website address of the facebook page of your organisation (copy and paste it from the Internet) into the "Facebook ID" box. (see screenshot below)

facebook 

Click “Create

Once you have created your feed on the site you can then add the widget to your site. To do this, click “Add Widget” and then From here you need to give your Widget a name in the “Widget Heading” box and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.

The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown and selecting “Facebook Feed Widget” from the list. Click “Create” and the final step is to set which feed you want to display as you can setup multiple feeds. In the “Choose Feed” dropdown select the feed and click “Save” and then your website will show your organisation’s Facebook feed on the left or right hand bar of the page you choose to show your widget area.

Setting your widget area on the page

Now that you have created your widget area and widgets the final task is to actually set this on the page so that it displays your widgets.

To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.

Adding a Google Maps Widget

To add a Google Maps widget click on “Elements” down the left hand side and then click on “Widget Areas” along the top.

To add or remove widgets to these simply click on the widget area you wish to edit and then you will see any widgets you have in your widget area.  To add a new one click “Add Widget” and then you will be greeted with a screen like the one below.

widgetnew

From here you need to give your Widget a name in the “Widget Heading” box i.e. Map, and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.

The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown (think of this as "choose widget") and selecting the one from the list. In this example we will choose “Google Maps” so that it adds this widget to the widget area.

Click "Create" when you have done this.

Once you have clicked create you then need to put the Address you want the map to in the "Address" box. Usually this is just the post code but you can enter the full address in here too. Once you are happy with this click "Save"

Setting your widget area on the page

Now that you have created your widget area and widgets the final task is to actually set this on the page so that it displays your widgets.

To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.

Adding a Recent Posts (or latest news/events) Widget

Note: The recent posts widget will display the latest 5 news or events items in the system.

To add a Recent Posts widget click on “Elements” down the left hand side and then click on “Widget Areas” along the top.

To add or remove widgets to these simply click on the widget area you wish to edit and then you will see any widgets you have in your widget area.  To add a new one click “Add Widget” and then you will be greeted with a screen like the one below.

widgetnew

From here you need to give your Widget a name in the “Widget Heading” box i.e. Map, and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.

The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown (think of this as "choose widget") and selecting the one from the list. In this example we will choose “Recent Posts” so that it adds this widget to the widget area.

Click "Create" when you have done this.

recentposts

Once you have clicked create you then need to decide whether it's the latest news (blog posts) or events you want to display in your widget. In the "Choose Posts to show" box, click either "Blog Posts" or "Events" and then on the "Amount of posts to show" box type in the number of news or events items you want to show in your widget. Once you have done click "Save".

Setting your widget area on the page

Now that you have created your widget area and widget the final task is to actually set this on the page so that it displays your widgets.

To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.

Deleting Widgets

To delete a widget, click on “Elements” down the left hand side and then on the “Elements” page click on “Widget Areas” along the top. From here click on the widget area you want to delete a widget from and then click on the red cross next to it.

Widget Summary

Most widgets we have developed can simply be added to the widget area and this is all you need to do but some do need additional setup like in the case of the Asset Listing, Twitter, Facebook, Instagram, Mailchimp ones.

Or alternatively like the Gallery widget they work with other parts of the system i.e. the “Image Galleries” section under “Elements


Carousels

Carousels are a slide show set of images usually used on the Home Page of your site.

It is quite straightforward to add a Carousel to your home page. Firstly you need to add that Carousel and then on your Home Page Settings you need to ensure you have set this to be displayed on there.

Adding the Carousel

To add a carousel click on “Elements” down the left hand side and then on the “Elements” page click on “Carousels” along the top and then it will take you to a page which lists any Carousels you may have. From here click “Add Carousel” and then you will be greeted with options shown in the image below.

carousel

Give your Carousel a Title by typing into the “Title” box. Set whether you want your Carousel to move your slides in standard slideshow mode or whether you want them to fade out by selecting the appropriate option on the “Slide Animation” dropdown and also set a time in milliseconds in which you want the slides to change (transition) by typing in a figure in the “Slide Transition” box. We recommending using the figure 6000 which is 6 seconds but you have freedom to change this to whatever – just remember this figure is in milliseconds.

We also recommend you select the “Show Slide Controls” and the “Show Slide Indicator” tick boxes as this will allow the user to move through your Carousel at their own pace if they wish. Once you have done all of this click “Create”. Once you have done this a new section will be added to your screen giving you the ability to add your slides. To do this click “Add Slide” and then you will see a screen like the one below.

carouselslide

On this screen, if you want text to overlay your image then type something into the “Title” and “Slide Text” boxes. If you don’t want text to overlay your image we still recommend giving your slide a Title so you can find it on the list easily but if you do this then tick the “hide slide text” box and then it won’t appear on your image.  Likewise if you want your slide to link to another website or page on your website then type text into the “Link/Button Text” and “Link Button URL” fields. Please note on the Link Button URL field you will need to enter the full website address to link to i.e. http://www.bbc.co.uk. You can even set whether you want the slide text aligned either left or centre within the slide by choosing the appropriate option on the “Slider Text Alignment” dropdown.

The final element of this is to add your image. Choose whether you want to upload a new image from your computer or from the File store. If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click "Open" to upload them.

If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your carousel and click “attach files”.

Once you have done all this click “Create

Setting the Carousel to show

The final stage in this process is to actually set the Carousel to show on your page (it can be shown on any page, not just the Home Page).

To do this click “Pages” along the left hand side, click on your Home Page (for example), click on “Page Settings”, ensure you click “Show Carousel” and then underneath that option select the Carousel you want to show by using the “Choose a Carousel” dropdown. Click “Save and Publish” when done.

Editing a Carousel

To edit a carousel click on “Elements” down the left hand side and then on the “Elements” page click on “Carousels” along the top and then it will take you to a page which lists any Carousels you may have. From here click on the Carousel you want to edit. You will then be taken to a screen where you will see all the different  Carousel slides you have. From here you can then choose to add additional ones or remove the current one or indeed edit the existing one.

To edit the existing one, click on the white edit symbol (shown below)

edit slide

From here you can change the text that overlays your slide, change the links that the slide links to and even replace the image with something else. If you want to replace the image then click “Choose Another Image” and this will take you to the place where you can either pick from the File Store or you can upload a new one.

Adding a slide to the Carousel

To add a slide click “Add Slide” and then Choose whether you want to upload a new image from your computer or from the File store. If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click “Open” to upload them.

If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your carousel and click “attach files”. If you want your slide to have text overlaying on it then type that into the Title box. Once you have done all this click “Create

Deleting a slide from the Carousel

To delete a slide, simply click the red cross next to the slide you want to delete.


 

Image Galleries

There is an important distinction in this system between the Image Gallery Page type and Image Galleries. Image Galleries are what are used in Widgets, whilst the Image Gallery Page type is what is used if you want a full screen image gallery to be shown on a page.

Adding an Image Gallery (as a page)

To add an Image Gallery to your website as a page (like the one shown below) then please follow these instructions.

imagegallerypage

 

Click on "Pages" down the left hand side.

Click on "Add New" and then you will be greeted by a screen like the one below.

imagegallerypagetype

From here choose where you want to create the page i.e. where do you want it to appear in the menu. If you want it to appear in the top menu then choose "Top Level", whilst if you want it to appear as a sub page underneath another page then choose "Under Another Page" and select the page from the drop down that you want it to appear under.

Also on this page you will need to select "Gallery Page" from under the second set of options. Once you have done this click "Create" and you will be greeted with a screen like the one below.

imagegallerypagecreate

On this screen, in the "Page Name" box type in a relevant page name for your image gallery and do the same for the "Navigation Label" box and once you are happy with that then start adding your images in the "Choose Images" section. From here you can choose to upload new images at this point by using the "From Your Computer" option or you can add images to your image gallery that have already been uploaded by using the "From Files" option. If you use the "From Your Computer" option then once you click on this you will be greeted by a screen which shows your computer. From here, choose the images you want to upload and then double click on them to upload and add the image to your gallery. Please note if you upload them at this point they will go to the default "Uploads" folder. We recommend that you always upload files or images before you start to work with them. If you choose the "From Files" option then you will be greeted by a screen that shows you all the images already uploaded. To add one of these to your gallery, simply click on the specific image and then click "Attach image" and your image will be added to the gallery. Continue adding images until you are happy with the ones you have added.

Once you are happy with your gallery click "Save and Publish" to put your gallery live onto your site. If you still wish to edit your gallery then simply click "Saved" and continue working on it.

Once you have published your gallery then if you ever want to edit it further, click on "Pages" down the left hand side, choose your gallery page and then in the "Choose Images" section simply start adding new images to it by using the "From Your Computer" option or "From Files" option. 

Captions & Titles

If you want to add a caption to display under the image on the gallery page then ensure that in the Image Properties (click on the "edit" button on the image you have uploaded) that there is some text in the caption box and then click "save" at the bottom. Once you have done this you need to ensure you tick the "show captions" box underneath all your images and then click "Save and Publish".

If you set a piece of text in the "title" field then this will be displayed on the image. This may help inform visitors about what the image is about. To get to the "Title" field on your gallery page simply choose the image you want to add the caption on and then click "edit" and then type in the text you want in the "Title" field.

Adding the Image Gallery (as a widget down the left or right hand side)

To add a image gallery click on “Elements” down the left hand side and then on the “Elements” page click on “Image Galleries” along the top and then it will take you to a page which lists any Image Galleries you may have. From here click “Add Image Gallery” and then you will be greeted with options shown in the image below.

imagegallery

Simply give your gallery a title by typing into the “Title” box and then you can go straight into adding your images.

Choose whether you want to upload a new image from your computer or from the File store. If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click "Open" to upload them. If you want to upload multiple images at once then the new upgraded system allows you to do this. Simply click on the first item you want to upload, then hold down the “CTRL” key on your keyboard and then select all the other images you want to upload and then click "Open".

If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your gallery and click “attach files”. You can also add multiple images at once in the File Store, simply click the first item you want to add then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click “attach files”.

Once you have done all this click “Create

To then use your image gallery on a page, using our previous instructions on adding widgets and add the “Image Gallery” widget to the “Default Widget Area” and within this ensure you set the right image gallery to show using the “Choose Gallery” dropdown. 


 

Forms

Forms (for users to fill in and complete, and the results to be emailed to a set email address) can be setup on your One Suffolk website. There are 2 elements to this process – setting up the form and then adding it to your page.

Creating your form

To add a form, click on “Elements” down the left hand side and then on the “Elements” page click on “Forms” along the top and then it will take you to a page which lists any forms you may have. From here click “Add Form” and then give your form a title by typing in text into the “Title” box you and then finally click “Create” and then you will be greeted with options shown in the image below.

formfield

Once on this screen, click “Add Form Field” to add a field to your form. Once you have done, a following screen will ask you for the “Title” or Name of the field and also ask you what field type you want it to be. You can select which field type by clicking on the “Choose Field Type” dropdown and selecting from the list.

The field type list includes 10 different options – listed below.

Checkbox – Select one box from many

Date/Time – Date & Time Field

Dropdown – Select from a drop down list

Email Address – Limited to Email addresses

Multiple Select – Select 1 or many from a sect of options

Numeric – Number only field

Phone Number – Phone Number only field

Read Only – Displayed a non editable field to the user

Text Area – A large area for users to input text

Text – A small character restricted area for users to input text

 

Once you have chosen your field, click “Create

Depending on the field type it may then prompt you with additional options about that field. Those screens should be self explanatory but because there are so many it is not possible to detail them all in this guide. 

Once you have setup all your fields you then need to set up your email settings so that you get the responses to the forms. To do this, click the “Email Settings” tab at the top of the form screen.

form2

On there you will need to set your email address that the form results will go to in the “Send emails to” box. The second part of the screen is the “Email Template” box.

This is a little more complex but it can be as difficult as you need to make it. If you are not too worried about the format of the emails you get then you can just copy and paste the “Available Variables” which are listed on the screen into the “Email Template” box and click “Save”. If you do want to format it more nicely then try and add some paragraphs, headings and spacing to it. Please note though to leave the coding as it is on the Available Variables otherwise you may find that you don’t get the desired results from people completing the form.

Adding your form to your page

Now you have created your form you then need to add it to the page.

First, we recommend that you find your “Shortcode”. This can be found by going to the main “Forms” section (Click on Elements and then Forms) where all your forms are stored and your “Shortcode” will be listed next to the form in question.

Once you have the “Shortcode”, you need to add a text area to the page you want to add the form to. To do this, click on “Pages” along the left hand side and then select the page you want to add the form to.

Once on there you will need to add a new “text area” by using the controls below. We recommend clicking on the “Single Column” option on the left of the 3 black options. On here click the + symbol and then your text area will be added to the page.

contentareanew

Now you have your text area you can then add your form to it. Copy and paste the “Shortcode”  into the text area you created and then click "Save and Publish" and then your form will be added to your page.

When a user submits their form the email set in the “Email Settings” tab should get a response. However, you can also check any submissions by clicking on “Elements” down the left hand side and then by clicking on “Form Submissions” along the top.

Adding a Captcha to your page

 

To add a Captcha to your page to help prevent unwanted spam go to your form which is available in “Elements” on the left hand side and then “Forms” along the top. Once you have clicked into the form click “Add Form Field” and then select “Captcha field” and give it a title. Click “Save” when you are done.

 


 

Polls

Polls are short surveys you may want your users to engage in. These can only be used in widgets on a left or right hand navigation bar.

To create a poll, simply click on “Polls” down the left hand side and a page with all your Polls (if you have any) will be shown. From here click “Add Poll” and a screen like the one below will be shown.

poll

Give your Poll a Title (or question if that is what you are asking) in the “Poll Question/Title” box and if you want to allow users to choose multiple answers then put a tick in the “Allow Multiple Answers” tick box. Once you have done this, click “Create” and then you will have the option of adding your “Poll Answers”. To do this click “Add Answer” and then type in some text into the next screen where it says “Poll Answer” and once finished click “Save

poll2

To add more than 1 poll answer go back to the Poll and continue to add them until you are happy.

Adding your Poll Widget

To then use your image gallery on a page, using our previous instructions on adding widgets and add the “Poll” widget to the “Default Widget Area” and within this ensure you set the right poll to show using the “Poll” dropdown.

You also need to ensure that you have set the “Default Widget Area” to display on the page of your choosing.

On your page that you are using the widget area your page should now be showing. The results of the poll can be seen on the live website as soon as you start getting results. There is a small “View Results” link below the poll when these start coming in.


 

Classified Ads

Classified Ad’s (Adverts) are one of the new elements of the upgraded One Suffolk Silverstripe system. It essentially offers any organisation the ability to display adverts on their website in a nicely displayed format.  Using a widget you can even allow for users to submit their adverts via the website if desired.

Classifieds work very similar to News and Events. To add a Classified Advert to the system simply click “Classifieds” on the left hand side and then a list of all your classifieds will appear. Click “Add Classified Advert” and you will be greeted with a screen like the one below.

advert

As with the News and Events sections, simply fill out as much information in the boxes that you want or need to. I would hope that it is fairly self explanatory. If you do have an image for it then I recommend inserting one using the “Images” section at the bottom of the page.

Choose whether you want to upload a new image from your computer or from the File store. If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click "Open" to upload them.

If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your advert and click “attach files”.

Click “Create” when you are done.

Adding the Classified Ad’s Page to your site

The final step is to create your classified ad’s page. To do this, click “Pages” on the left hand side, click “Add new”.

From here you can choose whether you want this to be a “top level” page i.e. one that appears in the main menu or “under a page” i.e. a sub page underneath another page. Select which one you wish to select. Once you have done this select the type of page you wish to create (in this case it will be a “Classifieds Page”) and then click “Create”.

Once you have done this it will then simply display all your adverts on your site. No further setup is required.

RSS Feeds

 

There are 2 options with RSS feeds in your One Suffolk website. You can pull in a feed from another provider and add them to a widget or you can use your news items to create your own RSS feed and then other people can use this.

Pulling in a Feed from another provider

Click on "Services" down the left hand side and then click on "RSS Feeds" along the top and then you will be greeted with a screen like the one below.

rss

From here click on the "Add RSS Feed" button and then you will be greeted with a screen like the one below.

rss2

On here, give your feed a Title by typing into the "Title" box.

Put the feed address into the "Feed URL" box (this must be a full website address) for example "http://feeds.bbci.co.uk/news/rss.xml?edition=uk

And then finally set how many posts from the feed you want to display on the widget in the "Post Limit" field. We recommend 5 but you can have as many as you like.

Once done click "Create".