Customizing Your Listmonk Subscription Form

This guide will walk you through customizing your Listmonk subscription form to create an eye-catching, user-friendly design that integrates well with your website.

Feed this guide to any Ai chatbot and request that they update the code to match your own site details.

Overview of Changes

We'll be making the following improvements: 1. Creating a full-width form with a bright background 2. Adjusting the layout for better visual flow 3. Improving spacing and alignment of form elements 4. Ensuring mobile responsiveness

Step 1: Customizing the CSS

First, let's modify the CSS for your Listmonk form. Access your Listmonk admin panel and navigate to Settings > Appearance. In the "Custom CSS" text area, paste the following code:

.listmonk-form {
    background-color: #ffc107 !important;
    color: #1c1f26 !important;
    font-family: Arial, sans-serif !important;
    padding: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 20px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

.listmonk-form h3 {
    color: #1c1f26 !important;
    font-size: 22px !important;
    margin: 0 0 15px 0 !important;
    font-weight: bold !important;
    width: 100% !important;
}

.listmonk-form input[type="email"],
.listmonk-form input[type="text"] {
    background-color: #fff !important;
    border: 1px solid #e0a800 !important;
    color: #1c1f26 !important;
    padding: 10px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    flex: 1 !important;
    min-width: 150px !important;
    max-width: 250px !important;
}

.listmonk-form input[type="submit"] {
    background-color: #1c1f26 !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    font-size: 16px !important;
    transition: background-color 0.3s !important;
    flex: 0 0 auto !important;
}

.listmonk-form input[type="submit"]:hover {
    background-color: #2c3038 !important;
}

.listmonk-form label {
    color: #1c1f26 !important;
    font-weight: normal !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 15px !important;
    flex: 1 1 100% !important;
}

.listmonk-form input[type="checkbox"] {
    margin-right: 5px !important;
}

@media (max-width: 768px) {
    .listmonk-form {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .listmonk-form input[type="email"],
    .listmonk-form input[type="text"],
    .listmonk-form input[type="submit"] {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }
}

Step 2: Adjusting the HTML Structure

To ensure the form works correctly with the new CSS, update your form's HTML structure. If you're embedding the form on your website, use the following structure:

<form method="post" action="https://your-listmonk-url.com/subscription/form" class="listmonk-form">
    <h3>Subscribe for Updates</h3>
    <input type="hidden" name="nonce" />
    <input type="email" name="email" required placeholder="E-mail" />
    <input type="text" name="name" placeholder="Name (optional)" />
    <label>
        <input type="checkbox" name="l" checked value="your-list-id-here" />
        Periodic Updates (~1 Weekly)
    </label>
    <input type="submit" value="Subscribe" />
</form>

Replace https://your-listmonk-url.com with your actual Listmonk URL, and your-list-id-here with the ID of the list you want subscribers to join.

Step 3: Customizing the Form (Optional)

You can further customize the form by adjusting the following:

• Change the header text by modifying the content of the <h3> tag.
• Adjust placeholder text in the input fields.
• Modify the checkbox label to match your update frequency.
• Change the submit button text by altering the value attribute.

Step 4: Testing

After applying these changes:

1. View your Listmonk public subscription page to ensure the styling is applied correctly.
2. If embedding the form, test it on your website to verify it integrates well with your design.
3. Test on various devices to confirm mobile responsiveness.

Troubleshooting

• If styles aren't applying, check that the CSS is saved correctly in Listmonk settings.
• For embedded forms, ensure the form has the listmonk-form class.
• Clear your browser cache if you don't see changes immediately.

Conclusion

You should now have a customized, visually appealing Listmonk subscription form. Remember, you can always adjust the colors, sizes, and layout in the CSS to better match your website's design.

For more advanced customizations or if you encounter any issues, refer to the Listmonk documentation or reach out to the Listmonk community for support.