Embed & Display Forms In Gutenberg Using Spectra

SureForms lets you embed and display the forms you’ve created on your WordPress site using Spectra in your Gutenberg editor. 

You can easily add forms to different sections, such as – pages, posts, or any Spectra widget area.

This guide will show you how to embed and display SureForms forms on your site using Spectra. Let’s get started!

Note: Ensure you install both SureForms and Spectra on your WordPress dashboard before moving forward.

Embedding Forms on a WordPress Page/Post with Spectra

Before we start, ensure you’ve created a form in your SureForms dashboard:

• Select the page where you want to embed the form or create a new page.

• Add the Spectra container block here.

• Select the preferred container layout in which you want to embed your form.

• Click the “+” icon in the container and add the “Form” element from SureForms.

• Select the form you want to embed from this dropdown. 

Once added, click the “Choose” button. After saving/publishing the page, the form will be embedded and visible on this page.

Preview the form on the front end to confirm it.

SureForms Settings In Spectra

The newly embedded forms will have some settings displayed on the right side. Here’s what they do:

• You can enable the “Show Form Title on this Page” toggle button to show the form title on the page/post.

• You can also edit the form title in the following textbox.

• To edit the original form, click on the “Edit” button. This will take you to the individual SureForms editor on another tab.

• You can add any additional CSS classes under “Advanced”.

Adding SureForms Forms Using Shortcodes In Gutenberg

You can also add the SureForms with the help of a shortcode in your Gutenberg editor. To do this:

• Go to SureForms > Forms then copy the shortcode under “Shortcode”.

• You can paste this shortcode in your Gutenberg editor normally or under the Spectra Container block using the preferred container layout.

Now, when you save the page/post, the SureForms form associated with this shortcode will be visible on the front end. For example:

You can use this shortcode on different areas or widgets on your site to embed the SureForms form however you want.

And if you have any other questions, feel free to reach out to us, We’re here to help!