Author: rajumdhaka

Form data save to database and display

First need to create the table name from the PHPMyAdmin or we can create from functions.php file link

Form name field name can’t be same like database name. 

<?php

if(isset($_POST['submitbtn'])){
  $custom_data = array (
    'fname' => $_POST['fname'],
    'lname' => $_POST['lname'],
  );
  $table_name = 'booking';
  $result = $wpdb->insert($table_name, $custom_data, $format=NULL);
}

if($result== 1){
  echo "<script>alert('Data saved.')</script>";
}else {
  echo "<script>alert('Data not saved.')</script>";
}

?>

<form action="" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit" name="submitbtn">
</form>

<br><br>
<hr>
<?php
global $wpdb;

$result = $wpdb->get_results("Select * from booking"); 

foreach ($result as $book) { ?>
<h1><?php echo $book->fname ?></h1>
<h1><?php echo $book->lname ?></h1>
<?php } ?>

Create a database table when activating a WordPress theme

add_action("after_switch_theme", "mytheme_create_extra_table");

or

add_action("init", "mytheme_create_extra_table");

function mytheme_create_extra_table(){
    global $wpdb;

    require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );

    $table_name = $wpdb->prefix . "translations";  //get the database table prefix to create my new table

    $sql = "CREATE TABLE $table_name (
      id int(10) unsigned NOT NULL AUTO_INCREMENT,
      identifier varchar(255) NOT NULL,
      translation varchar(255) NOT NULL,
      lang varchar(5) NOT NULL,
      notes varchar(255) DEFAULT NULL,
      PRIMARY KEY  (id),
      KEY Index_2 (lang),
      KEY Index_3 (identifier)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;";

    dbDelta( $sql );
}

Mailchimp form CSS

/* Mailchimp */
.mc4wp-form-fields:nth-child(2) {
    text-align: center;
}

#mc4wp-form-1 > div.mc4wp-form-fields > p:nth-child(3) {
    text-align: center;
}

#mc4wp-form-1 > div.mc4wp-form-fields input[type="submit"] {
    background: #F8BFC1;
    color: #000;
    border: #000;
}

.mc4wp-form-success .mc4wp-form-fields {
    display: none;
}

