CODEWITHSUNDEEP
typo3typoscriptcontact-formhidden-fieldtypo3-extensions
M K
M K

Reputation: 1

Typo3 contact form

I need help and hope I'm at the right place. In TYPO3, I have a contact form that I use on my website for contacts where a website user can send an inquiry by filling out fields for email address, first name, last name, message, and can upload a file. I also use the same form on other pages where I display open job positions through which potential candidates can leave their details and apply for a job. When the data is filled out, an email message is sent to the email address I have chosen and set up, and this data arrives in a specific format in the email, like: first and last name: data from field email: [email protected] message: some message file: cv.pdf

I would like to have a hidden field in the form and based on the page the user is on, the field would be filled with the part of the link after the last "/" because that part of the link indicates the position for which the user wants to apply, and I would like this information to also arrive at the specified email address. So, in addition to the data that is sent when confirming the form, the data would include: Position for which the candidate applied: data from field

Let's say the contact link looks like this: https://myfirm.com/contact, I wouldn't want the hidden field to be filled out there, but all other pages for which I need this would be, for example, at the link: https://myfirm.com/jobs/junior-developer or https://myfirm.com/jobs/chef, etc.

I've added a hidden field to the form but I don't know where I could add JavaScript code (I have it written) that would extract the position name from the link and how to set it up so that both the name and content of this field are sent to the email. Thanks for the help.

I tried to add a hidden field in the yaml file and succeeded, but I don't know where to add the JavaScript code because the pages are created dynamically and this is my first encounter with TYPO3. I don't have the classic HTML pages and JS files like I had in the projects I worked on with Angular/React and Java Spring, where I knew how to set everything up...

Upvotes: 0

Views: 103

Answers (1)

Mogens
Mogens

Reputation: 1157

If you really want to use the javascript way to manipulate your form, then the best way would be to override the Render.html template of tx_form.

For that you must add typoscript setup with the path to your custom template like that:

plugin.tx_form {
    view {
        templateRootPaths {
            10 = EXT:your_extension/Resources/Private/Templates/
        }
    }
}

Then you must copy the template Render.html from ext:form to your custom templates path: your_extension/Resources/Private/Templates/

Be aware to check the original template after you update TYPO3. Because you now use your custom render template for all forms created with ext:form.

In the Render.html template you can now include your js with the f:asset viewhelper like that:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" 
    xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
    data-namespace-typo3-fluid="true">

<f:if condition="{formConfiguration}">
    <formvh:render overrideConfiguration="{formConfiguration}" />
    <f:flashMessages />

    <f:asset.script identifier="my-custom-script" 
        src="EXT:your_extension/Resources/Public/JavaScript/my-custom-script.js" />

</f:if>
</html>

The javascript is now added to all forms. I would suggest you also implement a condition which checks the {formConfiguration} variable. And then only add the javascript to your special form.
You can debug the variable with:
<f:debug>{formConfiguration}</f:debug>
or debug all variables in the template with:
<f:debug>{_all}</f:debug>

But be aware of, that this solution only works on pages with activated javascript. If you don`t bother thats ok. But maybe there is a better solution by using the hooks the ext:form comes with or build a custom formfactory for your form.

I would try the formfactory. For that you must also override the Render.html template. Check the {formConfiguration} variable. And then call the formvh viewhelper as described here:
https://docs.typo3.org/c/typo3/cms-form/main/en-us/D/FrontendRendering/Index.html#build-forms-programmatically

Upvotes: 0

Related Questions