Latest Posts

Creating custom confirmation pages

Posted on by Rishan Solutions

Loading

A custom confirmation page is a web page that appears after a user completes an action, such as submitting a form, making a purchase, or completing a registration process. The purpose of a confirmation page is to acknowledge the successful completion of the action, provide relevant details, and guide users on the next steps. Customizing this page ensures that it aligns with your branding and user experience goals.

In this guide, we’ll walk through the process of creating a custom confirmation page, from design to functionality.

Step 1: Determine the Purpose of the Confirmation Page

Before you start designing the page, you should first define its purpose. Depending on the type of action, a confirmation page can serve different functions. Some common uses include:

  • Order Confirmation: After an eCommerce purchase.
  • Form Submission Confirmation: After a user submits a contact form, feedback, or inquiry.
  • Account Creation Confirmation: After signing up or registering for a service.
  • Event Registration Confirmation: After a user registers for an event or class.

Determine what information needs to be displayed to the user. Typical elements include:

  • A thank you message or acknowledgment.
  • Key details about the action they took (e.g., order summary, registration details).
  • Next steps or what the user can do next (e.g., return to the homepage, check email for further instructions).

Step 2: Basic HTML Structure

For a basic confirmation page, you’ll want to create a clean and simple structure. Below is a basic example of an HTML layout for an order confirmation page.

Example HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order Confirmation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="confirmation-container">
        <header class="confirmation-header">
            <h1>Thank you for your order!</h1>
        </header>

        <section class="order-details">
            <h2>Order Summary</h2>
            <p>Order Number: <strong>#12345</strong></p>
            <p>Items Purchased:</p>
            <ul>
                <li>Product 1 - $50</li>
                <li>Product 2 - $30</li>
            </ul>
            <p>Total: <strong>$80</strong></p>
        </section>

        <section class="next-steps">
            <h3>Next Steps</h3>
            <p>Your order will be shipped shortly. You will receive an email with tracking details soon.</p>
            <p>If you need further assistance, visit our <a href="/support">Support Center</a>.</p>
        </section>

        <footer class="confirmation-footer">
            <a href="/" class="btn-home">Return to Home</a>
        </footer>
    </div>
</body>
</html>

Explanation:

  • <header>: Contains a greeting message, such as “Thank you for your order.”
  • <section class="order-details">: Displays the key details of the action the user took, such as an order summary.
  • <section class="next-steps">: Provides additional information or next steps for the user, such as follow-up actions they need to take or what will happen next.
  • <footer>: Contains a call to action like returning to the homepage or browsing further.

Step 3: Add Custom Styles

To make the confirmation page visually appealing and in line with your branding, you should use CSS for styling. Below is an example of basic CSS for the confirmation page.

Example CSS (styles.css):

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
}

.confirmation-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.confirmation-header {
    text-align: center;
    margin-bottom: 20px;
}

.confirmation-header h1 {
    font-size: 32px;
    color: #2c3e50;
}

.order-details {
    margin-bottom: 20px;
}

.order-details h2 {
    font-size: 24px;
    color: #34495e;
}

.order-details ul {
    list-style-type: none;
    padding: 0;
}

.order-details ul li {
    margin: 5px 0;
}

.next-steps {
    margin-bottom: 20px;
}

.next-steps h3 {
    font-size: 20px;
    color: #34495e;
}

.next-steps p {
    font-size: 16px;
}

.confirmation-footer {
    text-align: center;
    margin-top: 30px;
}

.btn-home {
    padding: 10px 20px;
    background-color: #27ae60;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 16px;
}

.btn-home:hover {
    background-color: #2ecc71;
}

Explanation:

  • Container Styling: The .confirmation-container class centers the content and applies padding and a subtle shadow for a clean look.
  • Typography: Different heading levels are styled to make the text visually distinct.
  • Order Details: Styled with a clear, organized list for items and prices.
  • Next Steps: Gives users guidance on what will happen next or where they can go for support.
  • Call to Action: A “Return to Home” button styled with a green background that changes color on hover to encourage users to take action.

Step 4: Add Dynamic Content (Server-Side)

To make the confirmation page dynamic, you will need to populate it with real data. This typically involves server-side code that fetches the necessary details (e.g., order number, items purchased) from a database or session storage.

Here is an example using PHP to generate dynamic content:

Example PHP (Dynamic Content):

<?php
// Assume the order details are fetched from a database or session
$orderNumber = '12345';
$items = [
    ['name' => 'Product 1', 'price' => 50],
    ['name' => 'Product 2', 'price' => 30]
];
$total = 80;

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order Confirmation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="confirmation-container">
        <header class="confirmation-header">
            <h1>Thank you for your order!</h1>
        </header>

        <section class="order-details">
            <h2>Order Summary</h2>
            <p>Order Number: <strong>#<?php echo $orderNumber; ?></strong></p>
            <p>Items Purchased:</p>
            <ul>
                <?php foreach ($items as $item) { ?>
                    <li><?php echo $item['name']; ?> - $<?php echo $item['price']; ?></li>
                <?php } ?>
            </ul>
            <p>Total: <strong>$<?php echo $total; ?></strong></p>
        </section>

        <section class="next-steps">
            <h3>Next Steps</h3>
            <p>Your order will be shipped shortly. You will receive an email with tracking details soon.</p>
            <p>If you need further assistance, visit our <a href="/support">Support Center</a>.</p>
        </section>

        <footer class="confirmation-footer">
            <a href="/" class="btn-home">Return to Home</a>
        </footer>
    </div>
</body>
</html>

Explanation:

  • PHP variables ($orderNumber, $items, $total) dynamically populate the page with order details.
  • The PHP foreach loop iterates over the items in the order, displaying the product name and price dynamically.

Step 5: Add Optional Features

a. Send Confirmation Email

After a user completes an action, you can send them a confirmation email with the same details as the confirmation page. This can be done through your server-side code.

b. Custom Styling for Mobile

Ensure that your confirmation page is mobile-friendly by using responsive CSS. For example:

@media (max-width: 600px) {
    .confirmation-container {
        padding: 10px;
    }

    .confirmation-header h1 {
        font-size: 24px;
    }

    .order-details, .next-steps {
        font-size: 14px;
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *