One moment, we're cooking some code examples
Using a unique form id and form handler you can handle, validate and check the data for errors. To create a unique form id, you can use an id="UniqueFormID" attribute to assign the id to the form.
To give the form a name, use the name attribute. Additionally, you can specify where to display the response after submitting the form with the target attribute.
To be able to access all elements when handling them we need to add an id attribute with a unique ID to each input element. Also add a name attribute to each input element.
For basic form elements and how to style them visit basic elements.
Information
The fieldset tag is utilized to add structure to forms and group certain sections. By using the form="UniqueFormID" attribute, you specify which form the fieldset belongs to. Additionally, the name="MyFieldset attribute assigns a name to the fieldset. If needed, the disabled attribute can be used to deactivate a fieldset.
To submit the form using Javascript. We use <a href="javascript:SubmitForm('UniqueFormID');">
This function prepares the form data for the form handler. Additionally, within this anchor tag we can add 2 buttons, a <div class="ButtonTitle"> and a <div class="ButtonTitleLoader"> The ButtonTitle is the default button. You can use the ButtonTitleLoader to show that the form handler is loading
To handle the form, add an input tag with the type="hidden" attribute, and add a value attribute. The content of this value attribute is the handler that is going to be used.
Simply write the PHP handler class CustomFormHandler along with the function HandleForm. Like this CustomFormHandler::HandleForm.
The handler gets all the values form the input fields and returns the results as JSON.
Validation is reached through a few different ways, a simple way to validate the given data can look something like this.
When a field doesn't get through the validation, we can add it to the array $aErrorFields. We return this in an array, and then we can relay this to the use by changing the style of the element
After submitting the form, we can let user know that it succesfully went through by setting a notification. We create a div element with the id="FormContactNotification" attribute. We hide this element by giving it a class class="Hidden" to hide it for now. After the validation we can hide the original form element and show the notification by removing the Hidden class.
We have received your request, you will also receive a confirmation by email.
Optionally we can send an email.
We start by creating an array named $aEmail. We fill the array with the content we want to send.
After filling the email with all the content we want to send we need to set the request. After setting the request we can prepare and send the mail