0

Say I wanted to validate my contact form to only accept UK phone numbers and a valid amount of currency, how would I do this in Magento 2? I want to change my contact form so it allows my users to put in how much they'd like to donate towards a charity as well as another input field for their UK phone number.

1 Answer 1

0

First thing you need to do is to override the form in your theme. This can be done by taking the original phtml file and copying it to the relevant folders, i'm going to use my contact form as an example. So, first of all create the file structure

app/design/frontend/vendor/theme/Magento_Catalog/templates/form.phtml

You're going to need to insert your input box, I've done by pasting in

<div class="field donation required">
    <label class="label" for="donation"><span><?php /* @escapeNotVerified */    echo __('Donation Amt') ?></span></label>
    <div class="control">
        <input name="donation" id="donation" title="<?php /* @escapeNotVerified */echo __('Donation Amt') ?>" value="" class="input-text" type="text" data-validate="{required:true}"/>
    </div>
</div>

Now, as I said earlier, I want to first of all make it so they can put in how much they want to donate, this is not going to be a required film. To do this I change the data validate attribute - data-validate="{required:true}" that's currently there to data-validate="{'validate-currency-dollar':true}". Goodm, now if the people who use this enter an amount Magento will make sure it's a valid amount, if left blank however, errors will not throw for my user. But I'm not done yet, I need them to add their UK phone number as well. To do this I add another similar input box

<div class="field donation required">
        <label class="label" for="donation"><span><?php /* @escapeNotVerified */    echo __('Donation Amt') ?></span></label>
        <div class="control">
            <input name="donation" id="donation" title="<?php /* @escapeNotVerified */echo __('Donation Amt') ?>" value="" class="input-text" type="text" data-validate="{'validate-currency-dollar':true}""/>
        </div>
    </div>
    <div class="field UKphonenumber required">
        <label class="label" for="UKphonenumber"><span><?php /* @escapeNotVerified */   echo __('UK Phone Number') ?></span></label>
        <div class="control">
            <input name="UKphonenumber" id="UKphonenumber" title="<?php /* @escapeNotVerified */echo __('UK Phone Number') ?>" value="" class="input-text" type="text" data-validate="{required:true,'phoneUK':true}"/>
        </div>
    </div>

Now my data-validate attribute is telling Magento to both require a phone number but to only allow phone numbers fitting the UK phone number regex. I know what an amount of you are thinking, where did you get 'phoneUK' or 'validate-currency-dollar' from? As the second half of the question describes Where do I find the list? This List contains a list of different Javascript validators; including validating credit card numbers, emails, making sure input doesn't contain html tags, valid vehicle identification numbers (US), number ranges and much more.

Alright, nice, my form has everything needed, now I need to make it so it sends this data after it's been validated to me. For this I login to my admin panel and go Marketing->Communication->Email Templates You need to click add new template, under the Load default template section, use the drop down to select under Magento Contact the "Contact Form" option, then click Load Template. To add the fields you're after to your email responses you're going to need to edit this to add another two fields, for example mine would be

 <tr>
        <td><b>{{trans "Donation Amt"}}</b></td>
        <td>{{var data.donation}}</td>
    </tr>
 <tr>
        <td><b>{{trans "UK Phone Number"}}</b></td>
        <td>{{var data.UKphonenumber}}</td>
    </tr>

save this template, flush cache and you should have two new working fields with full validation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.