表单中构建文件上传_我如何使用Google表单将邮件列表注册表单直接构建到Medium中

表单中构建文件上传

There are a ton of paid tools for gathering email addresses here on Medium. And boy do they offer a lot of features.

在Medium上,有很多付费工具可用于收集电子邮件地址。 和男孩,他们提供了很多功能。

But what if you don’t care about those features?

但是,如果您不关心这些功能怎么办?

What if you just want your readers’ email addresses, and that’s all?

如果您只想要读者的电子邮件地址,那该怎么办?

That’s where Google Forms comes in. It’s simple, free, and exports directly CSV.

那就是Google Forms出现的地方。它简单,免费,并且可以直接以CSV格式导出。

And unlike paid tools, Medium natively supports Google Forms embedding. So if your reader is viewing your story in a browser, they’ll see the form embedded right in the Medium post.

与付费工具不同,Medium原生支持Google Forms嵌入。 因此,如果您的读者正在浏览器中查看您的故事,他们将在“中型”帖子中看到嵌入的表格。

If your reader is viewing your story in the Medium Android or iOS app, they won’t be able to see the embed. So I recommend also including a link that they can follow to go to your form.

如果您的读者正在中型Android或iOS应用中查看您的故事,则他们将看不到嵌入内容。 因此,我还建议您提供一个链接,他们可以按照该链接进入您的表格。

Let’s build a mailing list signup form together, then embed it into a Medium story.

让我们一起构建一个邮件列表注册表单,然后将其嵌入到Medium故事中。

如何使用Google表单构建注册表单 (How to build your signup form with Google Forms)

步骤1:创建表单 (Step 1: Create the form)

Go to https://forms.google.com and click

转到https://forms.google.com ,然后单击

步骤2:建立输入栏位 (Step 2: Create the input field)

The first question will default to “Multiple Choice.” Change it to “short answer”

第一个问题将默认为“多项选择”。 将其更改为“简短答案”

第3步:在表格和问题中添加标题 (Step 3: Add titles to your form and your question)
步骤4:添加数据验证 (Step 4: Add data validation)

First, let’s enable data validation on our form by clicking the “…” in the lower right corner then clicking “data validation.”

首先,让我们在表单上启用数据验证,方法是单击右下角的“…”,然后单击“数据验证”。

Now let’s enable regular expression matching to ensure that your readers enter a valid email address.

现在,让我们启用正则表达式匹配,以确保您的读者输入有效的电子邮件地址。

Here is the regular expression I use, which emailregex.com says will identify a valid email address 99.99% of the time. Just copy and paste this into the regular expression field:

这是我使用的正则表达式, emailregex.com表示它将在99.99%的时间内识别出一个有效的电子邮件地址。 只需将其复制并粘贴到正则表达式字段中即可:

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

If you’re curious how regular expressions work and would like to learn more, here’s an interactive lesson.

如果您想知道正则表达式的工作原理并想了解更多信息,那么这里有一个互动课程

I don’t recommend making this question required, because it will add a scary-looking red asterisk and say “required.” This may give your readers the incorrect perception that you’re demanding their email address. You can easily filter out blank responses after the fact.

我不建议您提出此问题,因为它会添加一个看起来恐怖的红色星号并说“必需”。 这可能会使您的读者错误地认为您需要他们的电子邮件地址。 您可以在事实之后轻松过滤出空白响应。

第5步:确保它是公开的 (Step 5: Make sure it’s public)

Click the gear up top and verify that your email isn’t restricted to people who share the same domain as your email address.

点击顶部的齿轮,并确认您的电子邮件不受限于与您的电子邮件地址共享同一域的人。

第6步:添加色彩飞溅。 为什么不? (Step 6: Add a splash of color. Why not?)

Click the pallet icon in the upper right hand corner. You can also upload an image if you so desire.

单击右上角的托盘图标。 如果需要,您还可以上传图像。

现在,将您的注册表单添加到Medium (Now let’s add your signup form to Medium)

Click the “send” button in the upper right hand corner of your Google Form.

点击Google表单右上角的“发送”按钮。

Click the chain-looking link icon, then click “shorten URL.” Copy the URL, then come back to Medium, paste it in, and hit enter.

点击链式链接图标,然后点击“缩短网址”。 复制URL,然后回到Medium,将其粘贴,然后按Enter。

After a moment, Medium will show a thumbnail of your form. Once you hit the publish button, your form will be embedded within your Medium publication, and will be fully operational.

稍后,Medium将显示您表单的缩略图。 按下“发布”按钮后,您的表单将嵌入到您的“中型”出版物中,并且将可以完全使用。

Voilà! Here’s what mine looks like:

瞧! 这是我的样子:

Get 3 articles worth reading from me in your inbox once a week. Sign up here.

每周一次在您的收件箱中获得3篇值得我阅读的文章。 在这里注册

奖励部分:我如何发送电子邮件 (Bonus section: How I send out my emails)

Here’s the script I currently use to send out my weekly email to around 350,000 people:

这是我目前用来向大约350,000个人发送每周电子邮件的脚本:

FreeCodeCamp/massificationmassification - An emailing service built on Amazon SES and Nodegithub.com

FreeCodeCamp / massification 大众化-基于Amazon SES和Node github.com 构建的电子邮件服务

This script uses AmazonSES for high deliverability. It costs $0.01 per hundred emails, which means my entire weekly email blast only costs me $35.

该脚本使用AmazonSES来实现高交付性。 每百封电子邮件0.01美元,这意味着我整个每周的电子邮件爆炸仅花费我35美元。

Currently the script takes about 18 hours to send out 350,000 emails. But it’s fully open-source, so if anyone spots a way to make it more efficient, pull requests are welcome.

目前,该脚本大约需要18个小时才能发送350,000封电子邮件。 但是它是完全开源的,因此,如果有人发现提高效率的方法,则欢迎请求。

If you’re curious, here’s what one of my emails looks like:

如果您感到好奇,这是我的一封电子邮件的样子:

And here’s the JSON that produces this email:

这是生成此电子邮件的JSON:

