Embed a Live Spreadsheet in WordPress

When you convert an Excel spreadsheet to web format and upload it to WordPress you can embed it in one or more web pages and it will work like in Excel.

Before you embed a spreadsheet in WordPress you convert it to web format with SpreadsheetConverter. Then you use a special plugin in WordPress to upload the SSC Calculator file you get as a result of the conversion. If you haven’t yet converted the spreadsheet or uploaded it to WordPress you need to start over from the beginning

Now it’s time to insert the uploaded calculator into any page or post where you want it to appear. Open this page in the WordPress editor, place the cursor at the right spot and click Embed SSC Calculator.

embed-calculator-button

 

In the list called Calculator Link, scroll to and select the calculator you want to embed.

embed dialog

 

If necessary, modify the size of the calculator frame in the web page using the fields Iframe Width and Iframe Height. Click Insert Calculator.

insert calculator

 

If you don’t see the calculator, only an <iframe> tag, click on the Visual tab for a preview of the page.

If you cannot see the entire calculator, or if there’s too much whitespace around it, you may need to change the size using the instructions in the next step below.

But first click Publish to save your changes.

Screenshot of the Publish button in WordPress

 

Changing the size of the calculator on the page

If the frame is too small, parts of the calculator aren’t visible. In this case, locate the resize handle at the lower right-hand corner of the calculator.

Screenshot of the resize handle of an embedded calculator

 

Drag the handle to resize the calculator frame.

Screenshot of the resize handle being used to resize the frame

 

If you want the size to be more exact, switch to the Text tab. Locate the <iframe> tag that represents the calculator. Adjust the height and width parameters in the iframe tag, then switch back to the Visual tab to see the result. Continue until the calculator looks good. Don’t be afraid of leaving a considerable margin around your calculator.

Remember to save your work by clicking Publish.

Screenshot of the Publish button in WordPress

Removing or moving the calculator

In case you want to remove a calculator that you previously embedded in page or post, select the calculator and there appears “Delete Calculator” button on the lower left-hand corner of the calculator then click on it.

remove-embedded-calculator

If you want the calculator to appear somewhere else, e.g. at the bottom of the page, please delete it first and move the cursor position to where you want to insert it again, then click on “Embed SSC Calculator” button.

Using the same form or calculator in two or more pages

If you want to use an uploaded calculator on more than one page, just click on the Embed SpreadsheetConverter Calculator once for every page where you want it to appear, or copy the entire <iframe> tag and paste it into the other pages.

Note that by default, each time you embed a form or calculator it will be a unique, independent copy of it. As an example, you may want to add an order form to any page in your website. Any changes you make to the order form on “page A” will not be visible on “page B”, because the two forms are independent. If you want to connect them to show the same order form on two or more pages you may want to read more about the Real-time Sync feature in the “sign-up form” tutorial.

Using forms and calculators in multi-column layouts

When you create a web form it always appears left-adjusted. If you want to right-adjust it and place text to the left of the form, you need to create a two-column layout for your page. Search the web for wordpress tutorial two columns to get help on how you create a two-column layout first, then move the <iframe> to the correct location in your two-column design.