Hide the Form Button with CSS to avoid multiple Submissions

[Arne_Manthey]

Introduction

Forms in SAP Marketing Cloud allow to capture data from a landing page visitor. After entering the data and pressing the submit button the entire form remains active and the button can be pressed again. This might lead to unwanted duplicate contact entries.

Before you read any further please also read the related post 'Styling Forms – Introduction' because it explains a lot of the basics. That post also includes links to other posts of my CSS series. Another recommended post is 'Styling Landing Pages with CSS' which explains all the options to use CSS in a Landing Page.

Important Note: Also please note that all CSS code I present here come without warranty - you need to try out for yourself and test everything thoroughly - especially for multiple screen sizes, devices or browsers! I would also recommend that you ensure you have a good understanding of HTML and CSS.

CSS Enhancements

The basis of my examples is a simple Form which contains 3 input fields and a submit button. The Form is embedded in a Landing Page and I added the CSS styling definition in the section 'Custom CSS':

The central feature I use for the following enhancements is the CSS class 'sapCpSubmitCompleted' which is set on the HTML form element after a successful submission. There is another class used in case of an error during submission called 'sapCpSubmitError' which I do not use here, but it is good to know that it exists.

Hide the Entire Form after Submission

Let's assume that we don't want to show anything of the form after submission except the success message which you can also change in the Form designer on the button element. The first thing to do is to remove all Form elements which are not a button element. As explained before I first make sure that this rule only applies for a successful submission with the class 'sapCpSubmitCompleted'. Then I added another selector for all form elements (class 'sapCpWidget') with an exclusion on the button element ('sapCpButtonWidget'). All of those elements are then hidden by setting the CSS attribute 'display: none'.

.sapCpSubmitCompleted .sapCpWidget:not(.sapCpButtonWidget) {

    display: none;

}

 

So this leaves on the the button element. But we also want to remove the button so that you cannot click again. In a similar fashion I added a selector with the 'sapCpSubmitCompleted' class and the class 'sapCpButton' which is a class used inside the button widget and points to the actual HTML button:

.sapCpSubmitCompleted .sapCpButton {

    display: none;

}

This would already be enough, but I also added some other stuff to make the result look nicer. I fixed the margin of the success message so that it will appear vertically centred. Then I also changed some text attributes and the colours of the success and error message:

/*--- Remove the button margin ---*/

.sapCpSubmitCompleted .sapCpButtonWidget {

    margin-top: 0;

}

/*--- Optional: Styling of the success message text ---*/

.sapCpButtonWidget .sapCpButtonWidgetExtraText {

    text-align: center;

    font-size: 20px;

    font-weight: bold;

 }

 /*--- Change the message colors ---*/

 .sapCpButtonWidget .sapCpSuccessMessageLabel {color: #614d0b;}

 .sapCpButtonWidget .sapCpErrorMessageText    {color: deeppink;}

The final result looks like this:


Here is the complete CSS snippet for you to copy:

/****************************************************************************************** 

    Hide Form after Submit 

 ******************************************************************************************/



/*--- Hide all Form fields after submit - except the button widget ---*/

.sapCpSubmitCompleted .sapCpWidget:not(.sapCpButtonWidget) {

    display: none;

}

/*--- Hide only the button part of the button widget leaving the message visible ---*/

.sapCpSubmitCompleted .sapCpButton {

    display: none;

}

/*--- Remove the button margin ---*/

.sapCpSubmitCompleted .sapCpButtonWidget {

    margin-top: 0;

}

/*--- Optional: Styling of the success message text ---*/

.sapCpButtonWidget .sapCpButtonWidgetExtraText {

    text-align: center;

    font-size: 20px;

    font-weight: bold;

 }

 /*--- Change the message colors ---*/

 .sapCpButtonWidget .sapCpSuccessMessageLabel {color: #614d0b;}

 .sapCpButtonWidget .sapCpErrorMessageText    {color: deeppink;}

Hide the Button after Submission

It may not be nice to the user of that form to hide all the date he or she submitted. Therefore I prepared a second option which just removes the button and also disables any click event in the input fields.

Like in the first example I target all elements that are not the form submit button, but this time I specifically target the 'input' HTML element and disable any pointer events. This way you cannot click into the input fields and thus the entered content remains stable:

.sapCpSubmitCompleted .sapCpWidget:not(.sapCpButtonWidget) input {

	pointer-events: none;

}

I tested this only with normal text input fields - you might want to check if you need to adapt this for dropdown or checkbox fields.

Then I use the same snippet as before to hide the submit button:

.sapCpSubmitCompleted .sapCpButton {

    display: none;

}

And finally, I add some of the formatting stuff as in my previous example:

/*--- Optional: Styling of the success message text ---*/

.sapCpButtonWidget .sapCpButtonWidgetExtraText {

    text-align: center;

    font-size: 20px;

    font-weight: bold;

 }

 /*--- Change the message colors ---*/

 .sapCpButtonWidget .sapCpSuccessMessageLabel {color: #614d0b;}

 .sapCpButtonWidget .sapCpErrorMessageText    {color: deeppink;}

The result of this second option looks like this:

And again, here is the complete CSS snippet for you to copy:

/****************************************************************************************** 

    Hide Form Button after Submit 

 ******************************************************************************************/



/*--- Hide all Form fields after submit - except the button widget ---*/

.sapCpSubmitCompleted .sapCpWidget:not(.sapCpButtonWidget) input {

	pointer-events: none;

}



/*--- Hide only the button part of the button widget leaving the message visible ---*/

.sapCpSubmitCompleted .sapCpButton {

    display: none;

}



/*--- Optional: Styling of the success message text ---*/

.sapCpButtonWidget .sapCpButtonWidgetExtraText {

    text-align: center;

    font-size: 20px;

    font-weight: bold;

 }

 /*--- Change the message colors ---*/

 .sapCpButtonWidget .sapCpSuccessMessageLabel {color: #614d0b;}

 .sapCpButtonWidget .sapCpErrorMessageText    {color: deeppink;}

Conclusion

After reading this post you should be able to improve the form behaviour to avoid multiple submissions by the same user.

If you are looking for more posts on this topic please check the link list of other posts of my CSS series in my initial post 'Styling Forms – Introduction'.