全部控件展示

代码如下:

<div class="ope-form" data-form-category="简历箱" data-confirm-page-text="请确认您输入的信息" data-thanks-page-text="感谢您的支持">
    <div class="item">
        <div class="title">姓名</div>
        <div class="control">
            <div class="horizontal-align">
                姓
                <?php echo do_shortcode('[opeform use="text" required="true" from_name="true" title="姓名" name="user_name" length="40" placeholder=""]'); ?>
                名
                <?php echo do_shortcode('[opeform use="text" required="true" from_name="true" title="姓名" name="user_name" length="40" placeholder=""]'); ?>
            </div>
        </div>
    </div>
    <div class="item g-avatar">
        <div class="title">上传头像</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="image" required="true" title="头像" name="user_avatar"]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">邮箱</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="email" required="true" from_email="true" title="邮箱" name="user_email" length="50"]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">邮箱<br>(确认)</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="email" required="true" title="邮箱" name="user_email" confirm="true"  length="50" placeholder=""]'); ?>
        </div>
    </div>
    <div class="item g-resume">
        <div class="title">简历</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="file" size="0.22mb" required="true" title="简历" name="user_resume_file" accept=".pdf,.xls,.ppt,.pptx,.doc,.docx,.xlsx"]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">邮编</div>
        <div class="control">
            <div class="horizontal-align">
                <?php echo do_shortcode('[opeform use="zipcode" required="true" title="邮编" name="zipcode" length="3" placeholder="000"]'); ?>
                -<?php echo do_shortcode('[opeform use="zipcode" required="true" title="邮编" name="zipcode" length="4" placeholder="0000"]'); ?>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="title">都道府県</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="text" required="true" class="p-region" title="都道府県" name="prefecture" length="10" placeholder=""]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">市区町村</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="text" required="true" class="p-locality" title="市区町村" name="municipality" length="10" placeholder=""]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">町域</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="text" required="true" class="p-street-address" title="町域" name="town" length="10" placeholder=""]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">住所</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="text" required="true" class="p-extended-address" title="住所" name="building-room" length="30" placeholder=""]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">电话</div>
        <div class="control">
            <div class="horizontal-align">
                <?php echo do_shortcode('[opeform use="text" required="true" title="电话" name="user_tel" length="3" placeholder=""]'); ?>-
                <?php echo do_shortcode('[opeform use="text" required="true" title="电话" name="user_tel" length="4" placeholder=""]'); ?>-
                <?php echo do_shortcode('[opeform use="text" required="true" title="电话" name="user_tel" length="4" placeholder=""]'); ?>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="title">城市</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="select" required="true" title="城市" name="city" option="纽约,伦敦,巴黎,东京,北京,香港,新加坡,上海"]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">职位</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="select" required="true" title="Position" name="position" option="管理员,员工,编辑,后勤"]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">性别</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="checkbox" required="true" quantity="2" title="Gender" name="gender" option="男,女"]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">兴趣</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="checkbox" required="true" title="Hobby" name="hobby" option="音乐,跑步,足球,篮球,唱歌" quantity="4"  hasother="其他,,请填写其他项目"]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">年龄</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="radio" required="true" title="Ages" name="ages" option="10~30,31~50,51~70"]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">分数</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="radio" required="true" title="Score" name="score" option="0,10,20,30,40,50,60,70,80,90,100"]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">留言内容</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="textarea" required="true" title="留言内容" name="user_message" length="500" placeholder=""]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title">验证码</div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="verification" notice="看不清?点击验证码刷新。"]'); ?>
        </div>
    </div>
    <div class="item">
        <div class="title"></div>
        <div class="control">
            <?php echo do_shortcode('[opeform use="submit"]'); ?>
        </div>
    </div>
</div>

图片裁切

关键属性crop,crop的值代表裁切后的尺寸,格式为“宽x高”,x为小写的xyz的x。单位为px,但是不要写单位。

do_shortcode('[opeform use="image" required="true" title="头像" crop="300x400" name="user_avatar"]')

如果不设置crop属性,那么图片将以原尺寸裁切上传。

自定义管理员邮件

向指定邮箱发送邮件

将当前表单内容提交给指定的邮箱。为了功能尽量简洁,本模块没有配置cc及bcc。
下面的代码中展示了如何把提交的内容发送给两个邮箱email1@domain.com和email2@qq.com。多个邮箱用半角逗号分开。

<div class="ope-form">
<?php
$content = 'email1@domain.com,email2@qq.com';
echo do_shortcode('[opeform_admin_email_address]' . $content . '[/opeform_admin_email_address]');
unset($content);
?>
</div>

自定义当前表单管理员邮件的标题,以区分当前网站的多个表单。

<div class="ope-form">
<?php
$content = '来自《***》官网招聘页面的表单';
echo do_shortcode('[opeform_admin_email_subject]' . $content . '[/opeform_admin_email_subject]');
unset($content);
?>
</div>

如果需要在标题中插入表单中填写的姓名和(或)邮箱,可使用{{from_name}}和(或){{from_email}}。注意,仅支持{{from_name}}和(或){{from_email}},且,在模版中使用短代码时,短代码中设置了from_name和from_email为true。如下:

<div class="ope-form">
<?php
$content = '来自{{from_name}}的咨询';
echo do_shortcode('[opeform_admin_email_subject]' . $content . '[/opeform_admin_email_subject]');
unset($content);
?>
</div>

<div class="ope-form">
<?php
$content = '来自{{from_name}}({{from_email}})的咨询';
echo do_shortcode('[opeform_admin_email_subject]' . $content . '[/opeform_admin_email_subject]');
unset($content);
?>
</div>

自定义管理员邮件内容顶部信息

<div class="ope-form">
<?php
$content = '下面是来自《忍者科技》简历页面的简历信息:';
echo do_shortcode('[opeform_admin_email_top]' . $content . '[/opeform_admin_email_top]');
unset($content);
?>
</div>

自定义自动回复邮件

自定义当前表单自动回复邮件的标题:

<div class="ope-form">
<?php
$content = '感谢您投递的简历-来自《***》官网';
echo do_shortcode('[opeform_reply_email_subject]' . $content . '[/opeform_reply_email_subject]');
unset($content);
?>
</div>

自定义自动回复邮件内容,顶部说明文:

<div class="ope-form">
<?php
$content = '下面是您在《***》官网简历页面投递的简历信息:';
echo do_shortcode('[opeform_autoreply_email_top]' . $content . '[/opeform_autoreply_email_top]');
unset($content);
?>
</div>

自定义自动回复邮件内容,底部说明文:

<div class="ope-form">
<?php
$content = '这是自动发送的邮件,请不要回复该邮件。<br>
如果您有其它问题,请通过下面的邮箱与我们取得联系。<br>
邮箱:info@domain.com';
echo do_shortcode('[opeform_autoreply_email_bottom]' . $content . '[/opeform_autoreply_email_bottom]');
unset($content);
?>
</div>

日本邮编自动生成地址

该功能基于Github资源制作。所以测试环境如果与Github连接有问题,调试会遇到问题。
Github项目地址:https://yubinbango.github.io/yubinbango/

两段邮编生成一段地址

<div class="item">
    <div class="title">邮编</div>
    <div class="control">
        <div class="horizontal-align">
            <?php echo do_shortcode('[opeform use="zipcode" required="false" title="邮编" name="zipcode" length="3" placeholder="000"]'); ?>
            -
            <?php echo do_shortcode('[opeform use="zipcode" required="false" title="邮编" name="zipcode" length="4" placeholder="0000"]'); ?>
        </div>
    </div>
</div>
<div class="item">
    <div class="title">地址</div>
    <div class="control">
        <?php echo do_shortcode('[opeform use="text" required="false" title="地址" name="address" length="100" placeholder="" class="p-region p-locality p-street-address p-extended-address"]'); ?>
    </div>
</div>

这里两段邮编的name是一样的。前面的长度为3,后面的长度为4

详细的地址需要p-region, p-locality, p-street-address, p-extended-address这几个class。分别对应:都道府県,市区町村,町域,住所

一段邮编生成一段地址

<div class="item">
    <div class="title">邮编</div>
    <div class="control">
        <div class="horizontal-align">
            <?php echo do_shortcode('[opeform use="zipcode" required="false" title="邮编" name="zipcode" length="7" placeholder="0000000"]'); ?>
        </div>
    </div>
</div>
<div class="item">
    <div class="title">地址</div>
    <div class="control">
        <?php echo do_shortcode('[opeform use="text" required="false" title="地址" name="address" length="100" placeholder="" class="p-region p-locality p-street-address p-extended-address"]'); ?>
    </div>
</div>

这里邮编的长度为7

详细的地址需要p-region, p-locality, p-street-address, p-extended-address这几个class。分别对应:都道府県,市区町村,町域,住所

两段邮编生成分段地址

<div class="item">
    <div class="title">邮编</div>
    <div class="control">
        <div class="horizontal-align">
            <?php echo do_shortcode('[opeform use="zipcode" required="false" title="邮编" name="zipcode" length="3" placeholder="000"]'); ?>
            -<?php echo do_shortcode('[opeform use="zipcode" required="false" title="邮编" name="zipcode" length="4" placeholder="0000"]'); ?>
        </div>
    </div>
</div>
<div class="item">
    <div class="title">都道府県</div>
    <div class="control">
        <?php echo do_shortcode('[opeform use="text" required="false" class="p-region" title="都道府県" name="prefecture" length="10" placeholder=""]'); ?>
    </div>
</div>
<div class="item">
    <div class="title">市区町村</div>
    <div class="control">
        <?php echo do_shortcode('[opeform use="text" required="false" class="p-locality" title="市区町村" name="municipality" length="10" placeholder=""]'); ?>
    </div>
</div>
<div class="item">
    <div class="title">町域</div>
    <div class="control">
        <?php echo do_shortcode('[opeform use="text" required="false" class="p-street-address" title="町域" name="town" length="10" placeholder=""]'); ?>
    </div>
</div>
<div class="item">
    <div class="title">住所</div>
    <div class="control">
        <?php echo do_shortcode('[opeform use="text" required="false" class="p-extended-address" title="住所" name="building-room" length="30" placeholder=""]'); ?>
    </div>
</div>

这里两段邮编的name是一样的。前面的长度为3,后面的长度为4

分段地址分别给p-region, p-locality, p-street-addres, p-extended-address这几个class。分别对应:都道府県,市区町村,町域,住所