非Firebase托管站点能否使用Dynamic Links及PHP表单适配方案

问题1：非Firebase托管的网页能否使用Firebase Dynamic Links #

可以正常使用。Firebase Dynamic Links是独立的API服务，和网站的托管位置没有绑定关系，只需要在网页内引入Firebase JS SDK、配置对应项目参数，就能正常调用创建短链、解析动态链接等全部能力。

问题2：不使用云函数，改用JavaScript实现表单功能是否可行 #

完全可行，无需云函数就能实现纯前端的表单校验、提交发信逻辑，改造后可以直接部署到Firebase Hosting。

具体改造步骤 #

1. 把原PHP渲染的动态提示部分替换为静态HTML，移除所有PHP代码：

<section id="page-details">
    <div class="container">
        <div id="contact-details" class="full-width">
            <div class="one-third">
                <div id="contact-us-form" class="grey-corner-box">
                    <form id="contactForm" class="contact-form init" novalidate="novalidate" data-status="init">
                        <fieldset>
                            <legend>
                                <div>
                                    <span class="bold">Drop</span> us a line
                                </div>
                                <!-- 动态提示框，由JS控制显隐和样式 -->
                                <div id="formNotice" style="display:none;padding:5px;margin:5px 0;clear:both;font-size:14px;"></div>
                            </legend>
                            <ul>
                                <li class="select-three">
                                    <div>
                                        <label for="input-name">Name:*</label>
                                        <input type="text" name="contact_name" id="input-name" size="40" class="form-control default-input" aria-invalid="false">
                                    </div>
                                    <div>
                                        <label for="input-email">E-mail:*</label>
                                        <input type="email" name="contact_email" id="input-email" size="40" class="form-control input-email default-input" aria-invalid="false">
                                    </div>
                                    <div>
                                        <label for="input-website">Website:*</label>
                                        <input type="text" name="contact_website" id="input-website" size="40" class="form-control default-input" aria-invalid="false">
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <label for="contact_message">Message:*</label>
                                        <textarea name="contact_message" id="contact_message" cols="40" rows="5" class="form-control textarea form-control" aria-invalid="false"></textarea>
                                    </div>
                                </li>
                                <li>
                                    <div class="submit-contact default-submit">
                                        <button type="submit" class="submit-btn theme-btn">Submit</button>
                                    </div>
                                </li>
                            </ul>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

2. 新增JS逻辑实现表单校验、提交和发信，发信可以用支持前端直接调用的邮件服务API，也可以对接在线表格实现数据收集：

document.getElementById('contactForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const noticeEl = document.getElementById('formNotice');
    
    // 表单必填校验
    const name = document.getElementById('input-name').value.trim();
    const email = document.getElementById('input-email').value.trim();
    const website = document.getElementById('input-website').value.trim();
    const message = document.getElementById('contact_message').value.trim();
    
    if(!name || !email || !website || !message) {
        noticeEl.style.display = 'block';
        noticeEl.style.background = 'red';
        noticeEl.style.color = 'white';
        noticeEl.innerText = 'Some required field was missing!';
        return;
    }
    
    try {
        // 此处替换为你选择的发信服务调用逻辑
        // 提交成功提示
        noticeEl.style.display = 'block';
        noticeEl.style.background = 'green';
        noticeEl.style.color = 'white';
        noticeEl.innerText = 'Successfully send your request!';
        // 重置表单
        this.reset();
    } catch(err) {
        noticeEl.style.display = 'block';
        noticeEl.style.background = 'red';
        noticeEl.style.color = 'white';
        noticeEl.innerText = 'Submit failed, please try again later.';
    }
})

其他可选方案 #

如果不想重写原有PHP代码，可以把PHP后端部分单独部署到任意支持PHP的服务器上，前端表单的action直接填写PHP接口的公网地址，在PHP代码中添加CORS头解决跨域问题即可，不会影响现有Firebase Dynamic Links的使用。

内容的提问来源于stack exchange，提问作者micha