Embedding forms in WordPress will transform your website into a powerful tool for engaging visitors, collecting information, and streamlining workflows. You’ll capture leads, take event registrations, or collect customer feedback in just a few clicks.
WordPress makes this process easier than ever with its versatile platform. From using built-in features to leveraging plugins or external tools, there are multiple ways to get the job done. But which one suits your needs best?
In this guide, we’ll explore the top 6 ways to embed forms in WordPress, with step-by-step instructions for each. By the end, you’ll have everything you need to enhance your website’s functionality and user experience.
So, let’s dive into how to embed forms in WordPress seamlessly and efficiently.
Benefits of Embedding Forms in WordPress
Before diving into the methods, let’s quickly look at why embedding forms in WordPress is so valuable.
1. Engage visitors effectively
Forms allow you to interact with your audience in a meaningful way. Whether it’s a contact form, newsletter signup, or survey, embedding a form encourages visitors to take action, turning passive readers into engaged users.
Example: A contact form can simplify inquiries, making it easier for potential clients to reach out directly without hunting for your email address.
2. Simplify data collection
Instead of manually collecting information through email or phone calls, embedded forms centralize the process. This is especially useful for event registrations, customer feedback, or order placements.
Example: A registration form for a webinar can instantly capture names, emails, and preferences, saving you time and reducing errors.
3. Enhance website functionality without coding
WordPress empowers users to add advanced features without technical expertise. Embedding forms is no exception – many methods are user-friendly and don’t require coding skills.
4. Improve conversions
Strategically placed forms can lead to more signups, inquiries, or purchases. For example, a well-designed form on your homepage can boost lead generation significantly.
5. Mobile-friendly interaction
Most WordPress form solutions ensure that forms are responsive and look great on all devices, making it easy for users to interact with your site no matter where they are.
Top 6 Ways to Embed Forms in WordPress
There are several methods to embed forms in WordPress, each catering to different levels of expertise and requirements. Below, we’ll break down the most effective ways step-by-step so you can choose the one that fits your needs.
Using the default WordPress Block Editor (Gutenberg) to embed forms
The WordPress Block Editor (Gutenberg) makes it incredibly simple to embed forms without requiring additional tools. If your form is created using a plugin or an external service that generates an embed code or supports shortcodes, Gutenberg can handle it effortlessly.
Steps to embed a form using Gutenberg:
- Create your form: If you’re using a plugin like WPForms or an external tool, ensure your form is created and ready to embed.
- Add a block: Navigate to the page or post where you want to embed the form. Click the “+” icon to add a new block.
- Choose the embed method:
- For shortcodes: Select the “Shortcode” block, then paste the shortcode provided by your form builder.
- For HTML: Select the “Custom HTML” block and paste the embed code (e.g., a script or iFrame).
- Preview your form: Switch to the preview mode to ensure the form displays correctly.
- Save or publish: Once satisfied, save the draft or publish the page.
Embedding forms with shortcodes
Shortcodes are a popular and flexible way to embed forms in WordPress. Most form plugins generate a shortcode for every form you create, making it easy to embed them anywhere on your site.
Steps to use shortcodes:
- Locate the shortcode: After creating a form using a form builder, find the shortcode associated with your form. It’s usually displayed in the form settings or editor.
- Paste the shortcode: Copy the shortcode and paste it into any text editor, widget, or block on your WordPress site.
- Publish the page: Save or publish your changes to display the form.
Shortcodes are especially handy when you want to reuse the same form across multiple pages or posts without recreating it.
Using form plugins
Form plugins are a go-to solution for embedding forms in WordPress, offering powerful customization and features.
Why use plugins?
- Easy drag-and-drop builders to design forms.
- Built-in integrations with email marketing tools and CRMs.
- Automatic shortcode or block generation for embedding forms.
Steps to embed a form using form plugin (as an example):
- Install and activate form plugin: Go to the WordPress Dashboard → Plugins → Add New → Search for Form Plugin → Install and Activate.
- Create your form: Navigate to Plugin → Add New. Use the drag-and-drop builder to design your form.
- Get the shortcode: Save the form, and you’ll see a shortcode displayed in the settings.
- Embed the Form: Paste the shortcode into the desired location on your site, whether it’s a page, post, or widget.
Example: Embedding a survey form might look like this: [plugin id=”789″]
Plugins often include built-in styling and responsive design, so your forms look professional out of the box.
Embedding via HTML/JavaScript code
If your form comes from an external service, such as Google Forms, Typeform, or Jotform, they typically provide an embed code. You can easily use this code to add the form to your WordPress site.
Steps to embed a form using HTML/JavaScript code:
- Generate the embed code: In your external form builder, look for the “Embed” or “Share” option and copy the provided HTML/JavaScript code.
- Add a custom HTML block: In WordPress, go to the page or post where you want the form. Click the “+” icon, search for the “Custom HTML” block, and select it.
- Paste the code: Insert the embed code directly into the block.
- Preview and adjust: Use the preview feature to ensure the form displays correctly. If needed, adjust the code (e.g., change the width/height).
- Save or publish: Once satisfied, save your changes or publish the page.
Example: Here’s a typical Google Forms embed code:
<iframe src=”https://docs.google.com/forms/d/e/1FAIpQLS_example/viewform?embedded=true” width=”640″ height=”480″ frameborder=”0″ marginheight=”0″ marginwidth=”0″>Loading…</iframe>
You would paste this code into the Custom HTML block, and the form will render on your site.
Pro Tip: Embedding with HTML/JavaScript is particularly useful for integrating forms that need advanced external functionalities, such as conditional logic or payment processing.
Integrating forms with page builders (e.g., Elementor, Divi)
If you’re using a page builder like Elementor, Divi, or WPBakery, embedding forms is even more streamlined. These builders typically include pre-designed widgets or modules for adding forms directly.
Steps to embed a form with elementor (as an example):
- Open your page in Elementor: Navigate to the page you want to edit and click “Edit with Elementor.”
- Drag and drop the form widget: Search for the “Form” widget in Elementor’s sidebar. Drag it onto your page.
- Select Your form source:
- If using a plugin, choose the specific form you created.
- If using custom HTML or shortcodes, paste the code into an “HTML” or “Shortcode” widget instead.
- Customize the appearance: Use Elementor’s styling options to match the form with your site’s design.
- Save and publish: Save your changes and check the live page.
Example: With Elementor, you could embed a lead capture form in seconds by simply selecting it from a dropdown within the widget.
Why use page builders to embed forms in WordPress?
- Advanced design flexibility.
- Real-time visual customization.
- Seamless integration with popular form plugins.
Embedding forms in WordPress with iFrames
iFrames are a versatile method for embedding forms, especially for forms hosted on external platforms. They allow you to display content from another website directly on your WordPress site.
Steps to embed a form with iFrames:
- Get the iFrame code: Most external platforms provide an iFrame embed code. Copy it.
- Add a custom HTML Block: In WordPress, go to the page/post editor and insert a “Custom HTML” block.
- Paste the iFrame code: Insert the iFrame code into the block.
- Preview the form: Check the preview to ensure the form displays correctly. Adjust the width and height attributes as needed.
- Publish the page: Save your changes or publish the page.
Example: Here’s an example of an iFrame code:
<iframe src=”https://example.com/form” width=”600″ height=”400″ frameborder=”0″></iframe>
When to use iFrames: iFrames are ideal when you don’t have access to a shortcode or plugin integration, or when using forms from external services that don’t directly integrate with WordPress.
Best Practices for Embedding Forms in WordPress
Embedding a form in WordPress is just the beginning. To ensure your forms are effective and deliver the results you need, it’s essential to follow a few best practices.
Place forms strategically
Where you embed your form matters. Think about the user journey and ensure the form is easily accessible at the right moment.
- Homepage or landing page: Use forms for lead generation, like newsletter signups or free trials.
- Contact page: A simple contact form ensures visitors can reach you effortlessly.
- Footer or sidebar: Embed a subscription form for users navigating your site.
Example: A travel agency could place a booking inquiry form directly on their “Services” page for convenience.
Keep forms simple and focused
Don’t overwhelm users with too many fields. Each additional field increases the likelihood of abandonment.
- Essential fields only: Ask for the bare minimum information, such as name and email, unless additional details are absolutely necessary.
- Use conditional logic: If your form plugin supports it, show specific fields based on user responses to keep the form clean.
Example: A job application form might start with basic details like name and email, and only show additional sections (e.g., previous experience) based on the user’s role selection.
Ensure mobile responsiveness
With more users browsing on mobile devices, it’s crucial that your forms look great and function well on smaller screens.
- Use plugins or embed methods that automatically adjust to different screen sizes.
- Test your forms on multiple devices to ensure usability.
Example: A restaurant’s reservation form should allow users to select dates and times easily on a mobile phone.
Optimize for speed
Slow-loading forms can frustrate users and reduce conversions. Ensure your forms don’t impact your site’s performance.
- Minimize large scripts or third-party embeds that could slow down your site.
- If using external services, choose providers known for fast, reliable performance.
- Lazyload below the fold forms.
Pro Tip: Plugins like WP Rocket can help optimize loading times by deferring scripts related to form embeds.
Use clear Call-to-Actions (CTAs)
Make sure your form’s submission button uses action-oriented and encouraging text.
- Replace generic “Submit” buttons with phrases like “Get Started,” “Subscribe Now,” or “Request a Quote.”
- Pair your CTA with a brief statement about what the user will receive after submitting the form.
Example: For a free eBook download form, the CTA could read: “Download My Free Guide Now!”
Test your forms regularly
Before publishing your form and periodically afterward, test it thoroughly to avoid issues.
- Check for proper functionality (e.g., submissions go through, confirmation emails are sent).
- Test on different devices and browsers to ensure compatibility.
Pro Tip: Use dummy data during testing to simulate real user interactions.
Protect against spam
Prevent spam submissions by implementing basic security measures.
- Add a CAPTCHA or reCAPTCHA field to your form.
- Use form plugins that include anti-spam features.
Example: A blog contact form can use reCAPTCHA to ensure only genuine inquiries are received.
Troubleshooting Common Issues When Embedding Forms
Even with the best tools and practices, issues can arise when embedding forms in WordPress. Here’s how to tackle the most common problems effectively.
WordPress form not displaying properly
Sometimes, after embedding a form, it doesn’t appear or looks broken.
Common causes and fixes:
- Incorrect shortcode or embed code: Double-check that you’ve copied and pasted the shortcode or embed code accurately.
- Plugin conflicts: Disable other plugins temporarily to see if there’s a conflict. If the issue resolves, enable plugins one by one to identify the culprit.
- Theme compatibility issues: Switch to a default WordPress theme (e.g., Twenty Twenty-Three) to test if your theme is causing the issue.
Forms loading slowly
Slow-loading forms can harm user experience and reduce engagement.
Troubleshooting steps:
-
- Optimize external embeds: If using third-party forms (e.g., Google Forms), check if the provider offers performance settings or a lightweight embed option.
- Cache your site: Use caching plugins like WP Rocket to optimize loading speeds for your entire site, including forms.
- Minimize scripts: Disable unnecessary scripts on pages where the form isn’t used.
- Lazy load forms: For below the fold forms, you can minimize their negative effects on site speed by lazy loading them.
Pro Tip: Use tools like GTmetrix to test your page’s performance and identify form-related slowdowns.
Form submissions not going through
Users may fill out the form, but the submission doesn’t register or email notifications fail.
Steps to Fix:
- Test Submission Process: Submit the form yourself and confirm it works as expected.
- Email Deliverability Issues: Install an SMTP plugin like WP Mail SMTP to ensure emails sent by your form aren’t flagged as spam.
- Check Form Settings: Ensure the correct email address is set for receiving notifications.
Example: If a contact form isn’t sending notifications to your inbox, SMTP plugins can help route emails reliably through services like Gmail or SendGrid.
Spam submissions
Forms without protection are vulnerable to spam bots, leading to fake or irrelevant entries.
Solutions:
- Enable CAPTCHA or reCAPTCHA: Most plugins, like WPForms and Gravity Forms, have built-in support for adding CAPTCHA fields.
- Honeypot protection: Many plugins include honeypots—a hidden field that bots are likely to fill, identifying them as spam.
- Block IPs: Use security plugins like Wordfence to block suspicious IPs.
Styling issues
Forms may not match your site’s design, looking out of place or hard to read.
How to fix:
- Customize with plugin settings: Most plugins allow you to adjust colors, fonts, and layouts without needing to code.
- Add custom CSS: If you’re comfortable with CSS, style the form manually by targeting its classes or IDs.
- Switch themes: If your theme heavily restricts styling, consider using a theme designed for compatibility with form plugins.
Example: To make a button align with your brand colors, add custom CSS like
Mobile responsiveness issues
If forms don’t adjust well to smaller screens, it frustrates users and can hurt conversions.
Solutions:
- Check plugin responsiveness: Most modern plugins ensure forms are mobile-friendly. If not, consider switching to a plugin that supports responsive design.
- Adjust width and margins: Use CSS to fine-tune how the form displays on mobile devices.
Pro Tip: Test your form on devices with different screen sizes using a tool like BrowserStack.
FAQs About How to Embed Forms in WordPress
Can I embed forms in WordPress without using plugins?
Yes, you can! If your form comes from an external source like Google Forms or Typeform, you can use the embed code they provide. Simply paste it into a “Custom HTML” block in WordPress. For basic forms, you can also hand-code them using HTML and CSS, but this requires more technical expertise.
Why isn’t my embedded form responsive on mobile?
If your form isn’t responsive, the issue might lie with the embed code or the plugin you’re using. Ensure that the form provider supports responsive design. You can also add custom CSS to tweak the layout for smaller screens.
How do I ensure my forms are secure?
To protect against spam and unauthorized access:
- Add CAPTCHA or reCAPTCHA to your forms.
- Use a plugin with built-in security features, like anti-spam honeypots.
- Ensure your website uses HTTPS for secure data transmission.
How do I track form submissions in WordPress?
Many plugins have built-in submission tracking. You can also integrate your forms with Google Analytics or use a plugin like MonsterInsights to monitor form conversions.
Can I embed a form in WordPress?
Yes, WordPress makes it easy to embed forms using plugins like WPForms or by adding embed codes from external form builders directly into your site using blocks or widgets.
Can you embed Microsoft Forms into WordPress?
Yes, Microsoft Forms provides an embed code that you can paste into a “Custom HTML” block in WordPress to integrate it seamlessly.
How do I embed a form on a website?
To embed a form on any website, generate an embed code from your form builder (e.g., Google Forms, Typeform) and insert it into your site’s HTML or a designated widget area.
How do I add a form to a WordPress page?
You can add a form to a WordPress page by using a plugin’s shortcode in the page editor or by selecting the appropriate form block in the block editor for supported plugins.