NNSINFO

How to Auto-Download a PDF After Contact Form 7 Submission and Redirect to Thank You Page

2025-09-23T22:32:00.002+05:30

Do you want to give your visitors a PDF file instantly after they submit your Contact Form 7 form? Maybe it’s a brochure, catalog, eBook, or price list.

In this guide, I’ll show you how to:

✅ Automatically download a PDF after form submission
✅ Redirect the user to a custom Thank You page
✅ Keep it simple with just a few lines of code

🛠 Step 1: Upload Your PDF

Go to WordPress Dashboard → Media → Add New
Upload your PDF file
Copy the File URL (you’ll need this for the code)

🛠 Step 2: Create a Thank You Page

Go to Pages → Add New
Name it “Thank You” (or any title you want)
Add your message (e.g., “Thanks for contacting us! Check your email for more details.”)
Publish the page and copy its URL

🛠 Step 3: Add JavaScript Code

Now we’ll add a small script to trigger the PDF download and redirect.


<script>
document.addEventListener('wpcf7mailsent', function(event) {
    // 1. PDF URL (replace with your file link)
    var pdfUrl = "https://yourdomain.com/wp-content/uploads/yourfile.pdf"; 
    
    // Trigger PDF download
    var link = document.createElement('a');
    link.href = pdfUrl;
    link.download = "yourfile.pdf"; 
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    // 2. Redirect to Thank You page (replace with your page URL)
    setTimeout(function(){
        window.location.href = "https://yourdomain.com/thank-you";
    }, 1000); // 1 second delay so download starts
}, false);
</script>

📌 Replace:

https://yourdomain.com/wp-content/uploads/yourfile.pdf → with your actual PDF URL
https://yourdomain.com/thank-you → with your Thank You page URL

🛠 Step 4: Where to Add the Code

You can add the script in two ways:

Option 1 (Recommended): Use the Code Snippets plugin → Create a new snippet → Insert into Footer.
Option 2: Edit your theme’s footer.php → Paste code before </body>.

🎯 Final Result

Now when a visitor submits your Contact Form 7 form:

The PDF will automatically download
The user will be redirected to your Thank You page

This is a great way to deliver lead magnets, brochures, or eBooks instantly and also track conversions on your Thank You page.

✅ Bonus Tip: Apply to Specific Form Only

If you have multiple forms and want this feature on just one form, you can target it by Form ID. Example:


if (event.detail.contactFormId == "1234") { 
   // run download + redirect only for form ID 1234
}

👉 To find your form ID: Go to Contact → Contact Forms in WordPress, and you’ll see the ID next to your form name.

🎉 Conclusion

With this method, you can easily make Contact Form 7 download a PDF instantly and send visitors to a Thank You page. It’s perfect for businesses that want to share catalogs, eBooks, or guides automatically after form submission.

Instagram Snowfall Effect Video Editing – Step by Step Guide to Create Viral Reels

2025-09-23T12:51:00.006+05:30

Instagram Trending Snowfall Effect Video Editing – Complete Guide

Instagram’s snowfall effect is going viral right now, and it’s easy to see why. Just add a flurry of snowflakes, and your videos instantly feel festive, cozy, and cinematic—like stepping into a winter wonderland. From selfies to cityscapes, creators everywhere are using this effect to make their reels stand out.

If you’ve been wondering how to make your own viral snow effect Instagram Reels, the good news is—it’s super simple and fun. In this guide, I’ll show you the step-by-step process to add snowfall to your videos using a free editing app.

How to Create Snowfall Effect Videos for Instagram Reels

1. Open the App and Set Up Your Video

Download and install the “Edits” app from the Play Store (if not already installed).
Open the app and tap the “+” icon.
Select the video you want to edit from your gallery.
Adjust the clip duration to around 8–10 seconds.

2. Apply the Snow Effect

Tap on the video layer in the app.
Click the Restyle option.
Swipe through the styles until you find the Snow Effect.
Select it to apply snowfall to your video.

3. Process the Effect

Tap Restyle again and wait 30–40 seconds while the effect processes.
You’ll now see a magical snowfall added to your clip.

4. Export Your Video

Choose the output quality (2K or 4K recommended).
Tap Export, and your video will be saved directly to your gallery.

Why This Effect is Trending?

Creates a cozy December vibe perfect for winter themes.
Works with any kind of video—selfies, travel, or lifestyle.
Helps your reels look aesthetic and cinematic.
Increases chances of going viral on Instagram.

