Publish Form Submissions On An Office 365 Sharepoint Online 2010/2013 Public Site

In our article: “Create a custom form on your public site ” we covered how to get a Google Docs form onto your O365 site to collect data. If you’re looking to publish visitor comments, feedback or any other data submitted through the form back to the site, here’s how:
Since Google stores submitted data in a spreadsheet, what you need to do is simply embed that spreadsheet on your page.

Open the spreadsheet version of the form in Google Docs.
Click the”Share” button up top and select “Publish as a web page”.
Click the”start publishing button”.
Copy the url that opens in the box.
Enter this code in an html module:

Adjust the url, height and width as necessary.

Click here to see a working example.

A note on spam

We’ve never had much of a problem with Google forms, but if you start getting spurious submissions, you can add a validation field to filter out non human submissions (in Google Docs, go to ‘Data / Validate’). If you still get spam, the best defense is to change the url your form is under so the spammers submit to a url that doesn’t exist.
To do that, save your iframe code in notepad as an .aspx file, upload it to documents and iframe that document on your page instead of the Google code. If you periodically change the file name and reupload it you will foil the spam bots who can only post to a url-which of course you’ve changed.

Create a custom form on your Office 365 2010/2013 public site

Allowing your site visitors to leave feedback, register for an event or interact in other ways via forms is an essential component of any web site. This was easy in OLSB but unfortunately the Sharepoint form building and data capture features have been removed from the Office 365 public web site offering. There are many 3rd party options available to embed a form but the closest equivalent to a Sharepoint form is probably Google Docs because it offers a very simple and effective way to capture visitor submissions in a convenient spreadsheet in the same way SP populates a list.If you want to see if this fits your needs, click here to see a working example.1: Create the form
First, in your Google Docs account click “Create new” – “Form”

365forms1

Configure your questions. You can choose from a variety of field formats including multiple choice and checkbox.

365forms2

This will create a corresponding spreadsheet with each question forming the column header.
Go to the list of your docs and open the form you created which will open the spreadsheet version
Click”Share” up top and change the settings to “Public on the web”

365forms4

Under “Form”, click “Embed form in a web page”
Copy the code.

365forms5

2: Embed on a page
2010 style site: Paste the copied code into an html module on your O365 public site page. If you find Google’s code and the html module don’t mesh well together and throw errors like “url not found” or “this content can’t be shown in an iframe”, click here to use our generator which will configure the code for you.
2013 style site: Either insert a “page viewer web part” and enter JUST THE FORM URL. Or copy the Google “embed code” and enter the whole thing in an embed code web part.

Advanced features
You can also:
Add an alert and get emailed when a submission is made
Choose a template background
Add a validation field to deter spam

How it looks
The basic form should look like this on an O365 page. You can of course style the form anyway you want with the provided tools or add your own css. You can see a working example of a form (and published submission spreadsheet) on a 365 site by clicking here.

365forms6

Any submissions you get will be stored in the spreadsheet so you can sort, filter, and manipulate the data as you choose. If you want to publish submissions back to your site-for instance customer feedback, you can do that easily too. Please click here to see a how to article.

It’s a bit troubling that we have to resort to a 3rd party solution for such a basic functionality as adding a form (especially from Google!) Hopefully, MSFT finds it troubling too and will restore the list publishing and form building capabilities to O365 so we no longer have to.

Disappearing images? The easy way to update your image links

?If you followed the transition guide instructions and pasted your OLSB content to your 365 site and all of a sudden your images have disappeared, here’s an easy fix which doesn’t require reinserting all those images: The logic
When you paste, you’re actually only pasting a LINK to a location that no longer exists when your OLSB site is deleted. All that’s needed is to update those links to point to your 365 image gallery.
Probably the easiest way is to update the file paths in notepad.

