Hie mates, I am Ankit from Devxify. Few days back I was try to build a custom signup form where the user could enter the email and I could validate and tell him about the action(output) on the same page itself in a non-obstructive way.
It had 3 different messages:
- Enter your email (Default Message)
- Kindly check your email format (Error Message)
- Done! Please check your email to confirm (Success Message)
Also, need a small suggestion. Do you think I should build a separate page (on Github or Devxify) for this script for others with very elaborate documentation. It would be free though. Do have a look and let me know.
Now let's start from seeing the output first. In the below live sample try to with try to enter correct mail and incorrect mail format.
Note: This does not collect any email so you will not be receiving any confirmation email to check. Also we ❤ privacy.
Now that we have seen the demo, let's start with the code itself. Also in this example we would be using Bulma CSS framework for the styling purpose.
Step 1: Creating HTML Skeleton
In the HTML skeleton we are going to define the structure of our subscription form. Also we would be adding the messages (in sleek format). Some of them will be hidden by using inline CSS.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
<!--Subscription Form Begins-->
<br>
<p class="has-text-centered">
On-page email validation by <a target="_blank" href="https://www.devxify.com"><b>Devxify</b></a>.
</p>
<br>
<!-- Iframe used to ensure page doesn't gets redirected on submission -->
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe>
<div id="subscribe" style="display: block" class="has-text-centered">
<p class="menu-label">Can I please help you too stay updated with latest posts?</p>
<form name="sform" method="POST" id="zcampaignOptinForm" action="" target="hidden_iframe">
<div class="field has-addons has-addons-centered">
<p class="control">
<input class="input" type="email" placeholder="awesome@email.com" name="CONTACT_EMAIL" id="EMBED_FORM_EMAIL_LABEL" aria-label="email" required>
</p>
<p class="control">
<button onclick="formHandle(document.sform.CONTACT_EMAIL);" class="button is-link" type="submit" name="SIGNUP_SUBMIT_BUTTON" id="zcWebOptin">
Subscribe
</button>
</p>
</div>
<div>
<!-- User Output Messages Below -->
<span id="normal" class="tag is-light" style="display: inline-flex">Awesome Content Ahead</span>
<span id="success" class="tag is-link is-light" style="display: none">Check Confirmation Mail</span>
<span id="error" class="tag is-danger is-light" style="display: none">Check Your Email Format</span>
</div>
</form>
</div>
<!--Subscription Form Ends-->
If you simply paste this code, then you will notice that the form is looking in the exact way of the sample. Do remember that this code is not semantic. The stylesheet should be placed in the head section or at the end of page. Also the form must be inside the body.
Step 2: Use JavaScript To Handle Input
Now this is the main part. Here we would be using to create a syntax of the acceptable email. Also we would be using this script to manipulate the CSS of the elements. Use script tag to add this onto your page.
function formHandle(inputText) {
//The mail format would be accepting extensions to 2-6 units only, you can modify the part {2,6}
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$/;
if (inputText.value.match(mailformat)) {
document.getElementById("normal").style.display = "none";
document.getElementById("success").style.display = "inline-flex";
document.getElementById("error").style.display = "none";
return true;
} else {
document.getElementById("normal").style.display = "none";
document.getElementById("success").style.display = "none";
document.getElementById("error").style.display = "inline-flex";
return false;
}
}
Done? Bang on. It's done. Now you have created an awesome subscription form for you visitors. Do feel proud and share this article.
Hope you like this article, if you have any other thoughts then feel free to tweet Devxify on twitter. Also, for more freshly brewed content subscribe to our newsletter.
Top comments (0)