Contact Forms are an essential element to add to any business website.
Aside from Optin Forms, Contact Forms can be a huge source of hot leads who are interested in your product and services. Contact Forms have a very wide range of uses that can help your business get the information needed to best serve potential or current leads/customers.
As of OptimizePress Builder version 1.1.19 Released on December 1st, 2021 you can now add a Contact Form directly in the OptimizePress Page Builder without requiring the use of a 3rd party contact form plugin.
You can add a new element buy clicking the "+" icon where you want to add it, or the "+Elements" link in the top left of the OptimizeBuilder.
You can search for the Contact Form element as well to quickly find it.
Then just drag and drop the element into your page.
Once you add the Contact Form Element, you'll see the Design Sidebar automatically open on the left side of the editor. Simply pick a design there to get started, or simply just start editing the element. You can always come back and change your design by clicking on the Magic Wand icon in the inline toolbar as well.
To start configuring the Contact Form options, click the Envelope Icon in the inline toolbar and then click the "Edit Integration" button.
Now you'll see the Contact Form Setup Wizard where you can choose the options for your form. The first option is to add the email address you would like the form data sent to when it is submitted. Click "Next Step" after you enter your email address.
Then, select which default form fields you would like to have on the form
You can also setup Extra Fields (custom fields) which have a wide range of field types. Just click the "Add Field" button, add some Label Text,
You can turn on/off the GDPR features (you can edit the text for these inline later). When the form is submitted, the selections will show in the admin confirmation email that you would get.
On the Post Action screen, you can decide what the form will do when it is submitted.
There are two emails that can be sent when the form is submitted. The first is the Primary Email that goes to the email address you specified in step one of the Contact Form Setup Wizard. The second is Confirmation Email that can be sent to the person who submitted the form. Click the gear icon to go into the settings for each of those.
You can see that the Primary Email can be customized quite a lot.
Also, you can turn on the Confirmation Email if you want a copy of the email to be sent to the person who sent it. You can see that there are similar settings there as you also noticed in the Primary Email setup.
Once you select all the options you want, you'll be taken to the Complete screen where you will see a recap of what you setup in the Contact Form Setup Wizard. Click the green "Close" button to exit the setup wizard
How to Customize the Contact Form Element (Overall Style Settings)
The Inline Element Toolbar is where we can make some of the overall customizations to the Contact Form element. It may be a little hard to get to if you are not sure how, but all you have to do is click on one of the contact form fields, and then either click the up arrow in the inline toolbar, or click on the breadcrumb link for "Contact Form" at the top of the editor.
Here you can see we clicked on the "name" field, which shows "input" in the toolbar.
Once we click the up arrow or the breadcrumb link to the contact form then the proper inline toolbar will show for us (we'll get back to the fields later).
We already covered the magic wand icon and the envelope icon. The next icon that looks like a square form, will allow you to change the optin form width, field layout, and field alignment/size.
If you select "Inline" for the field layout, you can have more than one field per line which can save space. Here is what this form looks like as an inline style.
To change the background color of the form, simply click the color icon and then select the background color (you can also use gradients as well).
If you want to add border radius or other border/shadow styles, just click the border icon in the inline toolbar to open the settings for it.
As with any other element, you can also:
Reposition the element by using the cross-arrows icon
Clone the element
Delete the element if you added too many
The gear icon in the inline toolbar will open up other settings for Space above and below, as well as alignment options (if you set the width to less than 100%).
Clicking the gear icon on the Contact Form Inline Toolbar, and clicking the blue "Advanced Options" button will open up the Contact Form Settings Sidebar on the left side of the screen.
The Fields settings will allow you to re-order the fields by dragging them into the order you want.
You can also make fields hidden by clicking the "eye" icon. This would work best for custom fields that you want to pre-populate with URL parameters
Also in the advanced settings you can set custom padding and margins, Animation & Delay, Responsive Settings, as well as other advanced settings.
Each filed in the Contact Form can be customized. If you click on a field in the Contact Form Element you'll have options there to further customize them. If you click the padlock icon (locked buy default) it will unlock (or re-lock) the field. This will allow editing only that field, or edit the group of fields all together.
Whatever you change in the field toolbar with the padlock unlocked will only make those changes for that specific field while other fields will be unchanged.
Next up we have the input settings. There are a lot of things you can customize here so lets take a deep dive into these options. The first option for the Input settings is to show or hide the label of the field (the text that shows outside the field to label what it is.
Next, the "Input" tab will allow you to set the field as required, set the default value of the field, as well as the placeholder (default value will override the placeholder text).
You can also change the icon settings in the "Icon" tab
The next tab in the input settings is "Validation" where you can set the URL Mapping and custom validation message. If you would like to pre-fill a field, or send the data of a field to the thank you page, you would put something in the "URL Mapping" option. In this case, I put first_name
If you put ?first_name=Joe in the URL (or &first_name depending on whether it is the first parameter in the URL or not) then you'll see the first name field get pre-filled on the form. Then, on the next page you'll see that in the URL as well, which means you can also use that parameter by using our built in shortcodes. The shortcode to grab this paremeter would be [op3_get_param param='first_name' default='User'] To learn more about using the shortcodes please visit our guide on
Using Parameters on OptimizePress pages.
Next up we have the main Text options where you can edit the Label text (if you have that option turned on to show the labels).
You can also edit the text for the inside of the field when someone types information into them.
The colour icon will allow making changes to the colours for the Field, Input, and Icon
If you want to edit the borders and shadows, click the border icon where you will see those options
If you click on the Contact Form Button you'll see it has its own inline toolbar where you can make changes specific to the submit button of the form.
The first option is the magic wand icon where you can choose a pre-defined style for the button. In this case, I selected an orange button to make the button pop out a little more (instead of the dark blue that was in the original design).
Next we have the button icon where you can change the button size, icon, and subtext options
You can change the button font, font size, and styling as well
If you want to change the color of the button, as well as the button text, then click on the colour icon
If you want to align the text within the button, click the alignment icon
To set the border and shadow options, click the border icon
Lastly, you can change the button hover state options as well by clicking the pointer icon
Can we integrate with our email marketing service?
At this time we do not offer any of the optin form integrations within the contact form. We may add these in the future, but it is not currently possible to send ALL the form data to those services so if we do add this in the future it will require a lot of work to expand all of our integrations to make this happen.
Can we integrate with Zapier or Webhooks?
Zapier and Webhook integrations are not available yet but we are looking into the possibility of doing this. It will be a deeper integration than is already possible with checkout and optin forms so it will require a significant upgrade of our Zapier/Webhook integrations to make this possible.
My emails are not being delivered when the form is submitted, what can I do?
In most cases this comes down to hosting configuration as well as how you are authenticating the emails. In most cases, in order to solve this, you'll need to install a SMTP plugin such as WP Mail SMTP. Some web hosts such as Cloudways do not offer email hosting so a plugin like the WP Mail SMTP will be required in order for ANY emails from WordPress (even password resets) to function properly. Our team can not help with email configurations beyond the options already available within OptimizePress. We would suggest installing a mail logging plugin which will allow you to see all the outbound emails that WordPress generates. If they show in that log then OptimizePress is working fine and you'll need to figure out with your web host or email provider what needs to be done as we are unable to provide support for 3rd party systems.
WP Mail SMTP Plugin:
https://wordpress.org/plugins/wp-mail-smtp/
WP Mail Logging Plugin:
https://wordpress.org/plugins/wp-mail-logging/
If you need any other help with the contact form, please reach out to our support team and they'll be happy to help.
