- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
JS Animated. How to make a contact form field not required
April 25, 2014
In templates based on forms.js script
This tutorial will show you how to make your contact form fields not required.
All the fields need to be filled by default. To fix that, find the index page with your contact form and open it in any php/text editor. Locate the following scripts related to your fields:
<label class="email">

Make it look like:
<label class="email notRequired">

Save the changes, and refresh your browser window. Now the ‘e-mail’ field is not required.
This is the end of the tutorial, let us know if you have any questions.
Feel free to check the detailed video tutorial below:
How to make a contact form field not requiredIn templates based on TMForm.js script

Open the .html file that represents your “Contacts” page in Dreamweaver or any other HTML editor.
Switch to the “Split” mode to divide your screen into “Code”/”Design” views.
In the “Design” view, select the field which you need to make not required (by default all of them are required). For example, the “Name” field.
That will highlight the code in the “Code” view:
<label class="name"> <input type="text" placeholder="Name:" data-constraints="@Required @JustLetters" /> <span class="empty-message">*This field is required.</span> <span class="error-message">*This is not a valid name.</span> </label>
Delete @Required from the data-constraints attribute values list. So the result looks as follows:
<label class="name"> <input type="text" placeholder="Name:" data-constraints="@JustLetters" /> <span class="empty-message">*This field is required.</span> <span class="error-message">*This is not a valid name.</span> </label>
Save your changes to the file and upload your template to FTP to check how the field is now working.
The same goes for all other fields. To make a field not required, you will just need to delete @Required from the data-constraints attribute values list of the corresponding <input> tag.
Feel free to check the detailed video tutorial below:
JS Animated. How to make a contact form field not required (based on TMForm)