Thiết kế website giá rẻ

Question

`I have this code that I am adding to my wordpress, I want to add the code that was provided to me for the gravity forms form [gravityform id=”1″ title=”true”], but I still don’t really know how to include it. I did it this way but I can’t see it.
The idea is that when we press the Prospective Client button it shows the form


<!-- SAMPLE PROOF OF CONCEPT CODE -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test Form Routing</title>
    <style>
      /* Add your custom styles here */
    </style>
  </head>

  <!-- CSS styles -->
  <style>
    /* Styles for the first button type (button A)*/
    .buttonA {
      border: 2px solid white;
      background: #02457c;
      color: #ffffff;
      font-family: "Source Sans 3";
      font-style: normal;
      font-size: 16px;
      font-weight: 600;
      padding: 20px 20px;
      margin-bottom: 30px;
      border-radius: 30px;
      cursor: pointer;

      transition: background 0.3s, color 0.3s, border-color 0.3s;
    }

    .buttonA:hover {
      background: #002847;
      border: 3px solid #ffffff;
    }

    /* Styles for the first button type (button B)*/
    .buttonB {
      border: 2px solid #02457c;
      background: #ffffff;
      color: #02457c;
      font-family: "Source Sans 3";
      font-style: normal;
      font-size: 16px;
      font-weight: 600;
      padding: 20px 20px;
      margin-bottom: 30px;
      border-radius: 30px;
      cursor: pointer;
      transition: background 0.3s, color 0.3s, border-color 0.3s;
    }

    .buttonB:hover {
      background: white;
      border: 3px solid #002847;
    }

    .description {
      text-align: center;
      margin-bottom: 10px;
    }

      /* Styles for button container */
      .button-container {
            text-align: center;
        }
  </style>

  <body>
    <!-- Buttons -->
    <button id="buttonA" class="buttonA">Prospective Client</button>
    <button id="buttonB" class="buttonB">Existing Client</button>

    <!-- Content for button A -->
    <div id="contentA">
        <div id="formContainer" style="display: none">
          [gravityform id="1" title="true"]
        </div>
      </div>

    <!-- Content for button B -->
    <div id="contentB" style="display: none">
      <div class="description">Discovery Meeting Description</div>
      <div class="button-container">
      <button id="discoveryButton" class="buttonA">Discovery Meeting</button>
    </div>
      <div class="description">Review Meeting Description</div>
      <div class="button-container">
      <button id="reviewButton" class="buttonA">Review Meeting</button>
      </div>
      <div class="description">Quick Chat Description</div>
      <div class="button-container">
        <button id="quickChatButton" class="buttonA">Quick Chat</button>
        </div>
      </div>
    </div>

    <!-- Back button -->
    <button id="backButton" class="buttonB" style="display: none">Back</button>

    <!-- JavaScript script -->
    <script>
      // Click event for button A
      document.getElementById("buttonA").addEventListener("click", function () {
            document.getElementById("contentA").style.display = "block"; // Show content A
            document.getElementById("formContainer").style.display = 'block'; 
            document.getElementById("contentB").style.display = "none"; // Hide content B
            document.getElementById("buttonA").style.display = "none"; // Hide button A
            document.getElementById("buttonB").style.display = "none"; // Hide button B
            document.getElementById("backButton").style.display = "block"; // Show back button
        });

      // Click event for button B
      document.getElementById("buttonB").addEventListener("click", function () {
        document.getElementById("contentA").style.display = "none"; // Hide content A
        document.getElementById("contentB").style.display = "block"; // Show content B
        document.getElementById("buttonA").style.display = "none"; // Hide button A
        document.getElementById("buttonB").style.display = "none"; // Hide button B
        document.getElementById("backButton").style.display = "block"; // Show back button
      });

      // Click event for back button
      document
        .getElementById("backButton")
        .addEventListener("click", function () {
          document.getElementById("contentA").style.display = "none"; // Hide content A
          document.getElementById("contentB").style.display = "none"; // Hide content B
          document.getElementById("buttonA").style.display = "block"; // Show button A
          document.getElementById("buttonB").style.display = "block"; // Show button B
          document.getElementById("backButton").style.display = "none"; // Hide back button
        });


      // Event listeners for buttons in content B
      document
        .getElementById("discoveryButton")
        .addEventListener("click", function () {
          window.location.href = "https://wiserwealth.as.me/discovery";
        });

      document
        .getElementById("reviewButton")
        .addEventListener("click", function () {
          window.location.href = "https://wiserwealth.as.me/review";
        });

      document
        .getElementById("quickChatButton")
        .addEventListener("click", function () {
          window.location.href = "https://wiserwealth.as.me/quickchat";
        });
    </script>
  </body>
</html>`

Thiết kế website giá rẻ

Danh mục

Add Gravity Forms to my code I’m using javascript