Upload all your images from the recovery file to your image gallery
Open a document library in your team site
Click the library tab and then “Open With Explorer”
Use the nav arrow to navigate up to your”web site”
Click the”Pages” folder and you should now see all your page files Right click one and select “open with notepad”.
Find one image so you can identify the path being used.
If you pasted it will probably be your OLSB domain + /Images + file name
Assuming the file name is the same, you want to replace the OLSB domain and the Images folder
Under Edit, select”find and replace”
Enter the old path in the first pane and /SiteImages/ in the 2nd pane.
For example:replace http://myolsbsite.com/Images/ *with* /SiteImages/
Hit replace all and all the paths will be updated.

If you’re comfortable using Sharepoint Designer, you can actually update yourentire site with one click. Open a page in SPD, click “Replace” in the ribbon and enter the same find and replace text as above. Select “all pages” and click ok.
Keep in mind this will change every page and file in your site so make sure it’s what you want to do and the text is correct. The only undo available is to reverse the process!

Create a public blog site in Office 365 Sharepoint 2010

Applies to: Sharepoint 2010! It’s easy enough to add a blog sub site to your Office 365 public site. First, open your Team Site and go to site actions / site settings / site collection admin / go to top level site settings / site admin / sites and workspaces.
Or you can append _layouts/mngsubwebs.aspx to your domain which will take you to the same place.

blog1

Next, click create and give your blog site a name and an address. Under “Template selection” choose the “blog” template from the “collaboration” tab and click “create” at the bottom.

 

This will add a blog subsite to your public site. Now when you’re logged in, you’ll see a “blog tools” navigation area on the right which is how you manage your blog. Easy, huh? But the problem is even though the blog is a sub site of the public site, and should inherit it’s anonymous access setting, there’s no way to grant anon access to the associated comments/categories lists. They will trigger a log in because of the way 365 is configured, so it’s not of much use.
Fortunately, a 365 user named Martin Hatch has come up with a very user friendly solution to allow anonymous access to ALL areas of your blog. This has been tested to work in P and E type accounts. (Just like OLSB, it’s the user community that’s going to make O365 a more useful product!)
Click here for Mr Hatch’s article which outlines what you need to do. But since OLSB refugees may not be familiar with the steps involved I’ll give a bit more detail.

First download the .wsp file from the article.
Then open your Team Site and go to site actions / site settings / site collection admin / go to top level site settings / galleries / solutions and click the “solutions” tab. (You can also append _catalogs/solutions/Forms/AllItems.aspx to your public site domain to get there faster).
In the ribbon, click “upload solution” and select the wsp file you downloaded.

365_upsol

Check the box next to “HatchSolutions.Office365.BlogPermissions” and click “Activate” in the ribbon.
Now go back to “website” (append /Pages/Forms/AllItems.aspx to your website domain if it’s easier)
Open the blog sub site you created. Click “site actions” and “Edit page”.
Under the “Page tools” tab, click “insert”.

blog3

Click “More web parts” and you’ll see all the web parts available to this site. You should see “Hatch solutions” in the left nav-click it and select the “Set anon blog permissions” icon.

blog4

Click “Add” on the right and you’re done! The code that runs in the solution has done its job and changed the permission settings for your blog site, so you can now delete the web part if you like. Take a look at Martin’s article for more information.
And THIS blog is what your blog will look like. It ain’t the best looking blog in the world, but it works.
If you want to embed the blog on your public site, you can do so with the provided rss feed url which will look like this: 365 blog on a public site.
We cover that in another article:An Office 365 Blog served up using an rss feed.

An Office 365 Blog served up using an rss feed

How do you get a 365 blog published on your public site?MSFT makes it more difficult than it should be, but here’s one way.
Create a blog sub site under the public site collection in 365. Use the rss feed to embed the blog on your public site.
You could see the original blog the feed is from here but the link tool is broken in Sharepoint.
See the blog feed on a public site page here.
UPDATE:This worked for a while – displaying actual posts on the public site via rss – but now it just shows a link to the blog, so it looks like MSFT has closed off yet another useful feature of O365.

Office 365 Sharepoint Online 2010 Public Site – Verify Your Site (Webmaster Tools etc).

