Footer with Subscribe Form

Discover the power of a well-designed footer with a subscribe form that boosts user engagement. Implement our footer solution to seamlessly integrate subscription options.

Elevate your website's functionality and user engagement with our Footer with Subscribe Form solution. Seamlessly integrated into your website's footer, this feature offers a convenient and unobtrusive way for visitors to subscribe to your updates, newsletters, or promotional offers.

With our customizable subscribe form, you have the flexibility to tailor it to match your brand's aesthetic seamlessly. Capture valuable leads and expand your subscriber base effortlessly. Whether you're running a blog, an e-commerce platform, or a corporate website, our Footer with Subscribe Form is designed to enhance user experience and drive conversions.

Key Features:

  • Easy integration: Simply add our Footer with Subscribe Form to your website footer without any hassle.
  • Customization options: Match the look and feel of your website by customizing the form's design and fields.
  • Seamless user experience: Ensure a smooth browsing experience for your visitors with a non-intrusive subscription option.
  • Enhanced engagement: Encourage visitors to stay connected with your brand by offering a convenient way to subscribe.
  • Drive growth: Expand your audience and increase conversions by capturing valuable leads directly from your footer.

Code Explanation

Overall Structure:

  • The <footer> element wraps the entire footer section.
  • It has a background color of gray (bg-gray-900).

Content Layout:

  • The content is contained within a <div> with maximum screen width (max-w-screen-xl).
  • It has horizontal padding (px-4) which increases on small (sm:px-6) and large (lg:px-8) screens.
  • The content is organized into two main columns for larger screens (lg:flex lg:items-start).

Footer Logo:

  • An image (<img>) is included on the left side with a small margin on the right (mr-3).
  • It has predefined height (h-10) and adjusts width accordingly (w-auto).
  • Alt text is provided for accessibility (alt="CodewithFaraz Footer Logo").

Newsletter Subscription Section:

  • The right side contains a form for newsletter subscription.
  • It is organized into a grid layout with 2 columns on smaller screens and 5 columns on larger screens.
  • The form includes an input field for email and a subscribe button.
  • The input field has rounded corners (rounded-full), a gray border (border-gray-200), and a background color (bg-gray-100).
  • The subscribe button has a blue background color (bg-blue-600) which changes on hover (hover:bg-blue-700).

Navigation Links:

  • Various sections of navigation links are provided under headings like "Quick Links", "Components", "Useful Tools", "Free Icons", and "Category".
  • Each section consists of a list of links (<ul>) with list items (<li>).
  • Links have a transition effect on hover (transition hover:opacity-75).

Social Media Links:

  • Social media icons with links are included at the bottom.
  • Icons for Facebook, Instagram, Twitter, GitHub, and YouTube are provided.
  • Links open in a new tab (rel="noreferrer" target="_blank").
  • Icons change color on hover to their respective brand colors.

Footer Information:

  • At the very bottom, copyright information and links to terms & conditions and privacy policy are provided.
  • Links have a transition effect on hover (transition hover:opacity-75).