Integrations

Embed WonderForm in WordPress

Published @ 17/07/2024 by

Nevrie, Co-Founder @ wonderform.io

Integrating your WonderForm with WordPress should be an easy proccess thanks to our Instant embed features.

Follow the steps below to get started.

1. Login

To start, you'll need to login to your WonderForm account. You can do so by clicking on the following link: Login.

2. Access Instant Embed

Go to Instant Embed and click on Connect a website.

Enter your website url and click on Continue.

Copy the provided code and head over to WordPress.

3. Embeding the code

Embedding custom JavaScript code in your WordPress site can add dynamic features and enhance user interaction.

Method 1: Using the WordPress Theme Customizer

Access the Theme Customizer:

Navigate to your WordPress dashboard.
Go to Appearance > Customize.

Add Custom JavaScript:

In the Customizer, find the Additional CSS/JS section.
Insert your code in the provided text area.

Publish the Changes:

Click Publish to save your changes.

Method 2: Adding JavaScript to the Theme’s functions.php

Edit functions.php:

Go to Appearance > Theme Editor.
Select the functions.php file from the list of theme files.

Insert the Script:


function custom_scripts() {
    echo '';
}
add_action('wp_footer', 'custom_scripts');

Save Changes:

Click Update File to save your changes.

Method 3: Using a Plugin

If you prefer not to modify theme files directly, using a plugin can be a safer and easier alternative.

Install a Custom JavaScript Plugin:

Go to Plugins > Add New.
Search for a plugin like "Insert Headers and Footers" or "WPCode".

Add Your Script:

After installing and activating the plugin, navigate to the plugin's settings.
Insert your code in the appropriate section (e.g., header, footer).

Save Changes:

Click Save to apply your changes.

Method 4: Embedding JavaScript in a Specific Page or Post

Edit the Page or Post:

Open the editor for the specific page or post where you want to add the script.

Switch to Code Editor:

In the block editor (Gutenberg), click the three dots in the top-right corner and select Code editor.
In the classic editor, switch to the Text tab.

Insert the Script:

Update the Page or Post:

Click Update or Publish to save your changes.

Once you have used one of the methods above and managed to embed the code in your WordPress website, the next step is to open the page in the browser and refresh it a few times.

Once you refresh the page you should receive a message that the website has been verified.

You can close this modal, and on the settings on the right you can choose how to show the widget.

Once you choose how to show the widget click Apply and you are all set!

The widget will show on your website in less than a minute.