Generate the Office 365 compatible meta tag code needed to verify your site with major search engines in 2 steps with our easy to use generator. You can also use it to add javascripts to the page’s -head- section and create the code for a favicon-like this too »
To add a meta tag verification to theof your site, the meta tag code has to be URL ENCODED for it to be recognized as valid by the search engine/verifying site. Simply pasting the code provided in the site’s SEO box won’t work. This generator will “encode the code” so it works. It can alse be used for ANY code you want to be in theof your site. Here’s how:

1/ Copy the search engine or other verification code
Log into your search engine account
Select “meta tag” as the verification method
You’ll get a piece of code like this:

Copy it – this is your unique verification key.

2/ Generate your code
Paste the key into the appropriate box in our generator form below RIGHT AFTER THE ” />.
You can do one search engine or all 3 at once
IMPORTANT: REMOVE THE FINAL CLOSING TAG which should look like this: “/>
This gets added automatically so leaving it will duplicate it and the code won’t work!
So paste the code like this:Click “Encode” and copy the output code from the box
Paste the output on a new line in the “keywords” box under the SEO tab for your home page (“page properties”).
When done, go back to the search engine site and click “get verified”.

Favicon
A favicon is the little image you see to the left of the address bar, tab titles and in bookmarks/history. The code to add one can easily be added to theof your site using the encoder. If you want one, create a 16x16px image. Save it as “favicon.ico”. Upload it to your DOCUMENTS GALLERY (NOT the image gallery!) Repeat the above routine for meta tag code, except use this exact code: on the end!

Adding javascripts to thesection. Though not always necessary, some scripts suggest you place them in the”head” section of your pages. You can use the same technique outlined here to do that: Paste your complete javascript or link code into the encoder and append the red part to make sure it works. So it would look like this:you see in the box below in place and paste your code right after it!!

Thanks to Eric Meyer at meyerweb.com for providing the encoder.
The URL Decoder/Encoder is licensed under a Creative Commons Attribution-ShareAlike 2.0 License. See Eric’s site for license details, user rights and use restrictions.

Questions?

Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!

How to redirect your OLSB urls to your new pages and keep the SEO gods happy

If you’re moving to O365, your page urls will change and be seen as new pages by the search engines. This solution won’t fix that but will mitigate its impact by ensuring backlinks, bookmarks and search result links won’t trigger 404 page not found errors. So at least your domain won’t get penalized for 404’s – and people will still get to your site.In summary what you need to do is create”mirror” pages in 365 with the same page address as your OLSB pages. Those pages will only contain a redirect code to your NEW page. If an OLSB link is clicked, the user will be redirected automatically to your new page.Method 1
1/ Open notepad and paste in this code replacing”new365page.aspx” with your new target 365 page address:

2/ Save file as”oldolsbpage.aspx” replacing “oldolsbpage” with the page address of your OLSB page.

3/ Open your site either in Windows Explorer or Sharepoint Designer 2010. To open it in W Explorer, click the ribbon icon from a document library. Click here for more info on opening site in SPD.

4/ Either drag and drop the file at the root of your site in W Explorer (ie NOT in any of the folders). OR, open”All Files” and use the import tool in SPD.

5/ Rinse and repeat for all your OLSB pages.

Method 2
You can save a step by creating the files right within Sharepoint Designer.

1/ Open the”All Files” object in SPD

2/ From the ribbon click”File” and select “ASPX”

3/ Rename the file to the same as your OLSB page name.

4/ Open the file in CODE VIEW and you’ll see a very simple html page code.

5/ Insert your javascript redirect code BETWEEN THE FORM TAGS ie like this:


Prepare to be redirected!

This page is a time delay redirect, please update your bookmarks to our new
location!

Save the file. Here’s how the above code would work – note how the url changes:
Click here>OLSBsite.com/blog.aspx

NOTE:This won’t work for the OLSB “default.aspx” page but you don’t have to “mirror” that page because 365 already contains a placeholder page with that address that ensures your domain opens your new 365 home page. Redirecting the default page is a little trickier so click here to ask in our forum if for some reason you want to do that.