Mautic Community Forums

How to modify mautic form in wordpress

Background

To date I have been able to create a form in mautic cloud (free version), install plugin in wordpress, apply a codeblock to a webpage, and insert the [mautic type=“form” id=“1”]. On the form, I created actions to send an email to myself and add the user to a segment. Apparently lists to not exist in free version.



Result.

It worked. The form loads in wordpress, it sends an email, and updates mautic properly. In addition, I noted the following:



a) the form fields in wordpress kept the theme color, text style, and text color

b) unfortunately…the form only presents in a top down linear fashion

c) unfortunately…the submit button is not formatted per the wordpress theme





Question/Request for help




How do I modify (for example) the formatting to have two columns for Fname, Lname, email, phone, followed by a single column for subject line, message, and submit.



for example:



Fname …Lname…

Email…Phone…

Subject line

Message

Submit



There does not appear to be any configurable way via mautic or wordpress interface to accomplish this task.



This is very frustrating and I am not a coder by trade.

Background
To date I have been able to create a form in mautic cloud (free version), install plugin in wordpress, apply a codeblock to a webpage, and insert the [mautic type=“form” id=“1”]. On the form, I created actions to send an email to myself and add the user to a segment. Apparently lists to not exist in free version.

Result.
It worked. The form loads in wordpress, it sends an email, and updates mautic properly. In addition, I noted the following:

a) the form fields in wordpress kept the theme color, text style, and text color
b) unfortunately…the form only presents in a top down linear fashion
c) unfortunately…the submit button is not formatted per the wordpress theme


Question/Request for help

How do I modify (for example) the formatting to have two columns for Fname, Lname, email, phone, followed by a single column for subject line, message, and submit.

for example:

Fname …Lname…
Email…Phone…
Subject line
Message
Submit

There does not appear to be any configurable way via mautic or wordpress interface to accomplish this task.

This is very frustrating and I am not a coder by trade.

There are several options:

  1. You can use “manual copy” of your form HTML and style it manually (without removing the essential content)
  2. You can set CSS attributes for each lead field and apply your styling (or at least the references) here
  3. You can use a WP form plugin and use WP Mautic Form Integrator to connect it

That is very helpful. I think items 2 and 3 could work nicely. Looks like a little coding is in my future.

If your WordPress theme uses Bootstrap, it’s easy. I just posted this article that may help: https://accentdm.com/mautic-form-layout-wordpress-bootstrap/