Hello dear community,
I am a bit stumped right now. Created a new page with a text block and everything was fine until then. Then I created a form via Convert Forms and added it via Joomla module. As soon as this is done the typography of the page changes abruptly. The heading in the text block title is no longer correct and the form is displayed in small font?
Do I have a thinking error here or is this a bug?
Would be grateful for any help!
Before:
After that:
Please mark as solved, I cannot.
all you needed was different font-size, I guess.
Hi,
In Convert Form (CF) you can choose font-size and font-family used in the form, so as 1st step please check settings in "Design" tab.
This is not a bug, it's CF feature.
I use CF Pro in many websites, but I am not offcial support of it.
Thank you very much for the reply. That is correct but why does the title size in the separate text block change after inserting the Joomla module? And why do the settings in the SPPage Builder only partially in the form?
I would prefer to use the SP form, but it lacks an upload function that is desired by many users.
If somehow font-size is too small, make correction using Custom CSS used inside that Page, less worries & quick fix.
At least for the text block I solved it now using the following custom CSS:
h1 {font-size: 28px;}
Im Formular selbst greift keine CSS Formatierung?
In CF PRO version there is field for Custom CSS, I didn't check free/core version.
Use code Inspector to preview class names etc.
The rendering problem in interaction with Convert Forms and SP Page Builder can be traced to a CSS conflict in the stylesheet of the template. However, it has now been resolved via a CSS adjustment in SP Page Builder. If it is similar to others here is the solution that you have to enter in the Joomla module CSS in the SP Page Builder:
.convertforms .cf-input {
font-size: 1em !important;
color: var(--input-color) !important;
background-color: var(--input-background-color) !important;
padding: var(--input-padding) !important;
border: solid 1px var(--input-border-color) !important;
border-radius: var(--input-border-radius) !important;
text-align: var(--input-text-align) !important;
}
Problem could thus be solved and the post can be closed ;)