So, if you want your Reels to grab attention, try the snowfall effect and make your videos look magical this winter season.

👉 Pro Tip: Pair your snowfall reel with trending winter music for an extra boost in engagement!

How to Save Contact Form 7 Entries in Your WordPress Backend

2025-05-17T22:04:00.000+05:30

Contact Form 7 is a fantastic, free plugin that makes it super easy to create and manage contact forms on your WordPress website. You can whip up simple or complex forms in minutes, making it a go-to solution for many website owners.

However, one of the default behaviors of Contact Form 7 is that it primarily sends form submissions to your designated email address. While this is essential, what happens if an email gets lost in spam, or you simply want a centralized place to manage all your inquiries?

That's where saving Contact Form 7 entries directly in your WordPress backend comes in handy! Having these submissions stored within your WordPress database ensures you never miss a potential lead or important message.

So, how do you achieve this? Thankfully, there are excellent plugins that seamlessly integrate with Contact Form 7 to provide this functionality. Let's explore a couple of popular options:

Option 1: The Simplicity of Flamingo

Developed by the same team behind Contact Form 7, Flamingo is a straightforward and reliable solution.

How it Works: Once you install and activate Flamingo, it automatically starts capturing and saving all submissions from your Contact Form 7 forms. You don't need to configure anything extra!

Where to Find Your Entries: You can find all the saved messages in your WordPress dashboard under the aptly named "Flamingo" menu. Here, you'll see "Inbound Messages" containing the form submissions and an "Address Book" that compiles the contact details.

Why Choose Flamingo?

Ease of Use: It works right out of the box with no complex setup.
Reliability: Coming from the same developers, it integrates perfectly with Contact Form 7.
Free: It's a completely free plugin.

How to Install Flamingo:

Go to Plugins > Add New in your WordPress admin area.
Search for "Flamingo".
Click Install Now and then Activate.

Option 2: Feature-Rich with CFDB7 (Contact Form 7 Database Addon)

Another popular choice is the Contact Form 7 Database Addon - CFDB7. This plugin also automatically saves your form submissions to the WordPress database.

How it Works: Similar to Flamingo, once activated, CFDB7 silently works in the background, storing your Contact Form 7 entries.

Where to Find Your Entries: After activation, you'll find a new menu item called "CFDB7" in your WordPress dashboard. Clicking on this will take you to a page where you can view all your submitted data.

Why Choose CFDB7?

Automatic Saving: No extra configuration needed to start saving submissions.
Lightweight: It's designed to be efficient and not bog down your site.
Export to CSV: A useful feature for exporting your form data.

How to Install CFDB7:

Navigate to Plugins > Add New.
Search for "Contact Form 7 Database Addon - CFDB7".
Click Install Now and then Activate.

Which One Should You Choose?

Both Flamingo and CFDB7 are excellent options.

If you're looking for a simple, no-fuss solution directly from the Contact Form 7 team, Flamingo is a great choice.
If you want a slightly more feature-rich option with the ability to easily export data, CFDB7 might be a better fit.

In Conclusion:

Saving your Contact Form 7 entries in your WordPress backend is a smart way to ensure you never lose important communications. By using plugins like Flamingo or CFDB7, you can easily manage and review your form submissions directly from your WordPress dashboard.

Do you currently use Contact Form 7? Which method of saving entries do you prefer? Share your thoughts in the comments below!

Sticky Header Overlaps Anchor in Elementor Page Builder Wordpress

2024-03-30T23:13:00.005+05:30

Elementor's anchor widget is fantastic tool for creating internal link to jumps on your webpage, perfect for one-page website.
However, used together with a fixed header or sticky navigation, this can be a problem. When an anchor link is clicked, the fixed header might block the content you're trying to scroll to. This blog will show you how to fix that.

Adding Elementors Anchor Widget

For this article, this is how our Elementor anchor widget is implemented. We just add it above the headline or Title that we want the visitor to scroll.

This is how the Anchor widget is implemented in Elementor.

Problem: Sticky Header Overlaps Anchor

Let’s have a quick look at what we are presented with when making no adjustments and simply try to use a sticky navigation with Elementor anchor widget. Here is what we get by default.

Solution: A few simple lines of CSS

Here are two ways to add the CSS code to fix your anchor widget and sticky header:

Child Theme's style.css file: This option applies the fix to all anchor widgets on your entire website.
WordPress Customizer > Additional CSS: This is also a great option for applying the fix globally.


