DEV Community

Cover image for How To Build an Embeddable Newsletter Signup Form with Google Forms, Mailchimp, and Zapier
Antonello Zanini for Writech

Posted on • Updated on

How To Build an Embeddable Newsletter Signup Form with Google Forms, Mailchimp, and Zapier

Over the past few months, I have tried several services to build custom signup forms. The majority of them are not free, or when they are free they come with too many limitations. Moreover, several websites do not allow you to embed forms created with them. This is why I gave up on them.

On the contrary, Google Forms allows you to create forms easily and for free. Plus, you can natively embed them almost everywhere — even here on Medium. The main problem is that exporting your emails to CSV and then import them to your favorite email marketing provider takes time. Thankfully, you can avoid this boring, trivial, and time-consuming task by properly configuring Zapier.

So, let's see how to build an embeddable newsletter signup form with Google Form for free, and automatically link it to your Mailchimp account with Zapier.

How to Build a Newsletter Signup Form With Google Forms

Follow this step-by-step guide to build your newsletter signup form with Google Forms.

1. Initialize the form

If you do not have a Google account yet, you can create one here for free. Otherwise, skip this.

Then, visit https://forms.google.com and click on "Blank" to initialize a new empty form.

2. Create the email input field

By default, a question set to "Multiple Choice" will be created. Change it to "Short answer"

Then, change the input label from "Untitled Question" to "Insert your email here:".

Now, you want to make sure that only valid email addresses will be inserted in the field. To ensure this, click on the three dots in the right lower corner. Then, click "Response validation".

Now, fill out the fields with "Text", "Email", and "Please, enter a valid email address". The last one will be the message used in case of validation failure.

Lastly, enable the "Required" slider to make sure users will have to fill out the input field as expected.

3. Finalize your newsletter form

Now, it is time to complete your newsletter signup form by adding a title and an optional form description.

4. Customize your newsletter form

You can style your newsletter signup form by clicking on the "Customize theme" button. Here you can change the header, theme and background color, and font.

Please, note that this is an optional step.

5. Use your newsletter form

Your newsletter signup form is now complete and you can start using it. To do so, click on the "Send" button. Then, click the chain-looking icon to access the "Link" tab. Here you can retrieve the link to your Google Form. Use it in your emails or embed it in supported websites — such as Medium.

Otherwise, you can access the "Embed HTML" tab. Here you can retrieve the HTML [`

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)tag code to embed your newsletter form in HTML or WordPress websites.`

`

How To Connect Your Google Form to Mailchimp with Zapier

Now, let's learn how to automatize the email collection process. In fact, right now you would have to periodically check your Google Form responses, export the collected emails, and manually import them to your email marketing service. Thankfully, Zapier allows you to make this automatic!

In this tutorial, you are going to see how to use Zapier to connect your Google Form to Mailchimp. This is only because Mailchimp is the most used service when it comes to email marketing, but the same approach can be applied to Sendinblue, HubSpot, and many others.

Let's now dive into how to set up Zapier.

1. Create a Google Sheets document with all the responses

Reach the "Response" tab of your Google Form and click the "View responses in Sheets" button.

This will create a Google Sheet document containing all the responses associated with your newsletter signup forms. In other words, this document will contain all the emails you collected thanks to your Google Form.

The empty Google Sheets document that will contain all the collected emails

2. Set up Google Forms in Zapier

If you do not have a Zapier account yet, you can create a new one here for free. Otherwise, skip this.

Then, visit https://zapier.com/apps/google-forms/integrations/mailchimp and click on "Connect Google Form + Mailchimp".

Now, click on "Sign to Google Forms" and follow the procedure.

After allowing Zapier to access your Google account, click "Continue".

Now, configure your Zapier trigger by selecting the Google Sheets document created early in the "Spreadsheet" input, and "Form responses 1" in the "Worksheet" one.

Now, be ready to test the trigger you just created. Visit your Google Sheets file and add a row with sample data.

Then, open the "Test trigger" dropdown and click "Test". This is what you should be able to see:

As you can see, the timestamp and email have been retrieved correctly.

3. Set up Mailchimp in Zapier

If you do not have a Mailchimp account yet, you can create a new one here for free. Otherwise, skip this.

Now, continue the Zapier wizard and configure the Mailchimp action. In the "Action Event" field select "Add/Update Subscriber".

Next, click the "Continue" button. Then click "Sign in to Mailchimp" and follow the sign-in procedure by allowing Zapier to access your Mailchimp data.

Now, in "Audience" select your Mailchimp name account, in "Subscriber email" the "Insert your email here" field, and disable the update existing option. Feel free to set up the other options as you prefer.

This way, whenever someone fills out the form, their email will be stored in the Google Sheets document. Then, the "Insert your email" column will be read by Zapier, which will use this information to add a new user to your Mailchimp account.

You can now click the "Continue" button at the end of the page and end the wizard by clicking "Skip Test"

Lastly, click on "Turn on Zap" to finalize the procedure.

Et voila! Your automation process is now on!

Keep in mind that with the Zapier free plan, your automated tasks will be limited to 100 per month.

Conclusion

Today, we looked at how to define an embeddable newsletter signup form with Google Form for free. This is a great tool, but it comes with a few limitations. For example, it cannot be natively integrated with most email marketing providers. Luckily, Zapier allows you to do so. In particular, here we learn how to set up Zapier to automatically populate Mailchimp audience records whenever someone fills out your Google Form.

Thanks for reading! I hope that you found this article helpful.

`


The post "How To Build an Embeddable Newsletter Signup Form with Google Forms, Mailchimp, and Zapier" appeared first on Writech.

Top comments (0)