<!DOCTYPE html>
<html>

<head>
    <title>FROMSENDBOX</title>
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
    <link href="css/codemirror.css" rel='stylesheet' type='text/css'/>
    <!-- jQuery (Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <script src="js/codemirror.js"></script>
    <!-- Custom Theme files -->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- favicon -->
	<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
	<link rel="manifest" href="favicon/site.webmanifest">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="フォーム送信,フォームをメールに転送"/>
    <script type="application/x-javascript">
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!--webfont-->
    <!--animated-css-->
    <link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
    <script src="js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
    <!---- start-smoth-scrolling---->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 900);
            });
        });
    </script>
    <!---- start-smoth-scrolling---->

</head>

<body>
<!---->
<div class="banner">
    <div class="container">
        <div class="header">
            <div class="logo wow fadeInLeft" data-wow-delay="0.5s">
                <a href="index.html"><img src="images/logo1.png" alt=""/></a>
            </div>
            <div class="top-menu">
                <span class="menu"></span>
                <ul>
                    <li class="active"><a href="index.html">ホーム</a></li>
                    <li><a class="scroll" href="#features">サービス特徴</a></li>
                    <li><a class="scroll" href="#about">API使い方</a></li>
                    <li><a class="scroll" href="#contact" id="ask-info">お問い合わせ</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="banner-info">
            <div class="col-md-6 banner-text wow fadeInRight" data-wow-delay="0.5s">
                <h3>製品の紹介</h3>
                <p>Webフォームの情報をご指定のメールに送信します。 サーバー不要で、ホームページの運用コストを軽減します。</p>
                <p>使用の方法は簡単です！しかも無料ではじめられます。</p>
            </div>
            <div class="col-md-6 banner-pic wow fadeInLeft" data-wow-delay="0.5s">
                <img src="images/mail.png" alt="" style="margin-top: 3rem;margin-right: 8rem;"/>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!---->
<div id="features" class="features">
    <div class="container">
        <div class="features-head">
            <h4>製品の概要</h4>
            <h3>サービス</h3>
        </div>
        <div class="features-section">
            <div class="col-md-3 feature-grid">
                <img class="wow bounceIn" data-wow-delay="0.4s" src="images/icon1.png" alt=""/>
                <h3>無料からご利用</h3>
                <p>無料送信通数上限 10000通/月</p>
            </div>
            <div class="col-md-3 feature-grid">
                <img class="wow bounceIn" data-wow-delay="0.4s" src="images/icon2.png" alt=""/>
                <h3>カスタマイズ</h3>
                <p>内容を独自な編集仕様でご送信依頼できます。</p>
            </div>
            <div class="col-md-3 feature-grid">
                <img class="wow bounceIn" data-wow-delay="0.4s" src="images/icon3.png" alt=""/>
                <h3>操作簡単</h3>
                <p>フォームにURL設定だけでご利用できます。</p>
            </div>
            <div class="col-md-3 feature-grid">
                <img class="wow bounceIn" data-wow-delay="0.4s" src="images/icon4.png" alt=""/>
                <h3>24時間サポート</h3>
                <p>ご要望とご質問など、24時間対応致します。</p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!---->
<div id="about" class="about">
    <div class="container">
        <div class="about-top">
            <div class="col-md-6 text-center" data-wow-delay="0.5s">
                <img src="images/mail2.png" style="width:20%;height:20%;" alt=""/>

                <div class="col-md-10 text-center" style="border: 1px solid;margin-top: 3rem;">
                    <form id="form-sample" name="form-sample" method="POST">
                        <table>
                            <tr>
                                <td><label>送信先メール</label></td>
                                <td><input type="text" id="mail-sample" name="mail-sample" class="col-md-12"></td>
                            </tr>
                             <tr>
                                <td><label>名前</label></td>
                                <td><input type="text" id="name-sample" name="name-sample" class="col-md-12"></td>
                            </tr>
                            <tr>
                                <td><label>内容</label></td>
                                <td><textarea rows="4" id="content-sample" name="content-sample" class="col-md-12"></textarea></td>
                            </tr>
                        </table>
                        <div class="text-center">
                            <button type="submit" class="btn btn-dark text-center" onclick="sendTo()">送信</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-6 wow fadeInRight" data-wow-delay="0.5s">
                <div class="device-text">
                    <h4>利用例</h4>
                    <h3>フォーム送信依頼</h3>
                    <textarea id="code-example-form" class="" style="margin-top: 3rem;"></textarea>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="container" style="margin-top: 8rem;">
            <div class="about-top">
                <div class="col-md-6 about-device wow fadeInLeft" data-wow-delay="0.5s">
                    <img src="images/mail2.png" alt=""/>
                </div>
                <div class="col-md-6 wow fadeInRight" data-wow-delay="0.5s">
                    <div class="device-text">
                        <h4>利用例</h4>
                        <h3>非同期送信依頼</h3>
                        <textarea id="code-example-ajax" class="" style="margin-top: 3rem;"></textarea>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<script src="js/responsiveslides.min.js"></script>
<script>
    // You can also use "$(window).load(function() {"
    $(function () {
        $("#slider2").responsiveSlides({
            auto: true,
            pager: true,
            speed: 300,
            namespace: "callbacks",
        });
    });
</script>

<div id="contact" class="contact">
    <div class="container">
        <div class="contact-text">
            <h4>ステイインタッチ</h4>
            <h3>連絡先</h3>
        </div>
        <div class="contact-grids" style="margin-bottom: 3rem;">
            <div class="col-md-4 contact-grid text-center wow bounceIn" data-wow-delay="0.4s">
                <div class="icon1"></div>
                <p>Tel: 03-6869-6157</p>
                <p>Fax: 03-6893-3931</p>
            </div>
            <div class="col-md-4 contact-grid text-center wow bounceIn" data-wow-delay="0.4s">
                <div class="icon2"></div>
                <p><a href="https://www.apasys.co.jp" target="_blank">アパシス株式会社</a></p>
            </div>
            <div class="col-md-4 contact-grid text-center wow bounceIn" data-wow-delay="0.4s">
                <div class="icon3"></div>
                <a href="mailto:formsendbox@apasys.com">formsendbox@apasys.com</a>
            </div>
            <div class="clearfix"></div>
        </div>

        <div class="contact-details talk-message">
            <div class="delete_right" onclick="javascript:hideMessage()"><img src="images/close.png"
                                                                              style="height: 38px;width: 38px;" alt=""/>
            </div>
            <form>
                <div class="col-md-6 contact-left">
                    <input id="mail-name" type="text" class="text  fadeInLeft" data-wow-delay="0.4s" value=""
                           placeholder="お名前">
                    <input id="mail-email" type="text" class="text  fadeInLeft" data-wow-delay="0.4s" value=""
                           placeholder="メールアドレス">
                    <input id="mail-tel" type="text" class="text  fadeInLeft" data-wow-delay="0.4s" value=""
                           placeholder="電話番号">
                </div>
                <div class="col-md-6 contact-right">
                    <textarea id="mail-message" class=" fadeInRight" data-wow-delay="0.4s" value="Message"
                              placeholder="お問い合わせ内容"></textarea>
                    <input class=" fadeInRight" data-wow-delay="0.4s" type="button" value="送信"
                           onclick="javascript:sendMail()"/>
                </div>
                <div class="clearfix"></div>
            </form>
        </div>
    </div>
</div>

