Question

基本上，作为一名初级Web开发人员，我发现自己有点过头了。我正在使用Bootstrap 3为朋友的业务创建一个网站，除了创建一个允许访问者提交有关预约兴趣的信息的网页表格之外，它可以处理所有内容。

当我深入研究时，我发现PHP可能会涉及到。我的网站托管服务商（ASmallOrange）包含一个名为表单工具（http://www.formtools.org/）的工具。虽然使用Bootstrap元素创建表单外观没有问题，但如何在实际站点上运行呢？

Answer 1

可以找到易于安装/使用/修改的PHP脚本here：包括：验证码（验证码），反漏洞利用注入，语言文件和设置。

Answer 2

您是否需要一个只发送邮件的联系表格....

如果是这样，请考虑利用Mandrill服务，该服务每月最多可免费发送12,000封电子邮件。

样本表格（更改以满足您的需求）

<h1>Contact</h1>
<br />

<div id="ContactMessageSentAlert" class="alert alert-success">
    You're message has been sent.  
</div>

<form role="form" id="ContactMessageForm">
    <div class="form-group">
        <label for="FirstName" class="sr-only legacy-label">First Name</label>
        <input type="text" id="FirstName" name="FirstName" maxlength="255" class="form-control" placeholder="First Name" />
    </div>
    <div class="form-group">    
        <label for="LastName" class="sr-only legacy-label">Last Name</label>
        <input type="text" id="LastName" name="LastName" maxlength="255" class="form-control" placeholder="Last Name" />
    </div>
    <div class="form-group">
        <label for="EmailAddress" class="sr-only legacy-label">Email Address</label>
        <input type="email" id="EmailAddress" name="EmailAddress" maxlength="255" class="form-control" placeholder="Email Address" />
    </div>
    <div class="form-group">    
        <label for="TwitterUsername" class="sr-only legacy-label">Twitter Username</label>
        <input type="text" id="TwitterUsername" name="TwitterUsername" maxlength="16" class="form-control" placeholder="Twitter Username" />
    </div>
    <div class="form-group">
        <label for="Subject" class="sr-only legacy-label">Subject</label>
        <input type="text" id="Subject" name="Subject" maxlength="255" class="form-control" placeholder="Subject" />
    </div>
    <div class="form-group">
        <label for="Message" class="sr-only legacy-label">Message</label>
        <textarea id="Message" name="Message" rows="5" class="form-control" placeholder="Message"></textarea>
    </div>
    <button type="button" class="btn btn-default" id="ContactMessageSendButton">Send</button>
</form>

<script type="text/javascript" src="/scripts/mail.js" defer="defer"></script>
<script type="text/javascript">
    $(document).ready(function () { 
        $('#ContactMessageSentAlert').hide();
        $('#ContactMessageForm').show();

        $.validator.addMethod('twitterUsername', function(value, element) {
            return this.optional(element) || /^(@?[a-zA-Z0-9\_]{1,15})$/.test(value);
        }, 'Invalid');

        var validator = $('#ContactMessageForm').validate({
            errorElement: 'div',
            rules: {
                FirstName: {required: true},
                LastName: {required: true},
                EmailAddress: {required: true, email: true},
                TwitterUsername: {twitterUsername: true},
                Subject: {required: true},
                Message: {required: true}
            },
            messages: {
                FirstName: {required: 'Please enter your first name.'},
                LastName: {required: 'Please enter your last name.'},
                EmailAddress: {required: 'Please enter your email address.', email: 'Please enter a valid email address.'},
                TwitterUsername: {twitterUsername: 'Please enter a valid Twitter username.'},
                Subject: {required: 'Please enter a subject.'},
                Message: {required: 'Please enter a message.'}
            },
            errorPlacement: function (error, element) {
                $(error).insertBefore($(element));
            },
            highlight: function(element, errorClass) {              
                $(element).parent('div').addClass('has-error');
            },          
            unhighlight: function(element, errorClass, validClass) {
                $(element).parent('div').removeClass('has-error');
            },
            onfocusout: false,
            invalidHandler: function(event, validator){
                setTimeout(function(){
                    $('input:text').blur();
                    $('textarea').blur();
                    // Pseudo of input:email is not recognized by jQuery yet, so have to target the email fields individually.
                    $('#EmailAddress').blur();
                }, 10);
            }
        });     
    });
</script>

/scripts/mail.js文件：

function sendMail(sender, senderName, recipient, subject, message) {
    $.ajax({
        type: 'POST',
        url: 'https://mandrillapp.com/api/1.0/messages/send.json',  
        data: {
            /* Confirm API key before use! */
            'key': 'YOURAPICODE', 
            'message': {
                'from_email': 'INFO@YOURDOMAIN.COM',
                'from_name': senderName,
                "headers": {"Reply-To": sender},
                'to': [{'email': recipient, 'type': 'to'}],
                'autotext': 'true',
                'subject': subject,
                'html': message
            }
            }
    })
};


/* Assign an OnClick function to items in the "Send" button */
$('#ContactMessageSendButton').click(function(e) {
    $(document).ready(function () {
        var form = $('#ContactMessageForm');
        form.validate();
        if (form.valid() === true) {
            var sender = $.trim($('#EmailAddress').val());
            var senderName = $.trim($('#FirstName').val()) + ' ' + $.trim($('#LastName').val());
            var recipient = 'INFO@YOURDOMAIN.COM';
            var subject = $.trim($('#Subject').val());
            var message = $.trim($('#Message').val()).replace(/\n/g, '<br />') + '<br />' + $.trim($('#TwitterUsername').val());
            sendMail(sender, senderName, recipient, subject, message);
            $('#ContactMessageSentAlert').show();
            $('#ContactMessageForm').hide();
        }
    });
});

如何在实际网站上学习如何实施联系表格？

2 个答案: