How to embed your Jotform to Carrd

Carrd lets you build beautiful, responsive, one-page websites that can be used for just about anything, from sharing a portfolio to collecting contact information. While Carrd offers a free plan, its paid Pro plans open up a whole world of options to you. For example, this plan allows you to embed forms to collect information, payments, and more on your Carrd site.

Although Carrd does offer some basic form capabilities, you just can’t beat using a dedicated form creation tool with hundreds of features. And Jotform gives you all of those features for free.

One of the most common use cases for a landing page is to give people a way to contact you without exposing your email to potential spammers. So let’s go through the process of adding a Jotform contact form to Carrd.

Getting started with Jotform the easy way

OK, to be honest, everything with Jotform is easy. But if you want this process to be super easy, Jotform has hundreds of contact form templates to help you get started. In fact, the hardest part will be picking just one.

Before you get started, you’ll need to sign up with Jotform. You did that already, right? Great! For this tutorial, we’re going to stick with a clean and simple contact form. Open that link and click the big green Use Template button.

Now you have a basic starter form. Let’s embed it. Go to the Publish tab.

Your form should already be public. If not, go to the settings by clicking the settings gear on the Publish page. Then select Public Form.

Now switch to the Embed tab and use the green Copy Code button to copy your code. You may want to hold off on this step until you get your Carrd page set up. But when you’re ready, this page will be waiting for you.

Embedding a form in Carrd

The ability to embed an element into your Carrd landing page is a feature of Carrd’s Pro Standard plan. The Pro Lite version doesn’t include embedding functionality or forms. But at only $19 per year, the Pro Standard plan won’t break the bank.

To get started in Carrd once you’ve created an account, click the big green New Site button in the upper-right corner of your dashboard. Then select a template with lots of space to add your form. This Jane Anderson template is perfect.

Before you add your form, you’ll need to replace the default images for your profile and the background. Carrd won’t let you view your embedded form until you do. 

First, click on the background area to open the editing menu on the left. Then choose Pick from library to easily add an image. You can change this later, of course, and any photo will do for now.

Next, click on the profile photo on the page and select Upload. You can use your own photo or snag one from Unsplash if you don’t have one handy. After you’ve uploaded the file, you can crop it by dragging the blue handles. 

Click Accept when you’re done.

Next, you’ll need to remove the paragraphs of text to make room for your form. First, select the text. Then, in the editor on the left, delete the text element by clicking on the trash can icon at the bottom.

Now you’ll have room to embed an element on your page. Start by clicking the + from the menu in the upper left. Select Embed from the dropdown menu.

Your embed configuration will show up on the left. Scroll to the bottom and paste your Jotform code from the previous step, then click Done.

It’s finally time to see our page with a form. Click on the save icon in the top right menu, and fill in the Title and Description fields.

After that, scroll to the bottom, select Publish to a .carrd.co URL, choose a sub-domain name, and click on the Publish Changes button.

Next, click View Site to see your work.

Customizing your form to match Carrd’s theme

So far, so good! Except the form doesn’t blend in well with the page because it cuts off the background image, and the form’s background color is slightly different than the page’s.

But that’s not a problem. Jotform is ridiculously customizable. Let’s make our form blend in.

Go back to the form in Jotform. Make sure you’re in the Build section and open the Form Designer by clicking on the paint roller icon.

The two settings we care about are the Page Color and the Form Color. We’re going to make them both transparent.

Change the colors by clicking on the white squares. In the color settings, click the red X to hide the color completely. Then click outside of the color selector to hide it.

When you’ve changed both colors, scroll to the bottom of the Form Designer and click Save. If you know CSS and want to make more advanced changes to your form, check out the Advanced Designer option and really go to town.

Now our form should blend smoothly into the background.

Adding even more things from Jotform

Why stop at just collecting contact info? You can use Jotform and your landing page to list products you’re selling, display event calendars, and schedule meetings.

You can even use Jotform to collect donations and other payments. We have over 30 payment integrations to choose from.

There are so many ways you can use Jotform to enhance your site. The more you use it, the more you’ll discover.