Plugin development not going as expected

  • Resolved kristennn

    (@kristennn)


    1 year, 8 months ago

    Hello,

    I need help with my plugin development. I created a plugin named trial_user.php and it contains this code:

    <html>
<head>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <form method="POST">
      <div class="form-wrapper">
         <div class="container">
            <div class="field firstname">
               <label for="first_name">Your first name:</label><br>
               <input type="text" name="first_name">
            </div>
            <div class="field lastname">
               <label for="last_name">Your last name:</label><br>
               <input type="text" name="last_name">
            </div>
            <div class="field email">
               <label for="email">Your email:</label><br>
               <input type="email" name="email">
            </div>
            <div class="field phone_number">
               <label for="phone_number">Your phone number:</label><br>
               <input type="tel" name="phone_number">
            </div>
            <div class="field company_name">
               <label for="company_name">Your company name:</label><br>
               <input type="text" name="company_name">
            </div>
            <div class="field country_location">
               <label for="country_location">Where are you from?</label><br>
               <input type="text" name="country_location">
            </div>
            <div class="field country_code">
               <label for="country_code">Your country code:</label><br>
               <input type="text" name="country_code">
            </div>
            <div class="footer">
               <div class="submit_button">
                  <input type="submit" id="trial_user_button" value="submit" value="Try Now">
               </div>
               <div class="note">
                  <p id="trial_user_note">By clicking the "Try Now" button you agree to our Privacy Policy and
                     Terms
                     of Use.
                  </p>
               </div>
            </div>
         </div>
      </div>
   </form>
</body>
</html>
<?php
/*
* Plugin Name: Trial User Creation API
* Description: This plugin uses X company trial user API to create trial user. It was created for the purpose of showing error messages when something went wrong which none of the wordpress plugins I tried to use, did.
* Version: 1.1
* Requires PHP: 8.2
* Author: Fake Name
*/

var_dump($_SERVER['REQUEST_METHOD']);

if ($_SERVER['REQUEST_METHOD'] == "POST") {

   $test_api_url = "";
   $first_name = $_POST['first_name'];
   $last_name = $_POST['last_name'];
   $email = $_POST['email'];
   $phone_number = $_POST['email'];
   $company_name = $_POST['company_name'];
   $country_location = $_POST['country_location'];
   $country_code = $_POST['country_code'];

   $data = [

      "first_name" => "$first_name",
      "last_name" => "$last_name",
      "email" => "$email",
      "phone_mobile" => "$phone_number",
      "company_name" => "$company_name",
      "website" => "$country_location",
      "country_code" => "$country_code"
   ];

   $curl = curl_init($test_api_url);
   curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
   curl_setopt($curl, CURLOPT_POST, true);
   curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
   curl_setopt($curl, CURLOPT_HTTPHEADER, [
      'Content-Type: application/json'

   ]);

   $response = curl_exec($curl);
   curl_close($curl);
   echo $response . PHP_EOL;

};

?>
    .form-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 600px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1rem;
  gap: 0 2rem;
  
  width: 500px
}

.field {
  display: flex;
  flex-direction: column;
  margin: 0 -1rem;
  width: calc(50% - 2rem);
  padding: 1rem;
}

.footer {
  width: 100%;
}

    The above one is style.css for my HTML. I activated my plugin to test it out and see what it does but it did this instead:

    My goal:
    1. Activate plugin
    2. Go to the page I want to
    3. Insert shortcode
    4. HTML form is shown
    5. I write data to HTML form, click submit button and it sends data to the API url.

    How do I accomplish my goal?

    • This topic was modified 1 year, 8 months ago by kristennn. Reason: fixed img url
Viewing 9 replies - 1 through 9 (of 9 total)

  • It seems like the stylesheet is not being loaded properly. To ensure it is loaded correctly, you can enqueue your stylesheet using the wp_enqueue_style() function in your plugin’s PHP code.

    Here’s an example code snippet to enqueue your stylesheet:

    function trial_user_enqueue_styles() {
   wp_enqueue_style( 'trial_user_styles', plugins_url( 'style.css', __FILE__ ) );
}

