I´m currently building a website for a new client. He has a very specific wish of how the buttons on his website should look like. And he wants them to be the same throughout the whole website. On other pages I just created a
which I could style the way I wanted and then gave it an “link” within Bricks. It´s pretty much the “Bottom Ripple” from nextbricks:
Is there any way I can do this with the buttons in Bricksforge? I´ve been trying a while already but I cannot figure out how to do this and if it´s even possible at all.
If it´s not possible, is there any way I could use custom buttons that I create myself with divs in Bricks and then use those?
I use different classes for styling forms. I have one class on the form that styes everything including buttons, so that everything looks consistent across the site. Sometimes, I need to style buttons differently, like a cancel button. I use a special class on just the button, so that it becomes e.g. outlined.
Hey! Thanks for your response and for sharing your approach with different CSS classes for consistent styling! I appreciate the insight.
To give more context, my challenge is to replace the standard button in a ProForms form with a custom ‘Ripple Button v3’ style, similar to the one from nextbricks. I’m trying to find a way to implement or integrate such a button directly within Bricksforge. If you or anyone else has experience with customizing ProForms buttons in this way or knows a workaround to achieve this effect, I’d greatly appreciate any advice.
I managed to implement a solution that works but isn´t very elegant.
document.addEventListener('DOMContentLoaded', function () {
const rippleButton = document.getElementById('rippleSubmit');
const form = document.getElementById('contact-form');
if (!rippleButton || !form) {
console.error("Ripple Button or form not found.");
return;
}
rippleButton.addEventListener('click', function (event) {
event.preventDefault();
console.log("Ripple button clicked. Trigger bricksforge-logic.");
// manual submit with Bricksforge-event
const formSubmitEvent = new Event('submit', {
bubbles: true,
cancelable: true,
});
form.dispatchEvent(formSubmitEvent); // trigger bricksforge logic
});
});
Just in case someone else wants to replace the Bricksforge button with a different one.
Maybe @Daniele can tell us if there’s a better solution for this? Having the option for custom buttons is quite important nowadays to keep the client’s CI consistent with the rest of the website.