Click to box content change

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <script defer>
      document.addEventListener("DOMContentLoaded", function () {
        const headerElement = document.querySelector(
          ".sequences-card__content__header > h1"
        );
        const bodyElement = document.querySelector(
          ".sequences-card__content__body"
        );
        const messages = [...document.querySelectorAll(".sequence-card-2")];
        const messageIcon = document.querySelector(".sequence-icon.message");
        const emailIcon = document.querySelector(".sequence-icon.email");
        const inmailIcon = document.querySelector(".sequence-icon.inmail");
        const connectIcon = document.querySelector(".sequence-icon.connect");
        messages.forEach((message) =>
          message.addEventListener("click", (e) => {
            messages.forEach((m) => {
              if (m.classList.contains("focused")) {
                m.classList.remove("focused");
              }
            });
            e.target.classList.add("focused");
            messageIcon.classList.remove("focused");
            emailIcon.classList.remove("focused");
            inmailIcon.classList.remove("focused");
            connectIcon.classList.remove("focused");

            // Logic for content
            if (e.target.classList.contains("connect-2")) {
              connectIcon.classList.add("focused");
              headerElement.textContent = "Connection Request";
              bodyElement.innerHTML =
                "<p>Hi {{firstName}},</p><p>I am seeking to connect with other founders and your profile caught my attention!</p><p>Cheers,</p><p>Kris</p>";
            }

            if (e.target.classList.contains("message-4")) {
              messageIcon.classList.add("focused");
              headerElement.textContent = "Message";
              bodyElement.innerHTML =
                "<p>Glad to connect</p><p>Hi {{firstName}}, thanks for connecting! I was wondering if you are using any automation tools in your sales stack?</p>";
            }

            if (e.target.classList.contains("message-5")) {
              messageIcon.classList.add("focused");
              headerElement.textContent = "Message";
              bodyElement.innerHTML =
                "<p>The reason I am asking is that we developed a cloud-based automation tool not just for LinkedIn outreach but for email as well. We are constantly adding new features and our latest addition are Smart sequences. With Smart sequences, you can use a multi-channel approach and choose different steps in your campaign based on IF/ELSE conditions and your lead’s actions. </p><p>I would be happy to provide you with a free trial to test our tool- The Ultimate Lead Generation Tool.</p>";
            }

            if (e.target.classList.contains("message-6")) {
              messageIcon.classList.add("focused");
              headerElement.textContent = "Message";
              bodyElement.innerHTML =
                "<p>Hey {{firstName}},</p><p>Just checking if you saw my previous messages and if you would like to get the free trial? 🙋‍♀️</p>";
            }

            if (e.target.classList.contains("inmail-7")) {
              inmailIcon.classList.add("focused");
              headerElement.textContent = "InMail";
              bodyElement.innerHTML =
                "<p>Subject: <b>You will never be ignored on LinkedIn after this.</b></p><p>Hi {{firstName}</p><p>Do you want to be able to contact your potential prospects even if they are not responding on LinkedIn? There is a way.With The Ultimate Lead Generation Tool, a tool we have developed, you are able to do both LinkedIn and Email outreach. Also, we just added Smart sequences. With Smart sequences, you can use a multi-channel approach and choose different steps in your campaign based on your lead’s actions. If they decline or ignore your request you can send them InMail, like I just did. :) Would you like to hear more about The Ultimate Lead Generation Tool?</p>";
            }

            if (e.target.classList.contains("inmail-8")) {
              inmailIcon.classList.add("focused");
              headerElement.textContent = "InMail";
              bodyElement.innerHTML =
                "<p>Subject: <b>Do you want to improve your response rate?</b></p><p>Hi {{firstName}},</p><p>I would like to provide you with a free trial to test The Ultimate Lead Generation Tool and try all the great features for yourself. Are you up for it? No strings attached.</p><p>Kris</p><p>Founder @TheUltimateLeadGenerationTool</p>";
            }
          })
        );
      });
    </script>

    <style type="text/css" id="wp-custom-css">
      .box-line {
        width: 500px !important;
        max-width: 100%;
        margin: 0 auto;
      }

      .site-content,
      .hentry,
      .entry-content {
        margin: 0;
      }

      .pricing-page-list ul.elementor-icon-list-items {
        display: table;
        margin: auto !important;
      }

      #masthead .custom-logo,
      footer img {
        max-width: 150px !important;
        height: auto !important;
      }

      footer .tg-footer-widget-container {
        border-bottom: 1px solid #fff;
      }

      #masthead {
        position: fixed;
        width: 100%;
        top: 0;
        background-color: #fafcff;
        z-index: 10000;
      }

      .tg-primary-menu > div ul li a {
        color: #2a3773;
        text-decoration: none;
        font-weight: 700;
      }

      .tg-primary-menu.tg-primary-menu--style-underline
        > div
        > ul
        > li.current_page_item
        > a::before,
      .tg-primary-menu.tg-primary-menu--style-underline
        > div
        > ul
        > li.current-menu-item
        > a::before,
      .tg-primary-menu.tg-primary-menu--style-left-border
        > div
        > ul
        > li.current_page_item
        > a::before,
      .tg-primary-menu.tg-primary-menu--style-left-border
        > div
        > ul
        > li.current-menu-item
        > a::before,
      .tg-primary-menu.tg-primary-menu--style-right-border
        > div
        > ul
        > li.current_page_item
        > a::before,
      .tg-primary-menu.tg-primary-menu--style-right-border
        > div
        > ul
        > li.current-menu-item
        > a::before {
        content: none;
      }

      .elementor-icon-list-icon {
        background-color: rgba(116, 185, 255, 0.3);
        fill: #74b9ff;
        color: #74b9ff;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .footer-link-list,
      .footer-link-list a {
        padding: 0 !important;
        color: #fff;
      }

      .footer-link-list li {
        border: none !important;
      }

      .tg-site-footer-widgets .widget-title {
        margin: 0;
        color: #fff;
        font-size: 21px;
      }

      @media screen and (max-width: 767px) {
        p {
          margin: 0;
        }
        .main-section-img img {
          margin-top: 80px;
          max-width: 300px;
        }
        .main-section-content {
          margin-bottom: 50px;
        }
        .main-section-content-title h2,
        .automate-section-column-title h2,
        .automate-section-column-text p,
        .target-section-content-column-title h2,
        .target-section-content-column-text p,
        .monitor-campaign-section-title h2,
        .monitor-campaign-section-text p,
        .target-section-content-column-list-title h6 {
          text-align: center;
        }
        .main-section-content-list ul,
        .elementor-icon-list-items {
          display: table;
          margin: auto !important;
        }
        .main-section-content-button,
        .get-started-content-button {
          width: 100% !important;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin: 10px 0;
        }
        .elementor-33 .elementor-element > .elementor-element-populated,
        .elementor-33 .elementor-element {
          padding: 0 !important;
        }
        .elementor-33 .elementor-element > .elementor-widget-container {
          margin: 20px 0 0 0 !important;
        }
        .target-section-content-column-title,
        .target-section-content-column-text,
        .target-section-content-column-list-title,
        .automate-section-column-title,
        .automate-section-column-text {
          margin: 0 !important;
        }
        .elementor-33
          .elementor-element
          .elementor-widget-icon-list
          .elementor-widget-container {
          margin: 10px 0 20px 0 !important;
        }
        .elementor-33 section.elementor-element {
          padding: 0 10px !important;
        }
        .elementor-33 .elementor-element.get-started-section {
          padding: 10px 10px 20px 10px !important;
        }
      }

      .elementor-accordion .elementor-tab-title,
      .elementor-accordion .elementor-tab-content {
        border: 0px;
      }

      .elementor-accordion .elementor-accordion-item,
      .elementor-accordion
        .elementor-accordion-item
        + .elementor-accordion-item {
        box-shadow: 5px 5px 5px #9ca3ae3b;
        border: 1px solid #e1e7f1;
        border-radius: 12px;
        margin-bottom: 20px;
        padding: 10px;
      }
      .elementor-widget-accordion .elementor-active .elementor-accordion-icon,
      .elementor-widget-accordion .elementor-active .elementor-accordion-title,
      .entry-content a:hover {
        color: #74b9ff;
      }

      #testimonial-section {
        display: none;
      }
      .bdp-post-categories {
        display: none;
      }

      .bdp-post-masonry.bdp-effect-2 .bdp-post-grid {
        width: calc(100% / 3);
      }

      @media screen and (max-width: 1200px) {
        .bdp-post-masonry.bdp-effect-2 .bdp-post-grid {
          width: calc(100% / 2);
        }
      }

      @media screen and (max-width: 575px) {
        .bdp-post-masonry.bdp-effect-2 .bdp-post-grid {
          width: 100%;
        }
      }

      .bdp-post-grid-content {
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 2px rgba(119, 119, 119, 0.1);
        background: #fff;
      }

      .bdp-post-grid-content:hover {
        -webkit-box-shadow: 0 1.25rem 2.813rem rgba(119, 119, 119, 0.3);
        -moz-box-shadow: 0 1.25rem 2.813rem rgba(119, 119, 119, 0.3);
        box-shadow: 0 1.25rem 2.813rem rgba(119, 119, 119, 0.3);
        -webkit-transform: translateY(-0.625rem);
        -moz-transform: translateY(-0.625rem);
        transform: translateY(-0.625rem);
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
      }

      .bdp-post-title a {
        color: #444;
        font-size: 22px;
        font-weight: 500;
        line-height: 10px;
      }

      .bdp-readmorebtn {
        display: none;
      }

      .bdp-post-short-content {
        color: #777777;
        font-size: 14px;
      }

      .bdp-post-categories,
      .bdp-post-title,
      .bdp-post-date,
      .bdp-post-content {
        padding: 0 30px;
      }

      button.bdp-load-more-btn {
        font-size: 18px;
        font-weight: 600;
        fill: #ffffff;
        color: #ffffff;
        background-color: #74b9ff;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-radius: 30px;
        padding: 11px 32px 11px 32px;
      }

      .tg-page-header {
        display: none;
      }

      .tg-primary-menu > div > ul > li:last-child {
        fill: #74b9ff;
        color: #74b9ff;
        background-color: rgba(0, 0, 0, 0);
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-radius: 30px;
        padding: 5px 15px;
        margin: 0;
      }

      .tg-primary-menu > div > ul > li:last-child:hover a {
        color: rgba(116, 185, 255, 0.63);
      }
      .tg-primary-menu > div > ul > li:last-child a {
        color: #74b9ff;
      }

      .calendly-inline-widget {
        min-width: 0px !important;
      }

      @media screen and (max-width: 768px) {
        #primary {
          margin-bottom: 0px;
        }
      }

      @media screen and (min-width: 769px) {
        .entry-meta,
        .entry-content,
        .posts-navigation,
        .post-navigation {
          width: 70%;
          margin: auto;
        }
      }

      #comments {
        display: none;
      }

      .cat-links,
      .comments-link {
        display: none !important;
      }

      .post-thumbnail {
        margin-top: 80px;
      }

      .pum-close.popmake-close {
        height: 20px !important;
        width: 20px !important;
        right: -5px !important;
        top: -5px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #74b9ff !important;
        border-radius: 10px !important;
      }

      #basic-plan-list
        .elementor-icon-list-items
        li:nth-child(16)
        .elementor-icon-list-icon,
      #basic-plan-list
        .elementor-icon-list-items
        li:nth-child(12)
        .elementor-icon-list-icon,
      #basic-plan-list
        .elementor-icon-list-items
        li:nth-child(13)
        .elementor-icon-list-icon,
      #basic-plan-list
        .elementor-icon-list-items
        li:nth-child(14)
        .elementor-icon-list-icon,
      #basic-plan-list
        .elementor-icon-list-items
        li:nth-child(15)
        .elementor-icon-list-icon,
      #gold-plan-list
        .elementor-icon-list-items
        li:nth-child(14)
        .elementor-icon-list-icon,
      #gold-plan-list
        .elementor-icon-list-items
        li:nth-child(15)
        .elementor-icon-list-icon,
      #gold-plan-list
        .elementor-icon-list-items
        li:nth-child(16)
        .elementor-icon-list-icon {
        background-color: rgba(178, 183, 193, 0.2);
      }

      #basic-plan-list
        .elementor-icon-list-items
        li:nth-child(16)
        .elementor-icon-list-icon
        i,
      #basic-plan-list
        .elementor-icon-list-items
        li:nth-child(12)
        .elementor-icon-list-icon
        i,
      #basic-plan-list
        .elementor-icon-list-items
        li:nth-child(13)
        .elementor-icon-list-icon
        i,
      #basic-plan-list
        .elementor-icon-list-items
        li:nth-child(14)
        .elementor-icon-list-icon
        i,
      #basic-plan-list
        .elementor-icon-list-items
        li:nth-child(15)
        .elementor-icon-list-icon
        i,
      #gold-plan-list
        .elementor-icon-list-items
        li:nth-child(14)
        .elementor-icon-list-icon
        i,
      #gold-plan-list
        .elementor-icon-list-items
        li:nth-child(15)
        .elementor-icon-list-icon
        i,
      #gold-plan-list
        .elementor-icon-list-items
        li:nth-child(16)
        .elementor-icon-list-icon
        i {
        color: #b2b7c1;
      }

      #gold-plan {
        position: relative;
      }

      #gold-plan .elementor-column-wrap {
        overflow: hidden;
      }

      #gold-plan h5 {
        position: absolute;
        top: 32px;
        right: -51px;
        background-color: #74b9fd;
        color: #fff;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        width: 200px;
        transform: rotate(45deg);
        z-index: 100;
      }

      #gold-plan-heading {
        margin-top: -20px;
      }

      .entry-content {
        color: #000;
      }

      .entry-content p {
        font-size: 18px;
      }

      /**all-competitors page css for all competitors table**/
      .table-container {
        box-shadow: 5px 5px 10px #cccccc;
        display: flex;
      }

      .table-features {
        width: 55%;
        text-align: center;
      }

      .table-companies {
        display: inline-block;
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        margin-bottom: 10px;
      }

      .companies {
        display: inline-block;
        width: 24%;
      }

      .tooltip {
        display: flex;
        height: 44px;
      }

      .feature-container {
        margin-left: 15px;
        display: flex;
      }

      .sticky {
        width: 25%;
      }

      .feature {
        margin-top: auto;
        margin-bottom: auto;
        width: 100%;
      }

      .feature-heding {
        margin: 40px auto 5px auto;
      }

      .logo-heading-table {
        margin: 10px auto 20px auto;
        display: block;
      }
      .img-wrap {
        margin-left: auto;
        /* 	margin-right:auto; */
      }

      /*scrollbar*/
      .table-companies::-webkit-scrollbar {
        width: 10px;
      }

      .table-companies::-webkit-scrollbar-track {
        background: #d6ebff;
        border-radius: 10px;
      }

      .table-companies::-webkit-scrollbar-thumb {
        background: #74b9ff;
        border-radius: 10px;
        width: 10px;
      }

      /*all-competitors page css for client testimonials*/

      .testimonial-divider {
        border-top: 3px solid #74b9ff;
        margin: auto;
        width: 35%;
      }

      .client-name {
        font-weight: bold;
        font-size: 26px;
        margin: 18px;
      }

      .client-position {
        color: grey;
        font-size: 20px;
        margin: 9px;
      }

      .testimonial-text {
        margin-top: 23px;
        padding: 5px 35px 27px 35px;
      }

      .sp-testimonial-free {
        box-shadow: 5px 5px 10px #cccccc;
        width: 340px;
        padding-top: 25px;
        border-radius: 10px;
        background-color: white;
      }

      .sp-tfree-client-image {
        margin-top: 20px;
      }

      .container-skylead-competition {
        box-shadow: 5px 5px 10px #cccccc;
        border-radius: 10px;
      }

      .logo-aling {
        padding: 7px;
        margin-left: auto;
        margin-right: auto;
        display: block;
      }
      .vs-aling {
        text-align: center;
        margin: 0;
        text-align: center;
        margin: 0;
        font-size: 27px;
        font-weight: bold;
        color: #bfd7ef;
      }

      .book-quick-demo-container {
        padding-top: 65px;
        font-size: 25px;
        color: silver;
      }

      .text-color {
        color: #74b9ff;
      }

      .book-quick-demo-container-next-segment {
        font-size: 25px;
        color: silver;
      }
      /*testimonial dots*/

      .sp-testimonial-free-section .slick-dots li {
        display: inline-block;
        border: 0;
        padding: 0;
        width: 75px;
        margin: 3px;
        overflow: hidden;
      }

      .sp-testimonial-free-section .slick-dots li button {
        border-radius: 14%;
        text-indent: -999px;
        width: 70px;
        height: 12px;
        padding: 0;
        border: 0;
        display: block;
      }

      .sp-testimonial-free-section .slick-dots {
        margin-bottom: 30px;
      }
      .quotes {
        margin-left: 190px;
        margin-top: -64px;
      }

      /*media query for all-competitors table*/
      @media screen and (max-width: 1200px) {
        .table-features {
          width: 72%;
          text-align: center;
        }
        .feature-heding {
          margin: 15px auto 20px auto;
        }

        .companies {
          display: inline-block;
          width: 22%;
        }
      }

      @media screen and (max-width: 991px) {
        .table-features {
          width: 885px;
          text-align: center;
        }

        .companies {
          display: inline-block;
          width: 37%;
        }

        .sticky {
          width: 40%;
        }
      }

      @media screen and (min-width: 640px) and (max-width: 677px) {
        .feature-heding {
          margin: 35px auto 10px auto;
        }

        .table-features {
          width: 50%;
          text-align: center;
        }

        .companies {
          display: inline-block;
          width: 40%;
        }
      }

      @media screen and (min-width: 407px) and (max-width: 768px) {
        .feature-heding {
          margin: 25px auto 10px auto;
        }

        .table-features {
          width: 950px;
          text-align: center;
        }
        .feature-container {
          margin-left: 15px;
          display: flex;
          font-size: 13px;
        }

        .companies {
          display: inline-block;
          width: 47%;
        }

        .sticky {
          width: 50%;
        }

        .book-quick-demo-container {
          padding-top: 134px;
          font-size: 19px;
          color: silver;
        }

        .book-quick-demo-container-next-segment {
          font-size: 19px;
          color: silver;
        }
      }

      @media screen and (min-width: 408px) and (max-width: 677px) {
        .feature-heding {
          margin: 30px auto 10px auto;
        }

        .table-features {
          width: 100%;
          text-align: center;
        }

        .feature-container {
          margin-left: 10px;
          display: flex;
          font-size: 12px;
        }

        .companies {
          display: inline-block;
          width: 40%;
        }

        .sticky {
          width: 37%;
        }

        .table-companies {
          display: inline-block;
          width: 64%;
          overflow-x: scroll;
          overflow-y: hidden;
          white-space: nowrap;
          margin-bottom: 10px;
        }
        .book-quick-demo-container {
          padding-top: 134px;
          font-size: 19px;
          color: silver;
        }

        .book-quick-demo-container-next-segment {
          font-size: 19px;
          color: silver;
        }
      }

      @media screen and (min-width: 411px) and (max-width: 677px) {
        .feature-heding {
          margin: 30px auto 10px auto;
        }

        .table-features {
          text-align: center;
        }

        .companies {
          display: inline-block;
          width: 50%;
        }

        .sp-testimonial-free {
          margin-left: auto;
          margin-right: auto;
          background-color: white;
        }

        .tooltip {
          display: flex;
          height: 44px;
        }

        .book-quick-demo-container {
          padding-top: 134px;
          font-size: 19px;
          color: silver;
        }

        .book-quick-demo-container-next-segment {
          font-size: 19px;
          color: silver;
        }
      }

      @media screen and (max-width: 627px) {
        .feature {
          width: 100px;
        }

        .table-features {
          width: auto;
        }

        .img-wrap {
          width: 50px;
        }

        .tooltip {
          display: flex;
          height: 44px;
          width: auto;
        }

        .feature-container {
          margin-left: 15px;
          display: flex;
          font-size: 10px;
        }

        .logo-info-aling {
          height: 35px;
        }

        .companies {
          display: inline-block;
          width: 40%;
        }

        .sticky {
          width: 36%;
        }

        .sp-testimonial-free {
          margin-left: auto;
          margin-right: auto;
          background-color: white;
        }

        .book-quick-demo-container {
          padding-top: 134px;
          font-size: 19px;
          color: silver;
        }

        .book-quick-demo-container-next-segment {
          font-size: 19px;
          color: silver;
        }
      }

      @media screen and (min-width: 369px) and (max-width: 411px) {
        .feature-heding {
          margin: 18px auto 10px auto;
        }

        .table-features {
          width: 95%;
          text-align: center;
        }

        .companies {
          display: inline-block;
          width: 80%;
        }

        .sticky {
          width: 55%;
        }
      }

      @media screen and (max-width: 369px) {
        .feature-heding {
          margin: 10px auto 10px auto;
        }

        .table-features {
          width: 95%;
          text-align: center;
        }

        .companies {
          display: inline-block;
          width: 80%;
        }

        .sticky {
          width: 100%;
        }

        .sp-testimonial-free {
          margin-left: auto;
          margin-right: auto;
          background-color: white;
        }

        .book-quick-demo-container {
          padding-top: 134px;
          font-size: 19px;
          color: silver;
        }

        .book-quick-demo-container-next-segment {
          font-size: 19px;
          color: silver;
        }
      }

      .img-wrap {
        position: relative;
        display: inline-block;
      }

      .img-wrap:hover .icon-info {
        visibility: visible;
      }

      .img-wrap .icon-info {
        visibility: hidden;
        width: 250px;
        background-color: rgba(54, 80, 106, 1);
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 45%;
        left: -97%;
        margin-left: -60px;
      }

      .img-wrap .icon-info::after {
        content: " ";
        position: absolute;
        top: 100%; /* At the bottom of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
      }

      /*Comparison page table*/

      .companies-comparison-page {
        display: inline-block;
        width: 45%;
      }

      .tooltip-comparison-page {
        display: flex;
        height: 44px !important;
      }

      .feature-heding-comparison-page {
        margin: 35px auto 20px auto;
      }

      .table-companies-comparison-page {
        display: inline-block;
        width: 100%;
        margin-bottom: 10px;
      }

      @media screen and (min-width: 411px) and (max-width: 677px) {
        .feature-heding-comparison-page {
          margin: 23px auto 10px auto;
        }

        .feature-heding {
          /*  margin: 13px auto 10px auto;  */
          margin: 23px auto 10px auto;
        }

        .table-features {
          text-align: center;
        }

        .companies-comparison-page {
          display: inline-block;
          width: 49%;
        }

        .sp-testimonial-free {
          margin-left: auto;
          margin-right: auto;
          background-color: white;
        }

        .tooltip-comparison-page {
          display: flex;
          height: 44px;
        }

        .book-quick-demo-container {
          padding-top: 134px;
          font-size: 19px;
          color: silver;
        }

        .book-quick-demo-container-next-segment {
          font-size: 19px;
          color: silver;
        }
      }

      @media screen and (max-width: 407px) {
        .feature-heding-comparison-page {
          margin: 14px auto 10px auto;
        }
        .feature {
          width: 100px;
        }

        .table-features {
          width: auto;
        }

        .sticky {
          width: 90%;
        }

        .img-wrap {
          width: 50px;
        }

        .tooltip {
          display: flex;
          height: 44px;
          width: auto;
        }

        .feature-container {
          margin-left: 15px;
          display: flex;
          font-size: 10px;
        }

        .logo-info-aling {
          height: 35px;
        }

        .companies-comparison-page {
          display: inline-block;
          width: 42%;
        }

        .sp-testimonial-free {
          margin-left: auto;
          margin-right: auto;
          background-color: white;
        }

        .book-quick-demo-container {
          padding-top: 134px;
          font-size: 19px;
          color: silver;
        }

        .book-quick-demo-container-next-segment {
          font-size: 19px;
          color: silver;
        }
      }

      @media screen and (max-width: 349px) {
        .feature {
          width: 75px;
          text-align: initial;
        }

        .img-wrap {
          width: 35px;
        }

        .feature-heding {
          margin: 10px auto 10px auto;
        }

        .table-features {
          width: 95%;
          text-align: center;
        }

        .companies {
          display: inline-block;
          width: 80%;
        }
      }

      .comparison-title-footer {
        margin: 0;
        font-size: 21px;
      }

      .comparison {
        color: #fff;
        font-weight: 500;
      }

      .pricing-services {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
      }

      .pricing-services ul {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
      }

      .pricing-services li {
        width: 400px;
        display: flex;
        align-items: center !important;
      }

      .similar-sequence {
        width: 100%;
        background: rgba(116, 185, 255, 0.04);
        padding: 40px 0px;
      }

      .similar-sequence h2 {
        font-size: 3rem;
        text-align: center;
      }

      .sequences {
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 5px;
      }

      .sequences > * {
        margin: 20px;
      }

      .sequences-link {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 350px;
        box-shadow: 10px 10px 10px #89909b3b;
        border: 2px solid #e1e7f1;
        border-radius: 12px;
        padding: 20px 10px;
        cursor: pointer;
        text-decoration: none;
        background-color: #fff;
      }

      .sequences-link:hover {
        border-color: #77bafc;
      }

      .sequences-link > img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 300px;
        margin-bottom: 15px;
      }

      .sequences-link > h1 {
        font-size: 1.5rem;
        align-self: flex-start;
        color: #2a3773;
        height: 85px;
      }

      .sequences-link > ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        margin-right: auto;
      }

      .sequences-link > ul > li {
        display: flex;
        align-items: center;
        flex-grow: 1;
        font-size: 1rem;
        width: 45%;
        margin-bottom: 10px;
        color: #2a3773;
      }

      .sequences-link > ul > li > .rate {
        background: #74b9ff 0% 0% no-repeat padding-box;
        border-radius: 4px;
        margin-right: 10px;
        padding: 3px;
        color: #fff;
        font-size: 1rem;
      }

      .start-with-sequences {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        background: rgba(116, 185, 255, 0.18);
        padding: 40px 0px;
      }

      .start-with-sequences h2 {
        font-size: 3rem;
        text-align: center;
        color: #2a3773;
      }

      .start-with-sequences p {
        font-size: 1.5rem;
        padding: 0px 10px;
        text-align: center;
        color: #2a3773;
      }

      .start-with-sequences__buttons {
        margin-top: 80px;
      }

      .start-with-sequences__buttons button:first-child {
        background-color: #74b9ff;
        width: 200px;
        height: 50px;
        margin-right: 20px;
        border: none;
        border-radius: 36px;
      }

      .start-with-sequences__buttons button:nth-child(2) {
        background-color: #322c71;
        width: 200px;
        height: 50px;
        border: none;
        border-radius: 36px;
      }

      .start-with-sequences__buttons a {
        text-decoration: none;
        color: #fff;
        font-size: 1.2rem;
      }

      .sequences-header {
        background-color: #f9fcff;
        position: relative;
        display: flex;
        justify-content: center;
      }

      .sequences-header__wraper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 1200px;
        max-width: 100%;
        z-index: 2;
      }

      .sequences-header__wraper h1 {
        margin-top: 140px;
        font-size: 3rem;
        width: 80%;
        color: #2a3773;
        text-align: center;
      }

      .sequences-header__wraper p {
        padding: 0px 10px;
        color: #a5a8ad;
        font-size: 2rem;
        text-align: center;
      }

      .sequences-header__wraper ul {
        margin-top: 20px;
        width: 80%;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
      }

      .sequences-header__wraper li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 1.5rem;
        margin-bottom: 10px;
        min-width: 200px;
        max-width: 48%;
      }

      .sequences-header__wraper li > .rate {
        background: #74b9ff 0% 0% no-repeat padding-box;
        border-radius: 4px;
        margin-right: 10px;
        color: #fff;
        padding: 5px;
      }

      .sequences-card__info {
        margin-top: 150px;
        width: 70%;
      }

      .sequences-card__info span {
        display: flex;
        align-items: center;
        padding: 10px;
        width: max-content;
        background: rgba(198, 208, 217, 0.17);
        border-radius: 8px;
        color: #5b6281;
        align-self: flex-start;
      }

      .sequences-card__info span img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }

      .sequences-header__shape {
        width: 100%;
        height: 185px;
        transform: rotate(180deg);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
      }

      .sequences-header__shape > svg {
        background-color: #fff;
      }

      .sequences-header__fill {
        fill: #f9fcff;
      }

      .sequences-card > ul > li {
        margin-right: 10px;
      }

      .sequences-card__preview {
        width: 700px;
        height: auto;
        position: relative;
        margin-right: 40px;
      }

      .sequences-card__preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      .sequence-card {
        position: absolute;
        z-index: 1;
        background-color: transparent;
        width: 20.4%;
        height: 7.9%;
      }

      .sequence-card-1 {
        position: absolute;
        z-index: 1;
        background-color: transparent;
        width: 28.8%;
        height: 7.8%;
      }

      .sequence-card-2 {
        position: absolute;
        z-index: 1;
        background-color: transparent;
        width: 20.9%;
        height: 6.9%;
      }

      .sequence-card-3 {
        position: absolute;
        z-index: 1;
        background-color: transparent;
        width: 20.9%;
        height: 7%;
      }

      .sequence-card-4 {
        position: absolute;
        z-index: 1;
        background-color: transparent;
        width: 26.3%;
        height: 8.1%;
      }

      .sequence-card-5 {
        position: absolute;
        z-index: 1;
        background-color: transparent;
        width: 26.6%;
        height: 8.6%;
      }

      .sequence-card:hover,
      .sequence-card-1:hover,
      .sequence-card-2:hover,
      .sequence-card-3:hover,
      .sequence-card-4:hover,
      .sequence-card-5:hover {
        border: 1px solid #74b9fd;
        border-radius: 4px;
        cursor: pointer;
      }

      .sequence-card.focused,
      .sequence-card-1.focused,
      .sequence-card-2.focused,
      .sequence-card-3.focused,
      .sequence-card-4.focused,
      .sequence-card-5.focused {
        border: 1px solid #74b9fd;
        border-radius: 4px;
      }

      .sequences-card__wraper {
        margin: 20px auto auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 1200px;
        max-width: 100%;
        overflow: auto;
        padding-bottom: 40px;
      }

      .sequences-card__content {
        box-shadow: 10px 10px 10px #89909b3b;
        border: 2px solid #e1e7f1;
        border-radius: 12px;
        padding: 20px;
        width: 360px;
        min-height: 500px;
      }

      .sequences-card__content__header {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #74b9ff;
      }

      .sequences-card__content__header h1 {
        font-size: 1.5rem;
        color: #74b9ff;
        margin: 0;
      }

      .sequences-card__content__body {
        margin-top: 20px;
      }

      .sequence-icon {
        display: none;
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }

      .sequence-icon.focused {
        display: block;
      }

      @media only screen and (max-width: 1174px) {
        .sequences-card__preview {
          margin-right: 0;
          margin-bottom: 40px;
        }
      }

      @media only screen and (max-width: 600px) {
        .sequences-header {
          background-color: #f9fcff;
          position: relative;
          display: flex;
          justify-content: center;
        }

        .sequences-header__wraper h1 {
          font-size: 2rem;
          width: 90%;
        }

        .sequences-header__wraper p {
          color: #a5a8ad;
          font-size: 1.2rem;
          text-align: center;
        }

        .sequences-header__wraper li {
          font-size: 1rem;
        }

        .sequences-card__info {
          margin-top: 50px;
          width: 70%;
        }

        .sequences-card__wraper {
          margin-top: 50px;
        }

        .sequences-card__content {
          margin: auto 10px;
        }

        .similar-sequence h2 {
          font-size: 2rem;
        }

        .sequences-link > h1 {
          font-size: 1.2rem;
        }

        .sequences-link > ul > li {
          font-size: 0.8rem;
        }

        .start-with-sequences h2 {
          font-size: 2rem;
        }

        .start-with-sequences p {
          font-size: 1.2rem;
        }

        .start-with-sequences__buttons button {
          width: 150px !important;
        }

        .start-with-sequences__buttons a {
          font-size: 1rem;
        }
      }

      .connect-1 {
        top: 15.9%;
        left: 33%;
      }

      .connect-2 {
        top: 26.5%;
        left: 39.6%;
      }

      .connect-3 {
        top: 25.4%;
        left: 39.8%;
      }

      .connect-4 {
        top: 41.5%;
        left: 48.5%;
      }

      .connect-5 {
        top: 45.6%;
        left: 49.5%;
      }

      .message-1 {
        top: 38.4%;
        left: 19.9%;
      }

      .message-2 {
        top: 78%;
        left: 27.8%;
      }

      .message-3 {
        top: 89.3%;
        left: 27.7%;
      }

      .message-4 {
        top: 47.8%;
        left: 25.3%;
      }

      .message-5 {
        top: 57.7%;
        left: 19.3%;
      }

      .message-6 {
        top: 67.6%;
        left: 15%;
      }

      .message-7 {
        top: 47.3%;
        left: 25%;
      }

      .message-8 {
        top: 57.4%;
        left: 19.5%;
      }

      .message-9 {
        top: 67.5%;
        left: 15%;
      }

      .message-10 {
        top: 41.5%;
        left: 17.4%;
      }

      .message-11 {
        top: 64.7%;
        left: 10.5%;
      }

      .message-12 {
        top: 66.6%;
        left: 39.7%;
      }

      .message-13 {
        top: 78.2%;
        left: 39.8%;
      }

      .message-14 {
        top: 72.6%;
        left: 38.8%;
      }

      .message-15 {
        top: 86.2%;
        left: 38.8%;
      }

      .email-1 {
        top: 78%;
        left: 4.9%;
      }

      .email-2 {
        top: 89.3%;
        left: 3.6%;
      }

      .email-3 {
        top: 78%;
        left: 50.4%;
      }

      .email-4 {
        top: 89.3%;
        left: 50.5%;
      }

      .email-5 {
        top: 54.3%;
        left: 23.5%;
      }

      .email-6 {
        top: 76.8%;
        left: 2.5%;
      }

      .email-7 {
        top: 72.5%;
        left: 5.5%;
      }

      .email-8 {
        top: 87.1%;
        left: 70.6%;
      }

      .inmail-1 {
        top: 78%;
        left: 74.5%;
      }

      .inmail-2 {
        top: 89.3%;
        left: 76%;
      }

      .inmail-3 {
        top: 54.4%;
        left: 60%;
      }

      .inmail-4 {
        top: 67.5%;
        left: 67.9%;
      }

      .inmail-5 {
        top: 76.8%;
        left: 34.9%;
      }

      .inmail-6 {
        top: 88%;
        left: 38.9%;
      }

      .inmail-7 {
        top: 70.8%;
        left: 48.3%;
      }

      .inmail-8 {
        top: 80.6%;
        left: 44.4%;
      }

      .inmail-9 {
        top: 70.9%;
        left: 48.5%;
      }

      .inmail-10 {
        top: 81%;
        left: 44%;
      }

      .inmail-11 {
        top: 66.6%;
        left: 69.2%;
      }

      .inmail-12 {
        top: 45.6%;
        left: 12.6%;
      }
    </style>
  </head>

  <body
    class="
      page-template
      page-template-page-templates
      page-template-pagebuilder
      page-template-page-templatespagebuilder-php
      page
      page-id-4420
      page-child
      parent-pageid-4472
      wp-custom-logo
      tg-site-layout--stretched
      tg-container--wide
      has-page-header has-breadcrumbs
      elementor-default
    "
  >
    <div class="sequences-header__wraper">
      <div class="sequences-card__info">
        <span
          ><img
            src="https://www.theultimateleadgenerationtool.com/wp-content/uploads/2021/05/info-icon.png"
            alt="Info"
          />
          Click on a step to see the details.</span
        >
      </div>
    </div>

    <div class="sequences-card__wraper">
      <div class="sequences-card__preview">
        <img
          src="https://www.theultimateleadgenerationtool.com/wp-content/uploads/2021/05/sequence-3-1.png"
          alt="test"
        />
        <!-- // Cards -->
        <div class="sequence-card-2 connect-2 focused"></div>
        <div class="sequence-card-2 message-4"></div>
        <div class="sequence-card-2 message-5"></div>
        <div class="sequence-card-2 message-6"></div>
        <div class="sequence-card-2 inmail-7"></div>
        <div class="sequence-card-2 inmail-8"></div>
      </div>
      <div class="sequences-card__content">
        <div class="sequences-card__content__header">
          <img
            class="sequence-icon message"
            src="https://www.theultimateleadgenerationtool.com/wp-content/uploads/2021/05/message-icon.png
            "
            alt="Message"
          />
          <img
            class="sequence-icon email"
            src="https://www.theultimateleadgenerationtool.com/wp-content/uploads/2021/05/email-icon.png"
            alt="Email"
          />
          <img
            class="sequence-icon connect focused"
            src="https://www.theultimateleadgenerationtool.com/wp-content/uploads/2021/05/connect-icon.png"
            alt="Invite to connect"
          />
          <img
            class="sequence-icon inmail"
            src="https://www.theultimateleadgenerationtool.com/wp-content/uploads/2021/05/in-mail-icon.png"
            alt="InMail"
          />
          <h1>Connection Request</h1>
        </div>
        <div class="sequences-card__content__body">
          <p>Hi {{firstName}},</p>
          <p>
            I am seeking to connect with other founders and your profile caught
            my attention!
          </p>
          <p>Cheers,</p>
          <p>Kris</p>
        </div>
      </div>
    </div>
  </body>
</html>

Hide plugins update notification

function filter_plugin_updates( $value ) {
    unset( $value->response['elementor/elementor.php'] );
    return $value;
}
add_filter( 'site_transient_update_plugins', 'filter_plugin_updates' );

function filter_plugin_updates_pro( $value ) {
    unset( $value->response['elementor-pro/elementor-pro.php'] );
    return $value;
}
add_filter( 'site_transient_update_plugins', 'filter_plugin_updates_pro' );

Vuejs fetch random quote

<body>
    <div id="app">
      <div class="info" v-cloak>
        <blockquote>{{quote.content}}</blockquote>
        <p class="author">{{quote.author}}</p>
      </div>
    </div>
  </body>

  <script type="module">
    import {
      createApp,
      ref,
    } from "https://unpkg.com/vue@3.0.11/dist/vue.esm-browser.prod.js";
    const app = createApp({
      setup() {
        const quote = ref("");
        fetch("https://api.quotable.io/random")
          .then((res) => res.json())
          .then((data) => {
            quote.value = data;
          });

        return { quote };
      },
    });

    app.mount("#app");
  </script>
</html>

Enqueue CSS and JS

function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
 
  wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
 
  wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

  wp_enqueue_script( 'fontawesome', 'https://kit.fontawesome.com/4f07b38120.js', array( 'jquery' ), false, false );
 
    if ( is_singular() &amp;amp;amp;&amp;amp;amp; comments_open() &amp;amp;amp;&amp;amp;amp; get_option( 'thread_comments' ) ) {
      wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

For child theme directory

Need to use get_stylesheet_directory_uri()

 wp_enqueue_script( 'spidochetube', get_stylesheet_directory_uri() . '/JS/jquery.spidochetube.min.js', array ( 'jquery' ), 1.1, true);