Welcome to Contact Form Ultimate app

Contact Form Ultimate is an innovative contact form builder module for Shopify. This app supports various form types (Customer contact form, customer survey form, recruitment form, product form, etc.) to help you create unlimited contact forms without writing any code.

Contact Form Ultimate allows you to make any type of form, supports all the necessary input fields for you easy to customize, and is also easy to manage. Thereby, approach customers and understand them better, increase conversion rate and sales.

Within this document, we will describe the installation, creation, and setting up of the Contact Form Ultimate app process.

We did our greatest to create this manual info to be presented in a very straightforward, simple manner. But if you have any questions that are beyond the scope of this documentation, please feel free to contact us via our email address: contact@etssoft.net

Install Contact Form Ultimate app

Step 1: Navigate to the Contact From Ultimate app in the Shopify App Store by clicking on this link: https://apps.shopify.com/contact-form-ultimate.

Step 2: Click on “Add app” button >> Log in to your Shopify store and authorize the app in your Shopify admin.

Step 3: And you’re ready! Your newly installed app will appear in the Apps section of your Shopify Admin.

Create a new contact form

Click on “Form” tab at the sidebar to navigate to “Contact forms” tab. Click on the “Add Contact Form” icon at the top right corner of the page to open “Add new form” popup.

On the “Add new form” popup, you can select “Form templates” tab or “Blank form” tab.

  • “Form templates” tab provides 16 types of pre-made contact forms, which are very eye-catching and convenient, you just need to choose the form type that suits your needs.

  • “Blank form”: the app supports 4 blank form types: Basic contact form, Multiple steps form, Floating button form, and Contact form popup. Let create a new “Basic contact form” for example.

Step 1: Form Builder

(1) Click on the button “Add new row to create your contact form”.

(2) On the “Add row” popup, there are 9 types of rows with different numbers and widths of columns. Depending on your purpose/idea, select the type of row you want.

(3) Add an input field.

  • Click on “Add input field” link to open the “Input fields” sidebar.

  • Select an input field you want (text, text area, email, password, phone, URL, number, date, file, drop-down selection, checkboxes, radio buttons, HTML, quiz, acceptance, reCAPTCHA).
  • You can delete, duplicate or edit the input field as you wish.
  • Adding rows and input fields until you complete your contact form.

  • Click “Next” to move to the next step.

NOTE:

To add the reCAPTCHA input field, you need to enable reCAPTCHA first. Find and read the instruction to activate reCAPTCHA feature on Settings page of this documentation.

When your contact form is spammed, this app may delete spam data/messages. Therefore, we recommend you use reCAPTCHA for all contact forms to prevent spam and increase security.

 

Step 2: Decoration

You will see the new contact form you have just created at the center and its setting sections on the right.

You can set up and freely customize each element in the form such as colors, form width, form padding, upload background image, choose the position for submit button, etc.

Click “Next” to move to the next step when you finish decorating.

Step 3: Email settings

Contact Form Ultimate app supports an email system sent to both customers and admin.

1. Email sends to the customer:

As soon as the customer fills in a contact form and presses the submit button, an automatic confirmation email will be sent to the customer. Field content such as subject, message body can be edited.

You can see 2 sections of the “Email send to customer tab”: the email options section and the “Field values” section.

Field values” are provided from the “Name” of every input field you added. To make field values easier to remember, you should set reminiscent “Name” for input fields such as [email-customeremail], [name-customername], [text-firstname], etc.

2. Email sends to admin:

Similar to customers, you need to set up the email send to your store administrators when there is a new contact form submitted. You also can use the field values provided and paste them into any configuration fields of the “Email to admin” to get the form field value.

You can add multiple admin email addresses to receive notifications emails when there are messages from customers submitted.

3. SMTP:

There is a list of SMTP services that this app provides, you can choose the SMTP service you want to use.

NOTE: you need to configure the SMTP service before choosing. To configure SMTP services, you need to go to the “Settings” tab. See how to configure the SMTP service in the Settings section in this documentation.

 

4. Synchronization:

Options allow you to synchronize data you collect through contact forms with contact data of mailing services. Enable the options with which you want to sync customer data.

Step 4: Thanks page

You can set up a “Thanks” page to send a confirmation message to customers after they submitting a form. Fill ill the message content and enable the “Hide form after submission?” option if needed.

Finally, click on “Save” button to finish.

How to display contact form using embedded code

You’ve finished adding a new form. You will see it in the contact form list with a shortcode.

After creating the form, the app will provide a shortcode for each form. You can copy this shortcode and embed it into your preferred position to display the form wherever you want.

Look at how the form display on the storefront:

On the product’s description:

On a blog post:

Or you can also copy the shortcode of each contact form on the contact form list or on the form editing page. Paste the contact form’s shortcode anywhere on the .liquid file to display the contact form.

  • Go to “Online store” in your Shopify Admin Panel > On your “Current theme” select “Actions” -> “Edit Code”.
  • Open the “.liquid” file you need, then find the position you want to display the contact form and paste the shortcode there.

If you don’t want to display the contact form in selected positions anymore, just remove the shortcode and save your changes.

 

IMPORTANT NOTE:

If your Shopify store is using Online Store 2.0 theme, you will need to enable the contact form block to display it on the storefront:

  • Go to “Online Store” in your Shopify Admin Panel > On your “Current theme” select “Customize”.
  • In the bottom left corner of the screen select “Theme settings” > click “App embeds”.
  • Enable “Contact From Ultimate” and “Save”.

After enabling the contact form block, you can display your contact form wherever you want using shortcode.