body:not(.elementor-editor-active) .elementor-widget-menu-anchor {
   position: relative;
   z-index: -1;
 }
 body:not(.elementor-editor-active) .elementor-menu-anchor:before {
   content: "";
   display: block;
   height: 100px; // fixed header height
   margin: -100px 0 0; // negative fixed header height
   visibility: hidden;
   pointer-events: none;
 }

Make sure to play with the height/margin values above until it suits your needs. Just make sure you keep the same values (eg, height at 100px and margin at -100px). This is how things look like with the CSS snippet applied.

And that’s it! This will fix the overlapping sticky header when using anchor widgets with Elementor.

How to Remove / Disable Billing Address Fields in Woocommerce

2023-11-03T17:36:00.002+05:30

At times, there may be a need to eliminate or deactivate billing address fields during the checkout process. The approach for doing this will vary depending on your store type and your specific objectives.

If you sell shipped products and you don’t need customer to enter a separate billing address, you can use the built in WooCommerce address features.

In WordPress admin, go to WooCommerce > Settings
Click the Shipping tab
Click ‘Shipping options’
Select ‘Force shipping to customer billing address’ for ‘Shipping destination’ and save.
(Optional) Change the address heading.

By default, the heading for the address fields will be ‘Billing and Shipping address’. You can override this with this snippet:

<?php

// Do NOT include the opening php tag.

// Place in your theme's functions.php file

add_filter( 'cfw_billing_shipping_address_heading', function( $heading ) {

return 'Shipping address';

} );

Tutorial : How To Convert PDF To Google Sheets [Easy]

2023-10-05T19:01:00.002+05:30

In Today Digital Age, Whether You're student, a professional, or a business owner, you'll often find yourself needing to convert data from one format to another. One Most Common challenge is Converting PDF files into Google Sheets. In This Article We comprehensive guide on how to convert PDF to Google Sheets efficiently and effectively.

let's explore the various methods for converting your PDF files into Google Sheets.

Convert PDF To Google Sheets

Method 1: Using Google Drive

Upload your PDF: Sign in to your Google Drive account, click the "+ New" button, and choose "File upload." Select your PDF file.
Right-click the PDF: Once uploaded, right-click on the PDF file, choose "Open with," and select "Google Sheets."
Review and adjust: Google Sheets will attempt to convert your PDF into a spreadsheet. Review the results and make any necessary adjustments.
Save your work: Finally, save your converted file by clicking "File" > "Download" > "Google Sheets."

Method 2: Using an Online Converter

Search for an online converter: Numerous online tools can convert PDFs to Google Sheets. Like Nanonets
Upload your PDF: Follow the instructions on your chosen converter's website to upload your PDF file.
Convert and download: The converter will process your PDF and provide a link to download the converted Google Sheets file.

Converting PDF files to Google Sheets can unlock a world of possibilities for data analysis and collaboration. Whether you choose the convenience of Google Drive, an online converter, or the manual approach, you now have the tools and knowledge to make the conversion process a breeze. Start harnessing the power of your data today with Google Sheets!

Introduction to HTML, CSS, JavaScript & How Websites Work | Web Development Tutorials #1

2023-09-17T16:02:00.003+05:30

Have you ever wondered how websites are created? Maybe you've heard about HTML, CSS, and JavaScript, but you're not quite sure what they are and how they work together to make the websites we use every day. Well, you're in the right place! In this article, we'll take a beginner-friendly journey into the world of web development, where we'll explore HTML, CSS, JavaScript, and the magic that happens behind the scenes to make websites come to life.

What is HTML?

HTML stands for HyperText Markup Language. Don't let the fancy name scare you; HTML is the backbone of every web page. It's like the skeleton of a website. HTML uses tags to structure content, such as text, images, links, and more. These tags tell web browsers how to display the content. For example, the <h1> tag is used for headings, while the <p> tag is used for paragraphs. HTML provides the structure and content of a webpage.

What is CSS?

Cascading Style Sheets, or CSS for short, is the artist's palette of web development. While HTML provides the structure, CSS adds style and design to web pages. Think of it as the paint and brushes that make a painting beautiful. CSS allows you to control the colors, fonts, spacing, and layout of your web page. You can change the background color, make text bold or italic, and position elements precisely where you want them.

What is JavaScript?