add_action( 'wp_enqueue_scripts', 'trial_user_enqueue_styles' );

    After the plugin header comments, you can add this code to your plugin file. This will ensure that your stylesheet is loaded correctly.

    To display the HTML form on a page, you can create a shortcode in your plugin file using the add_shortcode() function. Here’s an example code snippet:

    function trial_user_form_shortcode() {
   ob_start(); // start output buffering
   include( plugin_dir_path( __FILE__ ) . 'trial_user.php' ); // include your HTML form file
   return ob_get_clean(); // return the output buffer
}

add_shortcode( 'trial_user_form', 'trial_user_form_shortcode' );

    You can add this code to your plugin file after the wp_enqueue_style() function. This shortcode will allow you to display the HTML form on any page or post by inserting the shortcode [trial_user_form].

    Once the user submits the form, the data will be sent to the API URL specified in your plugin code.

    Moderator bcworkz

    (@bcworkz)

    The unexpected output error is because your main plugin file must not generate any output. Output should be triggered by filter and action hooks.

    Implementing a shortcode that renders a form is a good approach. You might want some sort of plugin settings page where you inform users about what shortcode to use, possibly collecting data which would be passed as shortcode attributes. You can add a settings screen to the admin menu with add_menu_page(). The callback you assign there is responsible for outputting the resulting settings screen content.

    Thread Starter kristennn

    (@kristennn)

    @faisalahammad It didn’t work as I expected, maybe I expected it to work but it was missing some key points that I perhaps did not add. It is my first time after all so I have a hard time fixing things, thus asking for help to understand how to resolve the problem and learn from it.

    Please see the video I’ve added below, showing you what I tried to do and what happened instead.

    https://vimeo.com/803389859

    <?php

/*
 * Plugin Name: Trial User Creation API
 * Description: test description
 * Version: 1.0
 * Author: Fake Name
 */

function trial_user_enqueue_styles()
{
   wp_enqueue_style("trial_user_styles", plugins_url("style.css", __FILE__));
}
add_action("wp_enqueue_scripts", "trial_user_enqueue_styles");

function trial_user_form_shortcode()
{
   ob_start();
   include(plugin_dir_path(__FILE__) . "trial_user.php");
   return ob_get_clean();
}
add_shortcode("trial_user_form", "trial_user_form_shortcode");
?>

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
   <form method="POST">
      <div class="form-wrapper">
         <div class="container">
            <div class="field firstname">
               <label for="first_name">Your first name:</label><br>
               <input type="text" name="first_name">
            </div>
            <div class="field lastname">
               <label for="last_name">Your last name:</label><br>
               <input type="text" name="last_name">
            </div>
            <div class="field email">
               <label for="email">Your email:</label><br>
               <input type="email" name="email">
            </div>
            <div class="field phone_number">
               <label for="phone_number">Your phone number:</label><br>
               <input type="tel" name="phone_number">
            </div>
            <div class="field company_name">
               <label for="company_name">Your company name:</label><br>
               <input type="text" name="company_name">
            </div>
            <div class="field country_location">
               <label for="country_location">Where are you from?</label><br>
               <input type="text" name="country_location">
            </div>
            <div class="field country_code">
               <label for="country_code">Your country code:</label><br>
               <input type="text" name="country_code">
            </div>
            <div class="footer">
               <div class="submit_button">
                  <input type="submit" id="trial_user_button" value="submit" value="Try Now">
               </div>
               <div class="note">
                  <p id="trial_user_note">By clicking the "Try Now" button you agree to our Privacy Policy and
                     Terms
                     of Use.
                  </p>
               </div>
            </div>
         </div>
      </div>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == "POST") {
         $test_api_url = "";

         $first_name = $_POST['first_name'];
         $last_name = $_POST['last_name'];
         $email = $_POST['email'];
         $phone_number = $_POST['email'];
         $company_name = $_POST['company_name'];
         $country_location = $_POST['country_location'];
         $country_code = $_POST['country_code'];

         $data = [
            "first_name" => "$first_name",
            "last_name" => "$last_name",
            "email" => "$email",
            "phone_mobile" => "$phone_number",
            "company_name" => "$company_name",
            "website" => "$country_location",
            "country_code" => "$country_code"
         ];

         $curl = curl_init($test_api_url);
         curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
         curl_setopt($curl, CURLOPT_POST, true);
         curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
         curl_setopt($curl, CURLOPT_HTTPHEADER, [
            'Content-Type: application/json'
         ]);
         $response = curl_exec($curl);
         curl_close($curl);

         echo $response . PHP_EOL;
      };
      ?>
   </form>
