How to change your form input fields to be REQUIRED

How to change your form input fields to be REQUIRED

Difficulty: Intermediate
By default, the input fields in your forms are optional, meaning users will not need to complete them before they can click Submit.
You can choose which input field to require by following this tutorial.

Drag your form into your page. Here we use the Contact Form block template.



Let's say we want the Name and Email field to be required.
We will then have to get the id of the following elements:
  1. Name input
  2. Email input
  3. Submit button
To get the id of the Submit button, click on the button and go to Advanced section. The id is the value in Item ID.



For Name and Email inputs, we will need to create ids for them. Click on Name and Email input, you will see there is a config named Input Id. Create unique ids for your inputs here.



Then, go to Page Settings > Advanced. Copy and paste this code into the Custom JS field:

var myInterval = setInterval(function () { var t = document.getElementById("pbitm-id-26"); if(t != null){ if( !t.attached){ t.addEventListener("click", function(event) { if(document.getElementById("name").value == "" || document.getElementById("email").value == "" ){ alert("Please fill out your name and your email"); event.preventDefault(); } }); } t.attached = true; } }, 500);

Where
  1. pbitm-id-26 is the id of the Submit button
  2. name is the id of the Name input
  3. email is the id of the Email input



Click Save and done! Now users will need to enter Name and Email fields before they can submit the form.


    • Related Articles

    • How to configure Contact Form block

      Tapita Page Builder allows you to build contact forms using the following options: Using the Contact Us page templates Using the Contact Form block Build the form fields from scratch using the Forms elements Either way, there are only 2 steps you ...
    • How to create an Email Subscription form

      This tutorial will guide you to create a Store Email Subscription form similar to Shopify default one. Then you can put this form into any page you like. Shopify’s default subscription form Use the Store Email Subscription block In Tapita page ...
    • Learn about Tapita page builder elements

      Page elements is an essential part of a page builder tool like Tapita. Once you've mastered the elements, then you've mastered Tapita! In Tapita, you can add the elements into your page by either: Drag and drop the elements from the left menu Quick ...
    • How to create a landing page that converts

      A landing page, often known as LP, is quite likely to be the very first "actual" encounter a visitor has with you, regardless of whether they arrive there via your homepage, a link from an advertising, or the outcome of a popular search phrase. Your ...
    • Tapita Premade Templates

      If you are familiar with Tapita, you would know that we offer 4 types of page: 4 type of pages you can build with Tapita: Landing pages/Homepage, Blog pages, Product pages or Collection pages. Each type of pages is equipped with numerous templates ...