To give you the best possible experience, this site uses cookies. Using mailify.com means you agree to this. Find out why we use cookies and how to manage your settings here.

×

Email Marketing Delivered: Mailify's Blog

Tips to improve your email newsletter results, stay up-to-date with our email marketing software features, and stay on the cutting edge of email marketing and newsletter tech news.

Tutorial: Create Sign Up Forms With The FormBuilder

Tutorial: Create Sign Up Forms With The FormBuilder

Pleased to meet you! Let’s stay in touch.
Subscribe to our newsletter.

Meet the FormBuilder

One of the most asked about features of our email marketing software is the FormBuilder – our drag-and-drop form editor. The FormBuilder allows users to create customizable subscription forms for their website that will synchronize new subscriber data with contact lists in Mailify.

Built with the same drag-and-drop technology as our EmailBuilder, the FormBuilder makes creating enticing and creative sign-up forms quick and easy.  Not limited to just form fields, use the text and image modules to create entire lead generation pages to synchronize with Mailify. And since it uses the same technology as the EmailBuilder – all forms are automatically responsive, so you can drive sign-ups no matter the device.

Creating your form

The first thing to do if you want to create a form is to activate the FormBuilder extension in your app’s Extensions menu. Once you’ve done this, you’ll notice a new option available in the row next to each of your contact lists in the Contact Lists tab.  Click the “Create a form” icon to begin. If you don’t have any contact lists yet, create one to be able to create your form.

The form you create will be associated with the contact list you have picked from this list. Any data your visitors enter into this form will be automatically saved to fields in this list.  If you are creating a form for a list you already have with contacts in it, you will get a popup asking you if you wish to create a field associated with each column of your list. If you click yes, the FormBuilder will automatically create input fields for the data your form currently collects. For example, if your contact list currently has Email, Name, Company, the FormBuilder will create those 3 fields and automatically link them with their respective columns in your contact list.

Modules

We built the FormBuilder so you don’t have to be stuck with boring old signup forms. Spice up your form with text modules and images that will help bring your page to life. Remember, everything you create here is automatically mobile responsive.

formbuilder-add-modules

 

Form properties

Customize even the smallest details of your form to make it your own:

  • Form title
  • Form alignment
  • Form width (in pixels)
  • Space between the modules
  • Main content and module borders
  • Line spacing
  • Field distribution (1 column or 2)
  • Space between each field
  • Label positioning
  • Space between the fields and field names (labels)
  • Field name font style

formbuilder-properties

Themes and colors

The key here is to customize the form as much as possible to match your website and branding. Doing this will make the transition seamless for the users, and increase sign-ups. Edit the general background color, the color for the modules, the borders, and even the links and text. Use the eyedropper tool to easily match colors. You can also choose from one of our pre-designed color themes if you’d like.

formbuilder-themes-colors

Fields and actions

Finally, the reason you created the form in the first place: setting the data to be collected from your visitors. From this tab, you’ll control all of fields in your form and the data synchronized into you contact lists.

Registration date: If you check this box, the date when your contact subscribes will be recorded into your contact list. Associate it with a current column in your list, or click add a column to create a column specifically for registration date. This field is invisible to the user, so only you will see this data.

Mapping: This is where you manage the fields currently in your form. In the “Type” column, choose the kind of data the form should expect in that field. If you click the pen icon, you’ll be able to manage the individual settings for that field. You’ll be able to determine which column in your contact list to sync this data with, and even if you want the field to be required or not for users to submit the form.

Add a field: Pick the type of form content you want to add, and the mapping information that goes along with it. For the check box, drop down, and radio button options you’ll be able to select the display and send values. This the data that is shown to your user on the form, versus the data that is transmitted to your contact list. You will also be able to decide which option is selected by default.

– Drop down – Users can click for a menu that opens up with multiple options to choose from.

– Check box – The visitor has select one or more option from your list. Check boxes can be aligned in stacked in one column or horizontally on the same line.

– Radio button – Similar to the check box, except only one option can be selected.

– Textbox – Nothing too crazy here, just choose the format for the text: password (hides characters), date, or plain text.

– Multiline text – A text box with more room for content, and you can define the maximum number of lines your visitors can submit.

– Invisible field – Use this field if there is any information you want to be added to the list each time someone submits the form, but is not something the visitor needs to fill out. For example, if you want the word “Newsletter” to be added to a column in your contact list for each of these submissions so you can segment them from contacts added another way, you would use this field. The field is invisible to the users, and only serves to add data to your contact lists for enhances segmentation and targeting.

formbuilder-field-types

The submit button: To edit the settings for your submit button, click “advanced settings”. There are a few things to do from this screen:

– Edit the text in your button. Get creative, and use a call to action that will make users want to submit the form.

– Decide if you want a reset button. If you want to give users the option to clear the form and start over, the reset button will do that.

– Position the button. Align it left, right, or center.

– Choose what happens when the form is completed. Enter a message to show instead of the whole form, or just the submit button. If you’d rather have the form redirect the user to to a page on your website, you can manage that from here as well. This is a good opportunity to redirect new subscribers to a special thank you landing page – maybe even with a “new subscriber special offer”.

formbuilder-submit-button

Editing content

Like the EmailBuilder, hovering your mouse over an individual module gives you the opportunity to edit the content. Clicking an image within the module brings up the image editor where you can resize, flip, crop, rotate – or undo all of those and restore the original. From the image editor, you can also add a link to the image and set the alt text (the text that appears in case the image does not display). Of course, you can change the image by using one from our library, importing an image from your computer, adding an image’s online URL, and even importing an image of your Google Maps address.

For text, click on the module to change the fonts, styles, colors, an background colors. Create numbered lists, bullet lists, and change the alignment.

Check out the mobile version of your form

Like the email templates created with our software, your forms are automatically responsive and optimized for the device they are being viewed on. Click on the mobile phone icon in the top left hand corner of the preview window to see what the mobile version of your form looks like.

formbuilder-mobile-preview

Preview your form live on the web

Want to see how your form looks and functions live on the web? Easy! Click the preview button in the top right corner, and your web browser will launch with the local HTML version of your form. Since this is a preview, and uses your local document, it can only be seen on your computer.

formbuilder-preview-publish

 

Publish it to the cloud and set it live

Once your form is finished, it’s time to publish it. Click the orange “Publish on the cloud” button in the top right corner to save your work and set it live. Once you do that, you’ll be given your form’s unique URL. Use this URL any time you want to direct a user to your form. You can use it as a link in a button to signup for your newsletter, and even embed it on a webpage using an iframe.

formbuilder-link

Finished!

Your form is alive! You can come back to this form at any time to edit it. Simply click publish to update your form online.

 

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

No Comments

Leave a Comment

So what do you think ? Start the conversation or join the discussion.
We’d love to hear from you!
Your email address will not be published.


Go Top

To give you the best possible experience, this site uses cookies. Using mailify.com means you agree to this. Find out why we use cookies and how to manage your settings here.

×