</body>

</html>

    @bcworkz I thought about the menu but it’s useful only if the plugin allows some customization to be done and I do not have enough experience to play around with settings either :(. My plugin is going to be for a specific thing. I want to replace one specific contact form 7 form with my plugin to accomplish my goal of showing an error message from the API response next to a specific input field. The API does some input validation and returns an error if something is wrong which is what I want to accomplish.

    Thread Starter kristennn

    (@kristennn)

    I still haven’t found out a solution to accomplish my goal ??

    Moderator bcworkz

    (@bcworkz)

    You still are getting the unexpected output error? Things will not work right as long as that persists. You must remove any HTML output (your form) from your main plugin file. The form’s HTML belongs in the shortcode callback. There it should be collected into a single variable and returned, never output. WP will manage shortcode output.

    Thread Starter kristennn

    (@kristennn)

    @bcworkz Where do I put the HTML if I can’t keep it inside .php?

    Removing HTML from .php file gets rid of the unexpected output error but then the shortcode does not contain anything. Can I keep PHP and HTML separate then like HTML in .html file and PHP in .php? How do I call HTML code from .html file into .php file?

    <?php

/*
 * Plugin Name: Trial User Creation API
 * Description: test description
 * Version: 1.0
 * Author: Fake Name
 */

function trial_user_enqueue_styles()
{
   wp_enqueue_style("trial_user_styles", plugins_url("style.css", __FILE__));
}
add_action("wp_enqueue_scripts", "trial_user_enqueue_styles");

function trial_user_form_shortcode()
{
   ob_start();
   include(plugin_dir_path(__FILE__) . "trial_user.php");
   return ob_get_clean();
}
add_shortcode("trial_user_form", "trial_user_form_shortcode");

?>

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
   <form method="POST">
      <div class="form-wrapper">
         <div class="container">
            <div class="field firstname">
               <label for="first_name">Your first name:</label><br>
               <input type="text" name="first_name">
            </div>
            <div class="field lastname">
               <label for="last_name">Your last name:</label><br>
               <input type="text" name="last_name">
            </div>
            <div class="field email">
               <label for="email">Your email:</label><br>
               <input type="email" name="email">
            </div>
            <div class="field phone_number">
               <label for="phone_number">Your phone number:</label><br>
               <input type="tel" name="phone_number">
            </div>
            <div class="field company_name">
               <label for="company_name">Your company name:</label><br>
               <input type="text" name="company_name">
            </div>
            <div class="field country_location">
               <label for="country_location">Where are you from?</label><br>
               <input type="text" name="country_location">
            </div>
            <div class="field country_code">
               <label for="country_code">Your country code:</label><br>
               <input type="text" name="country_code">
            </div>
            <div class="footer">
               <div class="submit_button">
                  <input type="submit" id="trial_user_button" value="submit" value="Try Now">
               </div>
               <div class="note">
                  <p id="trial_user_note">By clicking the "Try Now" button you agree to our Privacy Policy and
                     Terms
                     of Use.
                  </p>
               </div>
            </div>
         </div>
      </div>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == "POST") {
         $test_api_url = "";

         $first_name = $_POST['first_name'];
         $last_name = $_POST['last_name'];
         $email = $_POST['email'];
         $phone_number = $_POST['email'];
         $company_name = $_POST['company_name'];
         $country_location = $_POST['country_location'];
         $country_code = $_POST['country_code'];

         $data = [
            "first_name" => "$first_name",
            "last_name" => "$last_name",
            "email" => "$email",
            "phone_mobile" => "$phone_number",
            "company_name" => "$company_name",
            "website" => "$country_location",
            "country_code" => "$country_code"
         ];
      }
      ?>
   </form>
</body>

</html>
    Thread Starter kristennn

    (@kristennn)

    Seems like my idea worked.

    PHP file

    <?php

/*

 * Plugin Name: Trial User Creation API

 * Description: test description

 * Version: 1.0

 * Author: Fake Name

 */

function trial_user_enqueue_styles()

{

   wp_enqueue_style("trial_user_styles", plugins_url("style.css", __FILE__));

}

add_action("wp_enqueue_scripts", "trial_user_enqueue_styles");

function trial_user_form_shortcode()

{

   ob_start();

   include(plugin_dir_path(__FILE__) . "trial_user.html");

   return ob_get_clean();

}

add_shortcode("trial_user_form", "trial_user_form_shortcode");

?>

    HTML file

    <!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
   <form method="POST">
      <div class="form-wrapper">
         <div class="container">
            <div class="field firstname">
               <label for="first_name">Your first name:</label><br>
               <input type="text" name="first_name">
            </div>
            <div class="field lastname">
               <label for="last_name">Your last name:</label><br>
               <input type="text" name="last_name">
            </div>
            <div class="field email">
               <label for="email">Your email:</label><br>
               <input type="email" name="email">
            </div>
            <div class="field phone_number">
               <label for="phone_number">Your phone number:</label><br>
               <input type="tel" name="phone_number">
            </div>
            <div class="field company_name">
               <label for="company_name">Your company name:</label><br>
               <input type="text" name="company_name">
            </div>
            <div class="field country_location">
               <label for="country_location">Where are you from?</label><br>
               <input type="text" name="country_location">
            </div>
            <div class="field country_code">
               <label for="country_code">Your country code:</label><br>
               <input type="text" name="country_code">
            </div>
            <div class="footer">
               <div class="submit_button">
                  <input type="submit" id="trial_user_button" value="submit" value="Try Now">
               </div>
               <div class="note">
                  <p id="trial_user_note">By clicking the "Try Now" button you agree to our Privacy Policy and
                     Terms
                     of Use.
                  </p>
               </div>
            </div>
         </div>
      </div>
   </form>
</body>

</html>

    Where do I put the PHP code to work with the HTML form?

    var_dump($_SERVER['REQUEST_METHOD']);
    if ($_SERVER['REQUEST_METHOD'] == "POST") {
        $test_api_url = "";

        $first_name = $_POST['first_name'];
        $last_name = $_POST['last_name'];
        $email = $_POST['email'];
        $phone_number = $_POST['email'];
        $company_name = $_POST['company_name'];
        $country_location = $_POST['country_location'];
        $country_code = $_POST['country_code'];

        $data = [
            "first_name" => "$first_name",
            "last_name" => "$last_name",
            "email" => "$email",
            "phone_mobile" => "$phone_number",
            "company_name" => "$company_name",
            "website" => "$country_location",
            "country_code" => "$country_code"
        ];

        $curl = curl_init($test_api_url);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_POST, true);
        curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
        curl_setopt($curl, CURLOPT_HTTPHEADER, [
            'Content-Type: application/json'
        ]);
        $response = curl_exec($curl);
        curl_close($curl);

        echo $response . PHP_EOL;
    };
    Thread Starter kristennn

    (@kristennn)

    Oh, it was simpler than I thought. It’s solved now, thanks guys!

    Moderator bcworkz

    (@bcworkz)

    You didn’t need help, you needed time to think! ?? Nicely done.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Plugin development not going as expected’ is closed to new replies.

Tags