{ “subject”: “Someone’s learning how to take down the internet.”, “text”: “Here are this week’s three links that are worth your time:\n\n1. Someone is learning how to take down the internet (3 minute read): http://bit.ly/2cbR5um\n\n2. For 25 years this man has been fighting to make public information public. Now he’s being sued for it (25 minute read): http://bit.ly/2cZzkM4\n\n3. GitHub announced a ton of new collaboration features (6 minute read): http://bit.ly/2cfZrPZ\n\nBonus: I just added new Free Code Camp gear to our community’s shop, including t-shirts, hoodies, and recommended books: http://bit.ly/2cz8Wai\n\n\nHappy Coding,\n\n- Quincy Larson\n\nTeacher at https://www.FreeCodeCamp.com\n\n\n\n\n\nIf this email bothers you, you can manage your email settings here: https://www.freecodecamp.com/settings\n\nOr you can one-click unsubscribe: https://www.freecodecamp.com/unsubscribe/<%= email %>”}

You’ll note the bonus link at the bottom directs readers to Free Code Camp’s shop. This makes it easier for readers to support our open source community, and helps me offset the cost of sending all these emails.

您会注意到底部的奖励链接将读者引导至Free Code Camp的商店 。 这使读者更容易支持我们的开源社区,并帮助我抵​​消了发送所有这些电子邮件的成本。

You’ll also note that I’ve written a crude but reliable unsubscribe function. All of the logic behind this runs on Free Code Camp’s servers, where I maintain this list.

您还将注意到,我编写了一个粗略但可靠的退订函数。 其背后的所有逻辑都在Free Code Camp的服务器上运行,我在该服务器上维护此列表。

You will need to come up with some sort of unsubscribe solution yourself.

您将需要自己提出某种退订解决方案。

If your list isn’t very big, you could just tell readers to reply “unsubscribe” if they don’t want any more of your mails, then manually remove them from your list in the Google Docs spreadsheet.

如果列表不是很大,您可以告诉读者如果他们不想再收到您的邮件,请回复“退订”,然后在Google Docs电子表格中手动将其从列表中删除。

Another thing you may notice is that I’m sending emails as plain text, rather than HTML.

您可能会注意到的另一件事是,我以纯文本而不是HTML的形式发送电子邮件。

A lot of designers write me offering to create an HTML template for me. What they don’t realize is that people like text emails more than they like HTML emails.

许多设计师写信给我,为我创建HTML模板。 他们没有意识到的是, 人们更喜欢文本电子邮件,而不是HTML电子邮件

My theory is that friends don’t send you HTML emails — they just write text. So you’re more likely to interpret a text email as friendly, and an HTML email as spammy.

我的理论是,朋友不向您发送HTML电子邮件-他们只是写文本。 因此,您更有可能将文本电子邮件解释为友好,将HTML电子邮件解释为垃圾邮件。

Also, HTML emails raise accessibility and mobile responsivity concerns that you’d have to deal with. Ever tried to code an email template? It isn’t fun.

此外,HTML电子邮件还增加了您必须处理的可访问性和移动响应性问题。 曾经尝试编写电子邮件模板吗? 不好玩

So my advice is to just use text.

所以我的建议是仅使用文本。

And yes, I have A/B tested this myself and concluded that my own text emails perform better than my HTML emails.

是的,我自己对A / B进行了测试,并得出结论,我自己的文本电子邮件比HTML电子邮件性能更好。

So I thank these designers for their offer, then ask if they could instead help create Creative Commons-licensed assets for our community.

因此,我感谢这些设计师的提议,然后问他们是否可以代替我们来为我们的社区创建创作共用许可的资产

Finally, you’ll note that I’m using bit.ly to handle analytics. This doesn’t give me received/opened statistics, but it does give me click statistics:

最后,您会注意到我正在使用bit.ly来处理分析。 这不会给我接收/打开的统计信息,但是会给我点击统计信息:

If anyone knows a reliable way to track receive/open statistics with plaintext, let me know in the comments section.

如果有人知道用明文跟踪接收/打开统计信息的可靠方法,请在评论部分告诉我。

当然,您必须要求人们注册? (And of course, you have to ask people to sign up ?)

Get 3 articles worth reading from me in your inbox once a week. Sign up here.

每周一次在您的收件箱中获得3篇值得我阅读的文章。 在这里注册

Also, click the ? below so more people will see this article here on Medium.

另外,单击“?”。 因此,更多人会在Medium上看到此文章。

翻译自: https://www.freecodecamp.org/news/how-to-add-mailing-list-signup-to-your-medium-stories-using-google-forms-c717393b2f6/

表单中构建文件上传

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Element UI表单上传图片的过程,可以使用el-upload组件来实现。首先,你需要设置el-upload的action属性为后端的图片上传接口地址。当点击上传按钮时,el-upload会发送请求到后端进行图片上传。\[1\] 在上传成功的处理函数,后端应该返回图片的存储地址。前端可以根据返回的值进行相应的处理。如果收到返回的地址,可以将地址赋值给表单的图片地址属性,并将表单对象上传到后端,让后端将图片地址存入数据库。如果收到返回值0,表示上传失败,可以弹窗提示上传失败。\[1\] 在上传表单时,如果使用form的action属性上传表单,后端可以直接通过表单元素的name来获取对应的值。但是如果使用axios将整个form对象传给后端,需要将表单处理成后端能够获取到参数值的形式。可以使用qs库来格式化数据,将请求参数序列化。\[2\] 在Element UI,可以通过设置auto-upload为"false"来禁用自动上传,然后使用on-change方法来验证文件类型和大小。如果文件符合要求,可以将文件加入到photoLists,如果不符合要求,则移除文件。\[3\] 在表单验证通过后,可以通过自定义的方式将文件通过参数传递给后端。可以使用http-request来实现自定义上传。在插入文件之前,可以使用formData()方法对表单进行处理,将表单元素的name和value进行组合,实现表单数据的序列化,并实现异步上传文件。\[3\] 总结起来,使用Element UI的el-upload组件可以方便地实现表单的图片上传功能。你可以设置action属性为后端的图片上传接口地址,处理上传成功的回调函数来处理返回的图片地址,使用qs库来格式化数据,以及使用自定义的方式将文件通过参数传递给后端。同时,你还可以使用on-change方法来验证文件类型和大小。 #### 引用[.reference_title] - *1* *2* [Vue + ElementUI上传带图片的表单](https://blog.csdn.net/ZHANGYANG_1109/article/details/121068519)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue+ elmentUI实现form表单文件、图片的上传](https://blog.csdn.net/qq_38121975/article/details/105888736)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值