Contact form with jQuery

Sample description

This sample illustrates how CXP and jQuery technologies can be combined to create a form for inputting contact information. Among the features used in this example are the following: integrating client-side input validation, email composition and sending.

Configuration management

Run in new tab

Live editor

<html lang="en">
<head>
    <title>Contact Form | Xbase++ | Alaska Software</title>
    <link rel="stylesheet" href="/resources/css/custom-bootstrap.min.css">
    <script type="text/javascript" src="/resources/js/jquery.min.js"></script>
</head>

<body>
<div class="container">
    <h4 class="mt-4">Contact Form</h4>
    <p>Just drop us a note if you have a question!</p>

<form id="contact-form" class="border border-1 border-primary p-3 rounded bg-light needs-validation"
          novalidate>
        <div class="row mb-3">
            <div class="col">
                <label for="subject" class="form-label">Subject: *</label>
                <select class="form-select" name="subject" id="subject" required>
                    <option value="" selected="selected"> - Please choose -</option>
                    <option value="Question">Question</option>
                    <option value="Business proposal">Business proposal</option>
                    <option value="Complaint">Complaint</option>
                </select>
                <div class="invalid-feedback">
                    Please select a subject
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="first-name" class="form-label">First Name*</label>
                <input type="text" class="form-control" id="first-name" name="first-name" required
                       placeholder="First Name" minlength="2">
                <div class="invalid-feedback">
                    Please type a first name (min length: 2 characters)
                </div>
            </div>
            <div class="col-md-6">
                <label for="last-name" class="form-label">Last Name*</label>
                <input type="text" name="last-name" id="last-name" required
                       class="form-control" placeholder="Last Name" minlength="2">
                <div class="invalid-feedback">
                    Please type a last name (min length: 2 characters)
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col">
                <label for="company" class="form-label">Company</label>
                <input type="text" name="company" id="company" class="form-control" placeholder="Company"/>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="email" class="form-label">eMail*</label>
                <input type="email" name="email" id="email" class="form-control"
                       required placeholder="name@example.com"/>
                <div class="invalid-feedback">
                    Please type an email
                </div>
            </div>
            <div class="col-md-6">
                <label for="email_again" class="form-label">Retype eMail*</label>
                <input type="email" name="email_again" id="email_again" required
                       class="form-control" placeholder="name@example.com"/>
                <div class="invalid-feedback">
                    Please type an email again
                </div>
            </div>
        </div>
        <div class="mb-3">
            <label for="question" class="form-label">Your Message*</label>
            <textarea class="form-control" id="question" name="question" required
                      placeholder="Your message (min length: 10 characters)" rows="5" minlength="10"></textarea>
            <div class="invalid-feedback">
                Please write a message (min length: 10 characters)
            </div>
        </div>
        <div class="row mb-3">
            <div class="col">
                <button class="btn btn-primary" type="button" id="send-button">
                    <span class="spinner-border spinner-border-sm d-none" id="send-spinner"></span>
                    Send
                </button>
            </div>
        </div>
    </form>
</div>

//Click event listener of the send button
        $sendButton.on("click", function () {
            $sendButton.addClass("disabled");
            //validate the contact form
            if (!$contactForm [0].checkValidity()) {
                showStatusMessage({erroneous: true, message: "Invalid data!"});
                $contactForm.addClass("was-validated");
                $sendButton.removeClass("disabled");
            } else {
                $spinner.removeClass("d-none");
                //send a POST request
                $.ajax({
                    url: 'sendmail.cxp',
                    type: 'POST',
                    timeout: 3000,
                    data: $contactForm.serialize(),
                    success: handleSuccessfulSubmission,
                    error: function (jqXHR, textStatus) {
                        const errorMessage = `Error: ${textStatus}`;
                        showStatusMessage({erroneous: true, message: errorMessage})
                    },
                    complete: function () {
                        $spinner.addClass("d-none");
                        $sendButton.removeClass("disabled");
                    }
                });
            }
        });

/**
         * Handles successful submission of data.
         * @param {string} data - The data returned from the server.
         */
        const handleSuccessfulSubmission = (data) => {
            //remove comments from the resulting message of sendmail.cxp
            let cleanData = data.replace(/(?=/g, "");
            let result = JSON.parse(cleanData);
            showStatusMessage(result);
            if (!result.erroneous) {
                $contactForm.trigger("reset");
                $contactForm.removeClass("was-validated");
            }
        }

/**
         * Displays a status message
         * @param {Object} result - The result object containing the message and error status.
         */
        const showStatusMessage = (result) => {
            $status.removeClass("d-none");
            $status.removeClass(result.erroneous ? "alert-success" : "alert-danger");
            $status.addClass(result.erroneous ? "alert-danger" : "alert-success");
            $status.html(result.message);
        }
    });
</script>

</body>
</html>

<%#code locality="page-render"%>
<%
    /* Service messages */
    cSuccessDelivery := "Thank you! Your message has been sent and will be processed as soon as possible."
    cFailedConnect := "Unable to connect to the mail server"
    cFailedDelivery := "Unable to deliver message"

/* Create a message to send */
    cMessage := "Empty message"
    IF PCount() > 0
        // Transform the form data sent with the request into an XML stream,
        //and send it to the backend via email for further processing
        aData := ::Params:Collection
        cMessage := '<?xml version="1.0" encoding="UTF-8"?>' + Chr(13)+Chr(10)
        FOR i:=1 TO Len(aData)
            cMessage += "<" + aData[i][1] + ">" + Var2XML(aData[i][2]) + "</" + aData[i][1] + ">" + Chr(13)+Chr(10)
        NEXT
    ENDIF

/* Initialize an smtp client */
    oSmtp := SMTPClient():new(::Config:Smtp:Server, Val(::Config:Smtp:Port))
    oSender := MailAddress():new(::Config:Smtp:Sender)
    oRecipient := MailAddress():new(::Config:Smtp:Recipient)

/* Create an email using the message */
    oMail := MIMEMessage():new()
    oMail:setFrom(oSender)
    oMail:addRecipient(oRecipient)
    oMail:setSubject("CXP Message")
    oMail:setMessage(cMessage)

/* Send the email */
    oResult := DataObject():new()
    oResult:erroneous := .F.

//If the sample running test mode, no email will be sent.
    //Otherwise the sample connects to the mail server and sends the email.
    IF ::Config:smtp:test == "yes"
        oResult:message := cSuccessDelivery
    ELSE
        lConnected := IIF(!Empty(::Config:Smtp:User), oSmtp:connect(::Config:Smtp:User, ::Config:Smtp:Pwd), oSmtp:connect())
        IF lConnected
            lSent := oSmtp:send(oMail)
            oResult:erroneous := !lSent
            oResult:message := IIF(lSent, cSuccessDelivery, cFailedDelivery)
            oSmtp:disconnect()
        ELSE
            oResult:erroneous := .T.
            oResult:message := cFailedConnect
        ENDIF
    ENDIF

? Var2JSON(oResult)
%>

                    Result
                    built with V2 2156
                

Contact form with jQuery

Related articles: