Jump to content

Strange wheel spinning on a new page - How can i fix it

Recommended Posts


How can I stop this odd wheel spinning and allow the form to work please. 


Here are my files i've used for it.

newstarter.tpl - 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>New Starter Request Form</title>
        .form-header, .form-section {
            margin-bottom: 20px;
        .two-columns {
            display: flex;
            justify-content: space-between;
        .two-columns p {
            width: 48%;
    <form id="newStarterForm">
        <div class="form-header">
            <h2>New starter request form</h2>
            <p>Submit to request a new starter</p>
        <div class="two-columns">
            <p><input type="text" name="requester-name" placeholder="Requester Name" required></p>
            <p><input type="email" name="requester-email" placeholder="Requester Email" required></p>
        <div class="two-columns">
            <p><input type="tel" name="contact-number" placeholder="Contact Number"></p>
            <p><input type="text" name="requesting-company" placeholder="Requesting Company" required></p>
        <div class="form-section">
            <h3>New Starter Details</h3>
            <div class="two-columns">
                <p><input type="text" name="new-starter-full-name" placeholder="New Starter Full Name" required></p>
                <p><input type="text" name="job-title" placeholder="Job Title"></p>
            <div class="two-columns">
                <p><input type="tel" name="work-contact-number" placeholder="Work Contact Number"></p>
                <p><input type="email" name="required-company-email" placeholder="Required Company Email" required></p>
            <div class="two-columns">
                <p><input type="tel" name="personal-contact-number" placeholder="Personal Contact Number"></p>
                <p><input type="email" name="personal-email" placeholder="Personal Email"></p>
        <div class="form-section">
            <h4>Package required</h4>
                <input type="checkbox" name="package-required[]" value="Email"> Email<br>
                <input type="checkbox" name="package-required[]" value="Email with signatures setup"> Email with signatures setup<br>
                <input type="checkbox" name="package-required[]" value="Email & Office Suite"> Email & Office Suite<br>
                <input type="checkbox" name="package-required[]" value="Email, Office Suite & Teams"> Email, Office Suite & Teams<br>
                <input type="checkbox" name="package-required[]" value="Email, Office Suite, Teams & File Access"> Email, Office Suite, Teams & File Access
            <h4>Is IT Support package required?</h4>
                <input type="radio" name="it-support-package" value="Using an old device already on support plan"> Using an old device already on support plan<br>
                <input type="radio" name="it-support-package" value="New device requiring setup"> New device requiring setup<br>
                <input type="radio" name="it-support-package" value="Not needed"> Not needed
            <h4>Printer Setup required</h4>
            <p><input type="text" name="printer-setup" placeholder="Please input which printer, i.e., make & location"></p>
            <h4>Additional Email access</h4>
            <p><input type="text" name="additional-email-access"></p>
        <div class="form-section">
            <h3>Other Details</h3>
            <p><textarea name="file-access-required" placeholder="File Access Required"></textarea></p>
        <div class="form-section">
            <h3>Company Mobile Device</h3>
                <input type="checkbox" name="company-mobile-device[]" value="Yes"> Yes<br>
                <input type="checkbox" name="company-mobile-device[]" value="No"> No<br>
                <input type="checkbox" name="company-mobile-device[]" value="Yes & will need monitoring"> Yes & will need monitoring<br>
                <input type="checkbox" name="company-mobile-device[]" value="No will be using their own device but needs monitoring"> No will be using their own device but needs monitoring
            <h3>Start Date</h3>
            <p><input type="date" name="start-date" placeholder="Start Date" required></p>
        <p><input type="submit" value="Submit"></p>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
            $('#newStarterForm').on('submit', function(e){
                    url: 'submit_form.php',
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function(response){
                    error: function(){
                        alert('There was an error submitting the form.');

newstarter.php - 


use WHMCS\Authentication\CurrentUser;
use WHMCS\ClientArea;

define('CLIENTAREA', true);

require __DIR__ . '/init.php';

$ca = new ClientArea();

$ca->setPageTitle('New Starter Request Form');

$ca->addToBreadCrumb('index.php', Lang::trans('globalsystemname'));
$ca->addToBreadCrumb('newstarter.php', 'New Starter Request Form');


// Uncomment this line to require a login to access this page
// $ca->requireLogin();

$currentUser = new CurrentUser();
$authUser = $currentUser->user();

// Check login status
if ($authUser) {
    $ca->assign('userFullname', $authUser->fullName);
    $selectedClient = $currentUser->client();
    if ($selectedClient) {
        $ca->assign('clientInvoiceCount', $selectedClient->invoices()->count());
} else {
    $ca->assign('userFullname', 'Guest');

// Define the template filename to be used without the .tpl extension



submit_form.php - 

// Enable error reporting for debugging
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
    $api_url = "apirulhere"; // Change to your WHMCS URL
    $api_identifier = "apiidenthere"; // Change to your API Identifier
    $api_secret = "apisechere"; // Change to your API Secret
    $api_access_key = "accesskeyhere"; // Change to your API Access Key 
       $postfields = array(
        'identifier' => $api_identifier,
        'secret' => $api_secret,
        'accesskey' => $api_access_key,
        'action' => 'OpenTicket',
        'deptid' => 9, // Change to your desired department ID
        'subject' => 'New Starter Request Form Submission',
        'message' => '',
        'name' => htmlspecialchars($_POST['requester-name']),
        'email' => htmlspecialchars($_POST['requester-email']),
        'priority' => 'Medium',
    $message = "
        Requester Details
        Name: " . htmlspecialchars($_POST['requester-name']) . "
        Email: " . htmlspecialchars($_POST['requester-email']) . "
        Contact Number: " . htmlspecialchars($_POST['contact-number']) . "
        Requesting Company: " . htmlspecialchars($_POST['requesting-company']) . "

        New Starter Details
        Full Name: " . htmlspecialchars($_POST['new-starter-full-name']) . "
        Job Title: " . htmlspecialchars($_POST['job-title']) . "
        Work Contact Number: " . htmlspecialchars($_POST['work-contact-number']) . "
        Required Company Email: " . htmlspecialchars($_POST['required-company-email']) . "
        Personal Contact Number: " . htmlspecialchars($_POST['personal-contact-number']) . "
        Personal Email: " . htmlspecialchars($_POST['personal-email']) . "
        Package Details
        Package Required: " . (!empty($_POST['package-required']) ? implode(', ', $_POST['package-required']) : '') . "
        IT Support Package: " . htmlspecialchars($_POST['it-support-package']) . "
        Printer Setup: " . htmlspecialchars($_POST['printer-setup']) . "
        Additional Email Access: " . htmlspecialchars($_POST['additional-email-access']) . "
        Other Details
        File Access Required: " . htmlspecialchars($_POST['file-access-required']) . "
        Company Mobile Device: " . (!empty($_POST['company-mobile-device']) ? implode(', ', $_POST['company-mobile-device']) : '') . "
        Start Date: " . htmlspecialchars($_POST['start-date']) . "
    $postfields['message'] = $message;
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $api_url);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postfields));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
    $result = curl_exec($ch);
    $result = json_decode($result, true);
    if ($result['result'] == 'success') {
        echo 'Form submitted successfully!';
    } else {
        echo 'There was an error submitting the form: ' . $result['message'];

Any help on how to fix would be amazing please.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated