Sometimes it’s useful to embed a map, form, calendar or survey in your WordPress website. For instance, if you create a form using Google Forms, it’s much better to display the form directly on your site rather than posting a link that requires users to go off-site.

The bad news: WordPress automatically strips out any code you try to embed for security reasons.

The good news: We created an iFrame shortcode that bypasses WordPress security measures for the following types of content:

  • Google Forms
  • Google Maps
  • Google Calendar
  • UGA Qualtrics

Here’s how to do it

First, find and copy the embed code for the calendar, map or form. For instance, in Google maps the embed code will look like this:

<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1654.834022733337!2d-83.38542226641091!3d33.94966502087034!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f66d19316787f9%3A0xf2901300b95d9bd4!2s171C1+H002%2C+Athens%2C+GA+30605!5e0!3m2!1sen!2sus!4v1531245205080" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen" ></iframe>

Next, paste this code into a Shortcode block on your WordPress page.

Add a new block, filter for shortcode, and select Shortcode.
1. Add a new block, filter for shortcode, and select Shortcode.
Inserted shortcode block.
2. Inserted shortcode block.
Paste in the iframe code into the shortcode widget.
3. Paste in the iframe code into the shortcode widget.

Then, replace first angled bracket, <, with a square bracket [. Then, replace the last nine characters, ><iframe>, with a single closing bracket, ].  Here is what the code we started with would now look like:

[iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1654.834022733337!2d-83.38542226641091!3d33.94966502087034!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f66d19316787f9%3A0xf2901300b95d9bd4!2s171C1+H002%2C+Athens%2C+GA+30605!5e0!3m2!1sen!2sus!4v1531245205080" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen" ]

Last, save your page. When published, our example embed code would look like this:

That’s all you have to do! Remember to check your Google account settings. Make sure that your form, calendar or map settings are set to “public” so everyone can see.

If you would like to embed something other than the four types of content listed above, just email us at caesweb@uga.edu to request an exception for your site. We’ll review your request and let you know if we’re able to add the exception.

Happy embedding, and if you have any questions let us know.

Posted in: ,