Rash That Feels Like Sunburn

WordPress + jQuery: jQuery

Today we will see an easy way to implement (from scratch

) a small widget in any

Wordpress theme, which allows users to enter an e-mail to a service
newsletter. Everything will be done with jQuery

, and is nothing but a simplified implementation of what I faced in my previous post on form validation with jQuery

. What we are going

I developed it to create the new dynamic version of the site of the Xiu Zhen Dao method, which uses WordPress as CMS note: the widget in question is visible in the right sidebar, on any given page

In this case, to make life easier on us and users, there is only one field to be filled with your e-mail, and the widget fails to properly validate this field, such as ensuring that it is this the '@' and at least one point '.' (This will be detailed below):

The nodal points are two: Create the

structure of the form in a text widget
Enter the code necessary for the operation of the widget via an external file, to be added to the file header.php .

1. HTML markup You must first create the structure of the HTML form, and we should give a new widget, a text, ranging from the admin panel of WordPress, Widget → Appearance section, and choose the type Text

( "Free Text or HTML). Here is my widget compiled:

The title field of the widget should be filled separately, while in the body of the text I inserted the code for a very basic form:

\u0026lt;div id="newsletter_form">

Sign-up Method XiuZhenDao \u0026lt;form action="" method="post" id="form_news">

\u0026lt;fieldset> \u0026lt;input id = "email_news" name = "email_news" type = "text" value = "your e-mail" /> \u0026lt;input id="submit_news" type="submit" value="iscriviti" /> \u0026lt; ; / fieldset> \u0026lt;/ form> \u0026lt;/ div> The CSS used to format the form is almost negligible, because it takes little beyond what is already present in the style of the theme Wordpress, where generally the input box and buttons are already drawn up. This style can be inserted into the document . css main theme, or in any other style sheet included in the page where you will place the widget. / newsletter widget * * / #
newsletter_form # email_news
{width: 130px;} # # newsletter_form submit_news
{margin-top: 5px;
padding: 2px;

cursor: pointer;} # newsletter_form . catched {font-style: italic;}

class
. catched
we will need later in the message of success.

2. jQuery validation
's time to write the script validation: it is essentially identical to what I used in the previous post

, but more time to implement a validation for our field more professional e-mail (as it is the only we have, this time!)

1. Here's what the script does: when the user clicks the button "subscribe" to check that the field has been filled in correctly. If this does not occur, the field turns red, or else send an email to the address entered and displays a success message.
2. (function ($) { $ (document). Ready (function () {
/ / newsletter widget

$ ('# email_news'). Click (function () { $ (this). Attr ('value','');} )
$ ("# submit_news) . click (function () {
/ / var style error
errorclass

= {'background': '# ff435b', 'color': '# 000', 'borderColor': '# 000'}

/ / analysis of data entered
email_news var = $ ("input # email_news). val ();
var ln = email_news.length;
atpos var = var email_news.indexOf ("@");

 dotpos = email_news . lastIndexOf ("."); 
 
 / / Field validation e-mail 
 if ((atpos \u0026lt;1 ) 
 Thanks! You have entered 
 
 newsletter 
 '). Append (' 
 '.) Hide (); 
 $ (' # message_news. Catched '). Html (email_news) 

$ (' # message_news '). FadeIn (' slow '); }});
return false;}

) 
 
}); 
}) (jQuery); 
 
 let us look at the first part of the code: 
 
 
 The first statement (lines 5 -7) only serves to automatically clear the text field when the user clicks on it to write its data. 
 
 Line 9 catches the event click on the submit button to start the validation procedures. 
 
 Lines 12-16 define a CSS class that is used to change the appearance of the input field in error. 

The field validation e-mail to check that the entered data meets the following conditions:

must not be null Must contain at least one character '@' and at least one point '.'
The character '@' should not be given at the beginning of the quote
Point '.' must be at least one character away after the '@' but can not stand last.

To do this, first of all, it stores the data entered by the user by the method

 
 val () 
 
, and then examines: 
 
 
 it calculates length by the method 
 
 
 
 length (line 20) 
 
 it locates the '@' character by the method 
 
 indexOf () 
 
 (line 21) 
 
 you locate the position of the last period '.' inserted by the method 
 
 lastIndexOf () 
 
 (line 22). 
 
 At this point, you can validate: the conditions are all alone sufficient to make an incorrect e-mail, and are connected by an OR (
  
 if it is in first position, with the control 
 atpos \u0026lt;1 
 you see now is if '@' or if there is first 
 
 With 
 dotpos - atpos \u0026lt;2 
 we made sure that '@' and ' '. not be consecutive, and that the last '.' to the right of '@' 
 
 With the latter condition, 
 dotpos 
 == ln-1, but if you check the '.' is in last place. 
 
 
 This validation is very similar to that suggested by 
 w3schools.com 
  in JavaScript Form Validation . 
  
 If the validation does not pass, the field turns red Apply the 
. Errorclass 
 (line 26). 
 
 Everything that comes after concerns the transfer of data to a php script for sending e-mail, and has been addressed in detail in the post 
 form validation with jQuery 
. 
 In essence, we use the method 
 
 $. Ajax 
 

, which also allows us to display a success message, without having to reload this or other pages.
Noteworthy, this time, the inclusion of data stored in the message of success to you, confirming what he had inserted just insert a

\u0026lt;span>
1. with a class for it (in my case
. catched
2. ) and pass the stored value, by the method
3. html (val)

(line 40).

1. 3. PHP script
2. The last thing you see is the script that sends e-mail, and now there's really
3. minimal! I have written like this:
4. \u0026lt;?

php $ body = "e-mail writing". $ _POST ['Email_news']; $ header = "From:". $ _POST ['Email_news' ] mail ("indirizzo@email.dominio", "widget Newsletter", $ body, $ header); ?>

1. 4. files to include
2. summary, after inserting the HTML code widget (1 above), you must enter a jQuery script file that we have seen above (Section 2) in the header.php template (and at least in the \u0026lt;head> of each page that will display the widget), for example like this:
3. \u0026lt;script type="text/javascript" src="newsletter_validation.js"> \u0026lt;/ script> Then you have to put the php script at the address specified in the url of the method $.
ajax (perhaps the most convenient place is an absolute URL after placing the file, for example in the theme directory Wordpress).