<div class="footer text-center">
    <div class="container">
        <p class="wow bounceIn" data-wow-delay="0.4s">Copyright &copy; 2020 APASYS All rights reserved</p>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $().UItoTop({
            easingType: 'easeOutQuart'
        });
        
        $("#ask-info").click(function () {
            $(".talk-message").show();
        })
        
        $("span.menu").click(function () {
            $(".top-menu ul").slideToggle("slow", function () {
            });
        });

        //codemirror
        var formCodeMirror = document.getElementById('code-example-form');

        var codeMirrorEditor = CodeMirror.fromTextArea(formCodeMirror, {
            mode: "text/javascript",
            lineNumbers: true

        });

        var codeExampleFormStr = '// [XXXX@XXX.XXX] is your email address.\n'+
            '<form action="https://formsendbox.com/sendto/XXXX@XXX.XXX" method="POST">\n' +
            '    <table>\n' +
            '        <tr>\n' +
            '            <td><label>送信先メール</label></td>\n' +
            '            <td><input type="text" id="email" name="email"></td> \n' +
            '        </tr>\n' +
            '        <tr>\n' +
            '            <td><label>名前</label></td>\n' +
            '            <td><input type="text" id="name" name="name"></td> \n' +
            '        </tr>\n' +
            '        <tr>\n' +
            '            <td><label>内容</label></td>\n' +
            '            <td><input type="text" id="content" name="content"></td> \n' +
            '        </tr>\n' +
            '    </table>\n' +
            '</form>'

        codeMirrorEditor.setValue(codeExampleFormStr);
        codeMirrorEditor.setSize('', '355px');

        // ajax
        var ajaxCodeMirror = document.getElementById('code-example-ajax');

        var ajaxMirrorEditor = CodeMirror.fromTextArea(ajaxCodeMirror, {
            mode: "text/javascript",
            lineNumbers: true

        });

        var codeExampleAjaxStr = 'var to = ["xxxxxxxx@xxx.xxx"];\n' +
            'var sendMailData = { \n ' +
            '    title: "your mail title",\n ' +
            '    content: "your mail content",\n ' +
            '    toList: to,\n ' +
            '    formsendbox_id: "b309590d3bb80e140873d729be7c8d6d",\n ' +
            '    formsendbox_key: "2b2731af96cc3d862395993a7ba1188d"\n ' +
            '};\n' +
            '$.ajax({\n' +
            '    type: "POST",\n' +
            '    datatype: "text",\n' +
            '    url: "https://formsendbox.com/sendSimpleMail",\n' +
            '    data: JSON.stringify(sendMailData),\n' +
            '    contentType: "application/json",\n' +
            '    beforeSend: function(xhr) {\n' +
            '        xhr.withCredentials = true;\n' +
            '    },\n' +
            '    crossDomain: true,\n' +
            '    success: function(result) {\n' +
            '    }\n' +
            '})';

        ajaxMirrorEditor.setValue(codeExampleAjaxStr);
        ajaxMirrorEditor.setSize('', '390px');

        $(".talk-message").hide();

    });
</script>
<a href="javascript:showMessage();" class="talk" style="display: block; "></a>
<script>
    function showMessage() {
        $(".talk-message").show();
    }

    function hideMessage() {
        $(".talk-message").hide();
    }

    
    function sendTo() {
    	 $("#form-sample").attr("action", "https://formsendbox.com/sendto/"+$("#mail-sample").val());
    	 $("#form-sample").method = "POST";
    	 $("#form-sample").submit();
    	}
    
    function sendMail() {
        const mailContent = "名前：" + $("#mail-name").val() + "\n" +
            "メールアドレス：" + $("#mail-email").val() + "\n" +
            "電話番号：" + $("#mail-tel").val() + "\n" +
            "メッセージ：" + $("#mail-message").val() + "\n";

        var toList = ["formsendbox@apasys.co.jp"];
        var data = { title: "formsendbox homepage message", content: mailContent, toList: toList};

        $.ajax({
            type: 'POST',
            datatype: 'text',
            url: 'https://formsendbox.com/sendSimpleMail',
            data: JSON.stringify(data),
            contentType: 'application/json',
            beforeSend: function (xhr) {
                xhr.withCredentials = true;
            },
            crossDomain: true,
            success: function (result) {
                if (result == "true") {
                    alert("送信完了しました。");
                } else {
                    alert("送信失敗しました。");
                }
            },
            error: function (data) {
                alert("大変申し訳ありません。現在ご利用できません。");
            }
        })
    }


</script>
<a href="#to-top " id="toTop " style="display: block; "> <span id="toTopHover " style="opacity: 1; "> </span></a>
<!---->

</body>

</html>