Staff replied SP Page Builder

CSS and Language in Ajax-Contact-Form

Asked by RaBauKi 1 year ago Last activity 1 year ago

Hello everyone,

I'm currently working on a german Joomla 5.2 website with SP Page Builder 5.4.4 and using the Ajax Contact Form. When the form is submitted with empty required fields, the browser displays the message: "Please fill out this field."

I would like to achieve the following:

Change this default message to German (e.g., "Bitte füllen Sie dieses Feld aus").
Additionally, I’d like to style this validation message using CSS to better fit the design of my website.

Does anyone have experience with this or know how to implement these changes? Any advice, tips, or code examples would be greatly appreciated!

Thank you in advance for your help!

6 replies

Ofi Khan Staff

1 year ago

Hello RaBauKi

Please use this JavaScript to
Template Options -> Custom Code -> Custom JavaScript

jQuery(function($){
  $(".sppb-form-control").attr("oninvalid","this.setCustomValidity('Bitte füllen Sie dieses Feld aus')");
});

This will change the HTML default validation message. But I could not find any way to change the style. Please seek help from any developer. This does not seem to be our produt issue.

Best regards

Toufiq Senior Staff

1 year ago

Hi there,

Thank you for reaching out, and I apologize for any inconvenience caused by this oversight. You can change only successfull message.

language/en-GB/en-GB.com_sppagebuilder.ini

COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_SUCCESS="Email sent successfully!"

Best regards,

Toufiqur Rahman (Team Lead, Support)

RaBauKi Asked this

1 year ago

Hello and thank you for the tips.

I will incorporate this into my contact form, but I also have the technical understanding for it.

Please add both aspects (missing language variables and missing style design options) to your wish list or error list, as the solutions mentioned are "suboptimal" for a page builder and inexperienced users will be put off.

Ofi Khan Staff

1 year ago

You are welcome 😊

If I got your issues correctly, then this is not our product issue. It is not possible to change HTML default message by some settings. You will need the above mentioned trick to do this.

RaBauKi Asked this

1 year ago

Hello and thank you for the feedback.

I still believe that there is an issue with the contact form, as it is possible to include the relevant content in the options within the form builder (see https://www.joomshaper.com/documentation/sp-page-builder/form-builder#span-style-font-weight-400-messages-span).

I kindly request that you check it again.

Ofi Khan Staff

1 year ago

I have checked it. Required Field Error Message triggers when you click on submit button. When the user clicks on submit, then it checked all the required fields are filled or not. HTML validation message pops up when you move to another field without filling up the previous field.