Now, it's time to add some interactivity to our web page. That's where JavaScript comes in. JavaScript is a programming language that enables you to create dynamic and interactive web pages. It's like the brain of a website, making it respond to user actions. You can use JavaScript to build forms, create animations, and update content without needing to refresh the entire page. It's what makes websites feel alive.

How Do Websites Work?

Now that we know about HTML, CSS, and JavaScript, let's see how these technologies work together to create a functional website.

User's Request: It all starts when you type a web address (URL) into your browser and hit enter. Your browser sends a request to the web server hosting the website you want to visit.
Server Processing: The web server receives the request and processes it. If the request is for a webpage, the server uses server-side technologies like PHP or Python to fetch data from a database or perform other tasks.
HTML Generation: The server combines HTML, CSS, and JavaScript to create a web page. HTML structures the content, CSS styles it, and JavaScript adds interactivity.
Sending the Page: The server sends the generated webpage back to your browser.
Browser Rendering: Your browser receives the webpage and interprets the HTML, CSS, and JavaScript. It displays the page as you see it on your screen.
User Interaction: As you interact with the webpage (clicking links, filling out forms, etc.), JavaScript processes these actions and can make requests to the server to update content dynamically.
Repeat: This process repeats every time you click a link or perform an action on the webpage, creating a seamless user experience.

In a nutshell, HTML structures content, CSS styles it, and JavaScript adds interactivity, while the web server handles data processing and retrieval. Together, they bring websites to life!

Understanding HTML, CSS, and JavaScript is the first step on your journey to becoming a web developer. These technologies work hand in hand to create the web pages we use daily. Whether you're interested in building your own website or exploring a career in web dev

Optimizing Your E-commerce Site: How to Modify Category Order in WordPress and WooCommerce

2023-09-06T22:12:00.000+05:30

Have you ever tried to change the default order of the category in your WordPress and WooCommerce site? If the answer is yes, then you’ll be surprised to know how easily you can change category orders using our effective ways.

The arrangement of categories plays a pivotal role in shaping how your audience interacts with your content. However, WordPress, in its default configuration, arranges categories alphabetically, resulting in a rigid and sometimes confusing category list.

This situation highlights the importance of customizing category orders in WordPress to create a more engaging and meaningful user experience. WooCommerce site owners face a similar challenge when it comes to product categories, prompting them to seek ways to tailor the order.

In this article, we will provide you with step-by-step instructions on how to modify category and taxonomy term orders in WordPress, and how to rearrange product categories in WooCommerce. Changing the category order in WordPress and WooCommerce involves manipulating the category hierarchy or using a plugin to reorder your product categories.

Use Category Order and Taxonomy Terms Order plugin

If you need more control over the category order or want additional features, you can use a plugin like "Category Order and Taxonomy Terms Order." Here's how to do it:

Install and Activate the Plugin: Go to Plugins > Add New in your WordPress dashboard. Search for "Category Order and Taxonomy Terms Order" and install it. Activate the plugin.
Configure Category Order: After activation, go to WooCommerce > Product Cat Order. Here, you can manually set the order of your product categories by dragging and dropping them or by specifying numerical order values.
Save Changes: Don't forget to save your changes after reordering the categories.

This plugin offers more flexibility and control over the order of your product categories.

WordPress Admin Login Not Working | Not Available Error And How To Fix It

2023-08-02T17:08:00.002+05:30

Fixing the WordPress Admin Login Not Working Issue: Troubleshooting and Solutions

Is your WordPress Admin Login acting up? Are you frustrated by the "Not available" error message greeting you on your login page? Don't worry; we've got you covered. In this guide, we'll walk you through the steps to resolve the WordPress Admin Login Not Working issue, and get you back into your website in less than 10 minutes. So, let's dive in and get your login glitch sorted out.

Understanding the Issue: "Not Available" Error on Your Login Page

It's a common scenario – you're all set to access your WordPress Admin panel, but you're met with the frustrating "Not available" error message. This issue can be attributed to various factors, and one of them could be the setup of your login page. While the default location is usually domain.com/wp-admin, some users opt for a different login location, often due to security concerns and the use of security plugins.

For instance, let's say your login page was previously located at website.com/login, a custom setup possibly achieved using the All in One Security Plugin for WordPress. This plugin, while impressive in its security features, can sometimes clash with WordPress updates, leading to login disruptions.

Resolving the WordPress Admin Login Issue: Step-by-Step Guide

To regain access to your WordPress Admin panel and bid farewell to the "Not available" error, follow these steps diligently:

Temporarily Disable the Security Plugin
•Access your FTP (File Transfer Protocol) via cPanel or an FTP software.
•Navigate to the plugins folder dedicated to your WordPress installation.
•Rename the folder of the security plugin to something different, breaking its link to the files. Adding a prefix like "00-" can help you easily locate it when needed.
Access WordPress Default Login Page
•With the security plugin temporarily disabled, go to yourdomain.com/wp-admin, the default login page.
•Log in using your credentials and enjoy access to your dashboard.
Restore the Security Plugin
•Once inside, return to your FTP and revert the security plugin folder name to its original.
•Head back to your WordPress dashboard and access the plugins page.
Update or Configure the Security Plugin
• If an update is available for your security plugin, consider backing up your data before proceeding with the update.
•For users of the All in One Security Plugin, locate the "Brute Force" section in the left menu. This area allows you to customize the login page URL, enhancing security against hackers.
•Temporarily disable the custom login page by unchecking the option and saving the changes.
•Reconfigure the custom login page settings, recheck the box, and save your changes.
Test and Clear Caches
•Log out of your WordPress account.
•Open an incognito window and test the new login page URL you've configured.
•Note that caching issues might persist, causing your browser to recall the old login page. To resolve this, clear your site's cache or the browser's cache.

Conclusion

In a matter of minutes, you've successfully tackled the WordPress Admin Login Not Working issue and restored smooth access to your website's backend. Remember, a small gesture like liking or commenting on our YouTube video guide can go a long way in showing your appreciation. Thank you for choosing us to assist you in resolving this pesky login problem. Your support is greatly valued!

How to Make a Custom Mouse Cursor with CSS

2023-04-02T14:24:00.002+05:30

Have you ever visited a website and been totally blown away by its amazing features? One of them might be a cool mouse cursor that is different from the regular arrow or pointer cursors you are used to.

In this article, I will be explaining how to make a custom mouse cursor, using CSS. Then you be will ready to vamp up your website with different creative cursors to keep your audience engaged. Ready? Let's dive in.

How to Customize a Mouse Cursor with CSS

Customizing a mouse cursor with CSS is pretty simple, as CSS already has a property to handle this. All we need to do is identify this property and use it.

As Frontend Engineers we use this property often – it is none other than the almighty cursor property. Yes, that property is what gives us the power to make a custom cursor of our choice.

Now how do I use CSS to customize a mouse cursor? To use this, you just have to tell CSS what image you intend to use and point the cursor property to the image URL using the url value.

body {
  cursor: url('image-path.png'),auto;
}

From the code snippet above, you can see I set this on the document body, so it can apply to the cursor no matter where it moves. It has the image specified in url(). The next value of the property is a fallback, just in case the image doesn't load or can not be found maybe due to some internal glitches. I'm sure you wouldn't want your website to be "cursor-less", so adding a fallback is very important. You can also add as many fallback URLs as you can or want.

Organic Farm : Free Divi landing page layout

2019-06-23T19:37:00.000+05:30

Landing pages are some of the most crucial pages of any website. They provide the information your visitors need to make a quick decision about your business, and direct readers to your call to action.

Organic Farm displays a CTA over a full-screen image in parallax that moves in the opposite direction on scroll. The next section displays blurbs with large icons to show services with butiful hover effect. The Next Two Column Some information with image with animation. this layout you can Also use as Full One page Website. Organic Farm layout is Complete Solution for Your Website Contact Us Section, Map Section, Footer, News Section, Testimonial Section, Number Counter Section, About Us Section and Header Section All..

Organic Farm

Downlaod

Pre-populate Woocommerce checkout fields for logged in user

2019-04-26T20:01:00.000+05:30

Hi Friends In this Tip We Learn How to add Pre-populate Woocommerce checkout fields for logged in user. This will populate ‘value’ attribute of checkout input field.

Add below code to Function.php file

/**
 * Pre-populate Woocommerce checkout fields
 */
add_filter('woocommerce_checkout_get_value', function($input, $key ) {

 global $current_user;

 switch ($key) :
  case 'billing_first_name':
  case 'shipping_first_name':
   return $current_user->first_name;
  break;
  
  case 'billing_last_name':
  case 'shipping_last_name':
   return $current_user->last_name;
  break;

  case 'billing_email':
   return $current_user->user_email;
  break;

  case 'billing_phone':
   return $current_user->phone;
  break;

 endswitch;

}, 10, 2);