We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 18817 ☆ A M B ☆
    • 205 Posts
    We’re looking to create a custom "add this" style button to our sites. We’ve got an email icon that, once clicked, opens up in a colorbox window. I was able to create a VERY BASIC version of this outside of modx with simple PHP to send the form based on what the user put in as the "friend’s email".

    Now, I’d love to this more dynamically using eForm or a custom snippet. Any examples of this out there using MODx, eform or snippet?

    Here is the basic code I used for the test email-to-friend form, go easy on me wink

    <?php
    
    if (isset($_POST['Submit'])) {
    // This will check to see if the form has been submitted
    
    $senders_email = $_POST['your_email'];
    // The person who is submitting the form
    
    $senders_name = $_POST['your_name'];
    // The senders name
    
    $recipient_name = $_POST['friend_name'];
    // Friends name
    
    $recipient_friend = $_POST['friend_email'];
    // recipient Email
    
    $message = $_POST['message'];
    
    $url = $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI'];
    // Current URL
    
    $site = $_SERVER['HTTP_HOST'];
    // Current URL
    
    // The forms recipient
    mail($recipient_friend,"A message from $senders_name", "Dear $recipient_name,\n\nYour friend $senders_name, found our site very useful, and thought you would be interested.\n\nMessage: $message\n\nPlease follow the link to view our site:\nhttp://$url\n\n", 'From:' . $senders_name . '<' . $senders_email . '>');
    
    header ('Location: http://alysonjon.topspotstaging.com/thanks.html');
    exit ();
    
    //if (isset($_POST['your_email'])) {
    //echo "<br>Your friend $recipient_friend has been contacted <br><br>Thank you $senders_email";
    }
    ?>
    
    <form action="" method="POST">
    <fieldset>
    <legend>Tell a friend</legend><br />
    Your email<br />
    <input type="text" name="your_email" value="Your email" /><br /><br />
    Your Name<br />
    <input type="text" name="your_name" value="Your Name" /><br /><br />
    Your Friend's Name<br />
    <input type="text" name="friend_name" value="Your friends name" /><br /><br />
    Your Friends email<br />
    <input type="text" name="friend_email" value="Your friends email" /><br /><br />
    Comments<br />
    <textarea name="message" cols="30" rows="8">Your Message</textarea><br /><br /><br />
    <input type="Submit" value="Tell a friend" name="Submit" />
    </fieldset>
    </form>
    
      Sal Baldovinos
      SEO & DIGITAL MARKETING

      ARIEL DIGITAL | Maximize Your Potential
      www.arieldigitalmarketing.com
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      The eForm call:
      <div id="tafArea">
          [!eForm? &formid=`tafForm` &tpl=`tafFormTpl` &report=`tafReportTpl` &to=`[+tafmailto+]` &from=`[+tafEmail+]` &fromname=`[+tafname+]` &replyto=`[+tafEmail+]` &subject=`[+tafsubject+]` &thankyou=`tafThankyou`!]
      </div>

      the tafFormTpl:
      [+validationmessage+]
      <form id="tafForm" action="[~[*id*]~]" method="post"> 
              <fieldset id="info">
                  <label for="tafname">Your Name</label> 
              	<input type="text" name="tafname" id="tafname" value="" size="22" tabindex="100" eform="Your Name::1"> 
              	<label for="tafEmail">Your Email Address</label> 
              	<input type="text" name="tafEmail" id="tafEmail" value="" size="22" tabindex="101" eform="Your Email:email:1"> 
              	<label for="tafmailto">Your Friend's Email Address</label> 
              	<input type="text" name="tafmailto" id="tafmailto" value="" size="22" tabindex="102" eform="Your Friend's Email::1"> 
              </fieldset>
              <fieldset id="message">
                      <label for="tafsubject">Subject</label> 
                      <input type="text" name="tafsubject" id="tafsubject" value="" size="22" tabindex="103" eform="Subject::1">  
             	        <label for="tafmessage">Your Message</label> 
              	<textarea name="tafmessage" id="tafmessage" cols="2" rows="2" tabindex="104" eform="Message::1"></textarea><br> 
              	<input name="submit" type="reset" id="cancel" class="rounded" tabindex="105" value="Close" /> 
              	<input name="submit" type="submit" id="submit" class="rounded" tabindex="106" value="Submit" /> 
              </fieldset>
      </form>

      The tafThankyou chunk:
      <div id="tafThankyou">
      <p><span id="tafThankyouMessage">Your message has been sent.</span><br>
      <button id="cancel" type="button" name="closebutton" id="closebutton" value="close">Close</button>
      </p>
      </div>

      The tafReport chunk:
      <h2>[+tafsubject+]</h2>
      <p>[+tafmessage+]</p>
      <p>[+tafname+]</p>

      The activation link:
      <a class="taf" href="[~[*id*]~]"><img src="assets/images/logos/email.png" title="Tell A Friend About ..." alt="Tell-a-Friend"></a>

      And the javascript (using jQuery and the jQueryEasing plugin) to make it work:
      $(document).ready(function(){ 
          $("#tafArea").css('height', '0px');
          $("#cancel").click( 
              function() { 
                  $("#tafArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
              }
          );
          $("#tafArea p").click( 
              function() { 
                  $("#tafArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
              }
          );
          $("a.taf").toggle( 
          	function () { 
          		$("#tafArea").animate({height: "224px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'}) 
              }, 
              function () { 
          		$("#tafArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})  
          	} 
          ); 
          if($("div.errors").text() != '') {  
              alert($("div.errors").text());
              $("a.taf").focus();
              $("#tafArea").animate({height: "274px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'});
          } 
          if($("div.errors").text() == '') { 
              $("#tafArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'});
          }
          if($("#tafThankyouMessage").text() != '') { 
              alert($("#tafThankyouMessage").text()); 
          }
          if($("#multiplesubmit").text() != '') {
              alert($("#multiplesubmit").text());
          }
          
      });

      You can see the same basic form and jQuery action in the contact form on my site. It can also work well as an AJAX loaded form if you put the eForm snippet in a resource with no template, and use the URL of the resource in the AJAX loading javascript.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 18817 ☆ A M B ☆
        • 205 Posts
        Thanks so much for the quick response and example Susan!
          Sal Baldovinos
          SEO & DIGITAL MARKETING

          ARIEL DIGITAL | Maximize Your Potential
          www.arieldigitalmarketing.com