Flodesk is an easy to use and customize form builder. You can important your own font and stylize your newsletter without needing to use a code editor. If you would like to use Flodesk as your service provider please follow the steps in my video here. Or you may follow the instructions below.

First, create an account in Flodesk if you have not done so. Once your account is created, log into Flodesk. Select the Forms tab from the dashboard >New form> and select Inline. I highly recommend using the first ribbon option as the others may result in sizing issues on mobile.

**Note** While you can use the full page form you will need to create a full page embed page in google sites editor. But Keep in mind, full page embed is NOT SEO friendly.

To customize your form, be sure to set the canvas and background color to transparent. This will allows you to change the section colors on your google site and not worry about trying to change the newsletter background. The slashed icon means no color in flodesk, making it transparent.

Tip: You can also add images to your background section in Google.

Once your design is complete, decide on your setting for your site. When you reach the Embed tab select advanced options.

Select Raw HTML code

Leave the settings as they are and do not disable any settings.

Copy the code on the HTML page. Select finish. :)

If you would like to use MailChimp as your service provider please follow the steps in my video here. Or you may follow the instructions below.

First, create an account in MailChimp if you have not done so. Once your account is created, log into MailChimp. Select the Audience tab from the dashboard >Signup forms >and select Embedded Forms 

Once inside of the form editor, select the form fields that you would like to use. I recommend keeping the form short for better conversions.

Under form Settings adjust the size of the form. I recommend a smaller form size of 250px if you would like to use the form in the footer of your website.

Once you have made these adjustments you can now copy the code from the form editor by selecting continue.

Customizing the Form:

If you would like to customize the form for match your template you will need to use an HTML editor such as Codepen or Visual Studio Code. You may also use another online editor called Codebeautify which will allow you to make changes quickly. 

If your template includes a sign up form: This sign up form uses https://sheetdb.io/ to connect to Google Sheets. You may also change the sign up form to Mailchimp, Flodesk, ect.ect. But if you want the form to work you will need to connect the data. Check out the video on my youtube channel if you get stuck or if you use something else like Mailchimp, Flodesk or Mailerlite.