{"id":2807,"date":"2012-05-21T13:31:59","date_gmt":"2012-05-21T13:31:59","guid":{"rendered":"http:\/\/www.gopiplus.com\/work\/?p=2807"},"modified":"2021-10-18T15:47:44","modified_gmt":"2021-10-18T15:47:44","slug":"wordpress-plugin-wp-tell-a-friend-popup-form","status":"publish","type":"post","link":"http:\/\/www.gopiplus.com\/work\/2012\/05\/21\/wordpress-plugin-wp-tell-a-friend-popup-form\/","title":{"rendered":"Tell A Friend popup form WordPress plugin"},"content":{"rendered":"\n<p>This will create a popup form for your users to share the website link with their friends. The concept of this plugin is to open the Tell a Friend form in the popup window by clicking the button from the page (Sidebar, End of the post, or pages). Then, the plugin automatically picks the post link and sends it to their friend as well as the website admin (Optional) along with the entered message.<\/p>\n\n\n<div class=\"ads-row\">\n\t<div class=\"ads-column1\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<!-- Large Rectancle Center page -->\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t\t data-ad-slot=\"0362029595\"><\/ins>\n\t\t<script>\n\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/div>\n\t<div class=\"ads-column2\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<!-- gopiplus.org Main -->\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t\t data-ad-slot=\"7521653079\"><\/ins>\n\t\t<script>\n\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Here&#8217;s the step<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>First, click <strong>Tell A Friend Button<\/strong> from the page.<\/li><li>Next, It will open the form in the popup window.<\/li><li>Now fill your name and friend email address.<\/li><li>Enter the short message. But, this is optional box.<\/li><li>Finally, click the <strong>Send<\/strong> button in the form.<\/li><\/ul>\n\n\n<div class=\"livedemo\">\n\t<h2>Live Demo (Click the button to see Live Demo)<\/h2>\n\t<script type='text\/javascript' src='http:\/\/www.gopiplus.com\/work\/my-plugin\/demo\/tell-a-friend-popup.js'><\/script>\n\t\n\t<a href='javascript:TellAFriend_OpenForm(\"TellAFriend_BoxContainer\",\"TellAFriend_BoxContainerBody\",\"TellAFriend_BoxContainerFooter\");'>\n\t\t<img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/my-plugin\/demo\/tell-a-friend.jpg\">\n\t<\/a>\n\t\n\t<div id=\"TellAFriend_BoxContainer\" style=\"display: none;\">\n\t  <div id=\"TellAFriend_BoxContainerHeader\">\n\t\t<div id=\"TellAFriend_BoxTitle\">Tell A Friend<\/div>\n\t\t<div id=\"TellAFriend_BoxClose\"><a href=\"javascript:TellAFriend_HideForm('TellAFriend_BoxContainer','TellAFriend_BoxContainerFooter');\">Close<\/a><\/div>\n\t  <\/div>\n\t  <div id=\"TellAFriend_BoxContainerBody\">\n\t\t<form id=\"TellAFriend_Form\" name=\"TellAFriend_Form\" action=\"#\">\n\t\t  <div id=\"TellAFriend_BoxAlert\"> <span id=\"TellAFriend_alertmessage\"><\/span> <\/div>\n\t\t  <div id=\"TellAFriend_BoxLabel\"> Your Name <\/div>\n\t\t  <div id=\"TellAFriend_BoxLabel\">\n\t\t\t<input type=\"text\" maxlength=\"120\" id=\"TellAFriend_name\" class=\"TellAFriend_TextBox\" name=\"TellAFriend_name\">\n\t\t  <\/div>\n\t\t  <div id=\"TellAFriend_BoxLabel\"> Friend Email <\/div>\n\t\t  <div id=\"TellAFriend_BoxLabel\">\n\t\t\t<input type=\"text\" maxlength=\"120\" id=\"TellAFriend_email\" class=\"TellAFriend_TextBox\" name=\"TellAFriend_email\">\n\t\t  <\/div>\n\t\t  <div id=\"TellAFriend_BoxLabel\"> Enter Message To Friend <\/div>\n\t\t  <div id=\"TellAFriend_BoxLabel\">\n\t\t\t<textarea id=\"TellAFriend_message\" rows=\"3\" class=\"TellAFriend_TextArea\" name=\"TellAFriend_message\"><\/textarea>\n\t\t  <\/div>\n\t\t  <div id=\"TellAFriend_BoxLabel\">\n\t\t\t<input type=\"button\" onClick=\"alert('This form is for demo!...');\" value=\"Submit\" class=\"TellAFriend_Button\" name=\"button\">\n\t\t  <\/div>\n\t\t  <input type=\"hidden\" value=\"http:\/\/www.gopiplus.com\/work\/2012\/05\/21\/wordpress-plugin-wp-tell-a-friend-popup-form\/\" id=\"TellAFriend_Link\" name=\"TellAFriend_Link\">\n\t\t<\/form>\n\t  <\/div>\n\t<\/div>\n\t<div id=\"TellAFriend_BoxContainerFooter\" style=\"display: none;\"><\/div>\n<\/div>\n\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Plugin features<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Open form in popup window. Therefore, occupy less space in page.<\/li><li>Option to send the mail copy to admin.<\/li><li>Easy customization options for the mail content.<\/li><li>Admin page to set the from email address.<\/li><li>Ajax submission. Thus, no page refresh.<\/li><li>Movable but unblockable popup.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Installation instruction<\/h2>\n\n\n\n<p>First, download the plugin ZIP file wp-tell-a-friend-popup-form.zip from the <a href=\"http:\/\/www.gopiplus.com\/work\/2012\/05\/21\/wordpress-plugin-wp-tell-a-friend-popup-form\/\">download<\/a> location.<\/p>\n\n\n\n<p><strong>Activate the plugin using the manual upload option.<\/strong><\/p>\n\n\n\n<p>Sign in to your WordPress dashboard. Navigate to the <strong>Plugins<\/strong> menu. And click <strong>Add New<\/strong> menu to upload the downloaded ZIP file (wp-tell-a-friend-popup-form.zip). Select the <strong>Upload Plugin<\/strong> button. Upload the available ZIP file and click <strong>Install Now<\/strong> button. Finally, click <strong>Activate<\/strong> plugin button to activate the plugin. Next, Go to the plugin admin page to change the default settings.<\/p>\n\n\n\n<p><strong>Install the plugin with the dashboard search option<\/strong><\/p>\n\n\n\n<p>Sign in to your WordPress dashboard and go to the <strong>Plugins<\/strong> menu and click <strong>Add New<\/strong>. Search <strong><em>wp-tell-a-friend-popup-form<\/em><\/strong> plugin using the search option. This will search the plugin in the WordPress repository. This action required an active internet connection. Find the plugin in the search result and click <strong>Install Now<\/strong> button, so that the plugin will be installed automatically on the website directly from the WP repository. Finally, click <strong>activate<\/strong> plugin button to activate the plugin.<\/p>\n\n\n<div class=\"ads-row\">\n\t<div class=\"ads-column0\">\n\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t<!-- Above Comment -->\n\t<ins class=\"adsbygoogle\"\n\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t data-ad-slot=\"2359628415\"><\/ins>\n\t<script>\n\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t<\/script>\n\t<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Plugin admin customization<\/h2>\n\n\n\n<p>In your WordPress administrator section go to the <strong>Settings<\/strong> menu and select the <strong>Tell a friend<\/strong> menu to configure this plugin.<\/p>\n\n\n\n<p>If the popup window is hidden or open under the menu, just increase the z-index value in the CSS stylesheet file. (This z-index property specifies the stack order of an element in the HTML. An element with greater stack order is always in front of an element with a lower stack order)<\/p>\n\n\n\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/my-plugin\/adminscreen\/wp-tell-a-friend-popup.png\" alt=\"Tell a friend WordPress plugin\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Plugin front end customization<\/h2>\n\n\n\n<p><strong>Drag and drop the widget:<\/strong><\/p>\n\n\n\n<p>This is the easiest way, First, go to the Appearance menu and click Widgets. Then, click the &#8216;Plus&#8217; icon on the page to bring up the widget block menu. Finally, search the widget <strong>Tell-A-Friend<\/strong> and drag and drop to your widget section. Otherwise, you can double-click to add the widget.<\/p>\n\n\n\n<p><strong>PHP code:<\/strong><\/p>\n\n\n\n<p>Copy and paste the below PHP code to your desired template location (in PHP file) to show the plugin on the theme. It allows you to embed the shortcode anywhere you want in the file. of course, you have to activate the plugin.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php echo do_shortcode( '&#091;tell-a-friend id=\"1\" title=\"Tell a friend\"]' ); ?><\/code><\/pre>\n\n\n\n<p><strong>Shortcode:<\/strong><\/p>\n\n\n\n<p>Shortcodes are the simple way to add plugins into your WordPress posts, pages, and sidebars. Find the code below. and use it inside the posts.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;tell-a-friend id=\"1\" title=\"Tell a friend\"]<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n\n<p><strong>Q1) How to change the form style?<\/strong><\/p>\n\n\n\n<p>In the plugin folder, we have a separate style sheet file (tell-a-friend.css) to change the form style. Alternatively, you can copy the entire content from this CSS file and paste it into your theme CSS file.<\/p>\n\n\n\n<p><strong>Q2) How to update the form client validation messages?<\/strong><\/p>\n\n\n\n<p>Javascript file &#8220;tell-a-friend-form.js&#8221;. In addition, follow the below page to update the file.<\/p>\n\n\n\n<p>If you got any error or mail issue, just comment on the below-mentioned two lines in the JS file popup-contact-popup.js and try again. So it will display the exact error on the popup.<\/p>\n\n\n\n<p>\/\/alert(http_req.readyState);<br>\/\/alert(http_req.responseText);<\/p>\n\n\n\n<p><strong>Q) How to change the Tell A Friend button image?<\/strong><\/p>\n\n\n\n<p>On the administration page, we have the text box option \u201cLink Button\/Text:\u201d to update this button image. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Download location<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/2012\/06\/24\/tell-a-friend-popup-form-wordpress-plugin-download-link\/\">http:\/\/www.gopiplus.com\/work\/2012\/06\/24\/tell-a-friend-popup-form-wordpress-plugin-download-link\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Plugin official page<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/2012\/05\/21\/wordpress-plugin-wp-tell-a-friend-popup-form\/\">http:\/\/www.gopiplus.com\/work\/2012\/05\/21\/wordpress-plugin-wp-tell-a-friend-popup-form\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WordPress page<\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/wp-tell-a-friend-popup-form\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/wordpress.org\/plugins\/wp-tell-a-friend-popup-form\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This will create a popup form for your users to share the website link with their friends. The concept of this plugin is to open the Tell a Friend form in the popup window by clicking the button from the page (Sidebar, End of the post, or pages). Then, the plugin automatically picks the post [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,112,193,5],"class_list":["post-2807","post","type-post","status-publish","format-standard","hentry","category-word-press-plug-in","tag-plugin","tag-popup","tag-tell-a-friend","tag-wordpress"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts\/2807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/comments?post=2807"}],"version-history":[{"count":0,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts\/2807\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/media?parent=2807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/categories?post=2807"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/tags?post=2807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}