CSS And Language In Ajax-Contact-Form - Question | JoomShaper

CSS And Language In Ajax-Contact-Form

R

RaBauKi

SP Page Builder 10 months 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!

0
6 Answers
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 10 months ago #178731

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 10 months ago #178733

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)

0
R
RaBauKi
Accepted Answer
10 months ago #178790

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.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 10 months ago #178876

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.

0
R
RaBauKi
Accepted Answer
10 months ago #179107

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.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 10 months ago #179122

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.

0