Contact Form 7 Update Addon Tutorial

Intro

Exciting news for WordPress website owners! We’re thrilled to introduce Contact Form 7 Addon Update by Premium Addons for Elementor, a powerful tool that simplifies the way you create and customize contact forms. In this tutorial, you’ll learn how to easily add and customize it to enhance your website’s user experience. Whether you’re using your existing forms or our handy Form Presets, it’s all about making your website more user-friendly.

Stay tuned as we dive into the details and show you how to take your website to the next level with ease. Get ready to transform your website – Contact Form 7 Addon is here to help!

Don’t forget to visit our demo page to see it in action.

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Premium Addons Pro is required for:
  • Form Presets
  • Fields Focus Animation
• Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Note: You have to install and activate Contact Form 7 WordPress Plugin in order to find Elementor Contact Form 7 Widget within the available Elementor widgets.

Click here for further details: Why I Can’t Find Premium Contact Form 7 Widget?

Key Features

Content

• Contact Form

Contact Form

• Source
  • Existing Forms
    • Select Form: Select from your existing contact forms.

Please note that Form Presets and Field Focus Animation require Premium Addons PRO installed and activated on your website.

• Source
  • Form Presets
    • Select Form Presets: Select from Pro pre-setted forms then insert them.

• From Title: Enable to show the form title.
• HTML Tag: Set the HTML tag for the form title.
• Form Description: Enable to show the form description.
• Fields Focus Animation: Select the field focus animation type.
  • Label Position: Set the label position space animation.
  • Label Letter Spacing.
  • Label Position + Background: Set the label position and the background color for the label focus animation.
  • Label CSS Filter: Set the CSS filter for the label focus animation.
• Focus Line Animation: Enable to show a focus line animation
• Animation From Middle: Enable the line animation to begin in the middle of the field.
• Focus Line Color: Select the focus line color.

Style

• Labels
• Title & Description
• Input / Textarea
• Select
• Radio / Checkbox
• Placeholder
• Errors
• Submit Button
• After Submit Message

Labels

• Display: Set Display to “Inline” or “Inline Block”.
• Color: Set the label’s text color.
• Typography: Select your form labels font settings and style it.
• Background Color: Set the label’s background color.
• Border Type: Set a border type for the labels.
• Border Radius: Set the border radius for Form labels.
• Text Shadow: Creates a shadow effect for Form labels.
• Margin: Creates space around labels.
• Padding: Creates space inside label boxes.

Title & Description

• Alignment: Set the title and description alignment to “Right”, “Center” or “Left”.
• Color: set the title and description text color.
• Typography: Adjust the title and description text font settings and style it.
• Text Shadow: Creates a shadow effect for the title & description text.
• Margin: Creates space around the text block.

Input/Textarea

• Width
  • Input Field: Adjust the width for Input Fields Name, Email, Subject, etc. in Contact Form 7.
  • Text Area: Adjust the width for the text area of the text message in Contact Form 7.
• Height
  • Input Field: Adjust the input fields’ height Name, Email, Subject, etc. in Contact Form 7.
  • Text Area: Adjust the text area height for the text message in Contact Form 7.
• Color: Set the color for input text in Contact Form 7 Widget for Elementor.
• Typography: Adjust the input and text area font settings and style it.
• Text Indent: Set Text indent in the input fields.
• Input Width: Set the input field width.
• Input Height: Set the input field height.
• Select Width: Set the select field width.
• Textarea Width: Set the textarea field width.
• Textarea Height: Set the textarea field height.
• Bottom Spacing: Set a space at the bottom of each field.
• Padding: Creates space inside input boxes and text areas.
• Normal / Focus
  • Background color: Set the background color for Contact Form input fields on normal/focus state.
  • Adjust the border type for Contact Form input fields on normal/focus state.
  • Border Radius: Set the border radius for Contact Form input fields on normal/focus state.
  • Box Shadow: Set the box shadow for Contact Form input fields on normal/focus state.

Select

• Width: Adjust the width for Select Field in Contact Form 7.
• Height: Adjust the Select field height in Contact Form 7.
• Color: Set the color for select field text in Contact Form 7 Widget for Elementor.
• Typography: Adjust the select field font settings and style it.
• Text Indent: Set text-indent in the select field.
• Border Type: Adjust the border type for select field.
• Border Radius: Set the border radius for select field.
• Box Shadow: Set the box shadow for select field.

Radio / Checkbox

• Custom Radio / Checkbox Style: Enable this option to set your custom styles to the Radio and checkbox elements.
• Display: Set the display type to be Inline or Block.
• Size: Set the Size of radio and checkbox elements.
• Color: Set the Color of radio and checkbox fields.
• Checked option Color: Set the Color of the checked option.
• Border Width: Set the width of radio and checkbox element’s border.
• Border Color: Set the Color of radio and checkbox fields’s border.
• Margin: Creates space around radio, and checkbox elements.
• Border Radius: Set the border radius value for both the checkbox and radio.

Place Holder

• Hide Place Holder: Check this option to hide the placeholder text.
• Color: Set the text color of the placeholders.
• Typography: Adjust the placeholder font settings and style it.

Errors

• Alerts
  • Color: Set the text color of alerts.
  • Typography: Adjust errors font settings and style it.
  • Background Color: Set the text background color of alerts.
  • Border Type: Select the border type.
  • Border Width: Set the border width of the alert.
  • Border Color: Set the border color of the alert.
  • Top Spacing: Set a space at the top of the alert.
  • Padding: Creates space inside the alert box.
• Fields
  • Background Color: Set the text background color of error fields.
  • Text Color: Set the text color of error fields.
  • Border Type: Select the border type.

Submit Button

• Full width: Enable this option if you want the submit button to take 100% width of the block.
• Alignment: Align the submit button to left, center, or right.
• Width: Set the submit button width.
• Typography: Adjust the submit button font settings and style it.
• Color: Set the button text color.
• Background Color: Set the button background color.
• Border Type: Select your border type.
• Border Width: Set the border width.
• Border Color: Set the border color.
• Border radius: Set your submit button border-radius.
• Text Shadow: Creates a shadow effect for the submit button text.
• Box Shadow: Creates a shadow effect on Contact Form 7 submit button box.
• Margin: Creates space around the button.
• Padding: Creates space inside the button.

After Submit Message

• Typography: Adjust the after-submit button font settings and style it.
• Color: Set the text color.
• Background Color: Select the after-submit message background color.
• Border Type: Select the border type.
• Border Width: Set the border width.
• Border Color: Set the border color.
• Border radius: Set the border radius.
• Text Shadow: Select a text shadow effect.
• Box Shadow: Creates a shadow effect on Contact Form 7 Input Fields.
• Margin: Creates space around the block.
• Padding: Creates space inside the block.

Conclusion

In summary, the Contact Form 7 Addon update by Premium Addons for Elementor empowers WordPress website designers. With options to use existing forms or Form Presets, it simplifies contact form customization. Elevate your website’s user experience with ease – upgrade now and unlock Contact Form 7’s full potential.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YoutTube channel to get updates about new features, improvements, and bug fixes.