Hi,
The forms are adjusted to the 100% of its container, if you want reduce the width of the form, you simply should press the “Text” tab in the content’s editor of your page/post, and insert the shortcode of the form inside a div tag with the style attribute defined. For example, if the ID if your form is 1, and you want display the form as a 50% of its container, insert the shortcode like follow:
<div style=”width:50%;”>[CP_CALCULATED_FIELDS id=”1″]</div>
Tip: Is very important to activate the “Text” tab in the content’s editor.
The size of the fields are defined through the attribute: “Field Size”, of the field.
Best regards.
Hi,
Thank you for the instructions. Inserting the recommended shortcode generates the same form with the same size as the original with <div style=“width:50%;“> above the form and </div> below. The original text in the content editor is
[CP_CALCULATED_FIELDS] and I added the recommended shortcode below it. This way two forms with same sizes appear in the page.
Hi,
Could you send me a link to your web page to take a look, please? Furthermore, the recommendation was to use the <div> tags around your shortcode, but not add a new shortcode.
IMPORTANT: the shortcode requires the ID attribute to identify the form you are inserting, or the plugin will use the general template. Pay attention in the settings page of the plugin, each form has associated an ID, and includes the representation of the shortcode with the corresponding ID.
Best regards.
Thank you codepeople. Here is the link: collagen5.bgdolls.com/wp/.
I’ll correct the use of <div> tags.
Regarding the form ID I can see that in the Form List/Item List the “Simple Operations” form has ID “1”. In the setting page of this form I can’t see some form ID. There is “Form Name” and “Description” but no “ID”. Where can I see the ID if different from “1”
Hi,
The issue is simple. You have not activated the “Text” tab in the content’s editor before inserting the <div> tags, as I have recommended in the initial ticket. If you don’t insert the <div> tags from the “Text” tab, the symbols “<“, and “>” are converted in “<“, and “>” respectively by WordPress.
About the ID of forms, please pay attention to the following screenshot of the settings page of the plugin, each form displays the corresponding shortcode:
http://wordpress.dwbooster.com/customdownloads/2015-02-05/screenshot.png
Note: You should remove one of shortcodes in your page, because the form is displayed duplicated.
Best regards.
Thank you. It works now properly. Now, the form reduced it’s size but the Name of the form becomes too big. Is there a way to change the font size and other font attributes.
Hi,
You simply should edit the CSS file of template selected (/wp-content/plugins/calculated-fields-form/templates/05/style.css), specifically the style’s definition:
.cp_cff_decorative #fbuilder h1{font: bold 43px/58px georgia, ‘Times New Roman’, Times, serif;color:rgb(0, 34, 65);margin-bottom:0;font-size:200%;font-weight:normal;text-align: center;text-transform: uppercase;letter-spacing:-2px;line-height:26px;margin-top:10px;}
Change the css rule for the font-size.
Best regards.
Hi,
Obviously it was not “simply” for me to access the CSS file. Which is the best way to access the CSS file of the template. Following the suggested link Ican see the file but without possibility to make any changes.
Hi,
You can access to the file from the plugins editor in WordPress (menu option: Plugins/Editor), or directly through FTP if your WordPress does not allow you to edit the file.
Best regards.
