Creating a custom 404 page with form

assume you will do all this in your 404.php

if you have a shortcode for the form, you can add that in there

best to do it in a child theme else it will be overwritten on theme update

I’d stick with your plan of keeping it simple!

Hi, @tokgozatakan, if you are afraid to customize 404.php template inside your child theme or your custom theme, then use this plugin. https://www.ads-software.com/plugins/404page/

You can add CF7 form shortcode to content and it will render a form. And for searchbar you can use this guide to build your own shortcode in child theme and then paste shortcode inside post: https://www.wpbeginner.com/wp-tutorials/how-to-add-search-form-in-your-post-with-a-wordpress-search-shortcode/ or again can use this plugin: https://www.ads-software.com/plugins/search-filter/ with a lot of extra features, it has widgets and shortcodes. ??

Otherwise follow this guide: https://codex.www.ads-software.com/Creating_an_Error_404_Page

I always recommend doing it inside the code. Less overhead. But its up to you. As well if you need custom sidebars.

And finally again which I would recommend to avoid afterall, you can use page builders, if it is really well made, maybe your initial load time wont take too much, but it depends on how much elements you put on your website and on the page builder:

• SiteOrigin Page Builder – probably fastest one, it takes least time to load its widgets for page rendering
• Elementor is build on react, so using it is flawless and it is as well really fast
• Finally Divi Builder is paid as well build on react, but might be a bit more cumbersome.
• Bonus: recently had possibility to try UX Builder, which seems really fast and easy to use as well. But guess it comes as a bundle with Flatsome theme

• This reply was modified 6 years, 3 months ago by juslintek.
• This reply was modified 6 years, 3 months ago by juslintek.

Thank you for your replies,

404 Plugin didn’t work for me I don’t know why.

Instead of using CF7 I decided to embed a google form but since the plugin didn’t work I need to edit directly from 404 file. How can I embed it directly into code?

Since my site is already bloating I want to do it all inside codes. I actually have the elementor but for 404 pages you need Elementor PRO also I’m thinking about uninstalling the elementor to make my site faster.

Where exactly do you want to embed it? If you want to add it after content you can use

If you follow above mentioned codex instructions, just paste google forms embedding iframe inside the template where you want it to appear.

For example:

<?php
/**
 * The template for displaying 404 pages (Not Found)
 *
 * @package WordPress
 * @subpackage Your_theme
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<header class="page-header">
				<h1 class="page-title"><?php _e( 'Not Found', 'your-theme-text-domain' ); ?></h1>
			</header>

			<div class="page-wrapper">
				<div class="page-content">
					<h2><?php _e( 'This is somewhat embarrassing, isn’t it?', 'your-theme-text-domain' ); ?></h2>
					<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'your-theme-text-domain' ); // Can change it to static non translatable text ?></p>

					<?php get_search_form(); ?>
                                        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSctdqrqH-ZjtUgXXhK2b69COKUmzExOfoND-1-aIUGL4BjAVQ/viewform?embedded=true" width="640" height="1013" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe><!-- google-form -->
				</div><!-- .page-content -->
			</div><!-- .page-wrapper -->

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

• This reply was modified 6 years, 3 months ago by juslintek.