The post :
Sections Created Via AI Json Criteria’s
Exploring AI for section design in elementor.
The AI Statement
AI Used Claude (free)
create a json file to import into elementor for a responsive elementor contact form with the fields of first name,last name,email &phone number. in a sporty look.
The AI Result
{
"title": "Sporty Contact Form",
"type": "page",
"version": "0.4",
"page_settings": [],
"content": [
{
"id": "sporty_form_section",
"elType": "section",
"settings": {
"background_background": "gradient",
"background_color": "#1a1a2e",
"background_color_b": "#16213e",
"background_gradient_angle": {
"unit": "deg",
"size": 135
},
"padding": {
"unit": "px",
"top": "60",
"right": "20",
"bottom": "60",
"left": "20",
"isLinked": false
},
"border_radius": {
"unit": "px",
"top": "20",
"right": "20",
"bottom": "20",
"left": "20",
"isLinked": true
},
"margin": {
"unit": "px",
"top": "40",
"right": "auto",
"bottom": "40",
"left": "auto",
"isLinked": false
}
},
"elements": [
{
"id": "sporty_form_column",
"elType": "column",
"settings": {
"_column_size": 100,
"content_position": "center",
"padding": {
"unit": "px",
"top": "0",
"right": "20",
"bottom": "0",
"left": "20",
"isLinked": false
}
},
"elements": [
{
"id": "form_heading",
"elType": "widget",
"widgetType": "heading",
"settings": {
"title": "GET IN THE GAME",
"align": "center",
"title_color": "#ffffff",
"typography_typography": "custom",
"typography_font_family": "Oswald",
"typography_font_size": {
"unit": "px",
"size": 42,
"sizes": []
},
"typography_font_size_tablet": {
"unit": "px",
"size": 36
},
"typography_font_size_mobile": {
"unit": "px",
"size": 28
},
"typography_font_weight": "700",
"typography_text_transform": "uppercase",
"typography_letter_spacing": {
"unit": "px",
"size": 3
},
"_margin": {
"unit": "px",
"top": "0",
"right": "0",
"bottom": "10",
"left": "0",
"isLinked": false
}
}
},
{
"id": "form_subheading",
"elType": "widget",
"widgetType": "heading",
"settings": {
"title": "Contact Us Today",
"header_size": "h3",
"align": "center",
"title_color": "#e94560",
"typography_typography": "custom",
"typography_font_family": "Roboto",
"typography_font_size": {
"unit": "px",
"size": 18
},
"typography_font_weight": "400",
"typography_letter_spacing": {
"unit": "px",
"size": 2
},
"_margin": {
"unit": "px",
"top": "0",
"right": "0",
"bottom": "40",
"left": "0",
"isLinked": false
}
}
},
{
"id": "contact_form",
"elType": "widget",
"widgetType": "form",
"settings": {
"form_name": "Sporty Contact Form",
"form_fields": [
{
"_id": "first_name",
"field_type": "text",
"field_label": "First Name",
"placeholder": "Enter your first name",
"required": "true",
"width": "50",
"width_tablet": "100",
"field_pattern": "",
"field_autocomplete": "given-name"
},
{
"_id": "last_name",
"field_type": "text",
"field_label": "Last Name",
"placeholder": "Enter your last name",
"required": "true",
"width": "50",
"width_tablet": "100",
"field_pattern": "",
"field_autocomplete": "family-name"
},
{
"_id": "email",
"field_type": "email",
"field_label": "Email",
"placeholder": "Enter your email address",
"required": "true",
"width": "50",
"width_tablet": "100",
"field_autocomplete": "email"
},
{
"_id": "phone",
"field_type": "tel",
"field_label": "Phone Number",
"placeholder": "Enter your phone number",
"required": "true",
"width": "50",
"width_tablet": "100",
"field_autocomplete": "tel"
}
],
"button_text": "SUBMIT",
"button_size": "md",
"button_width": "100",
"button_align": "stretch",
"button_type": "primary",
"email_to": "your-email@example.com",
"email_subject": "New Contact Form Submission",
"email_from": "noreply@yourdomain.com",
"success_message": "Your message has been sent successfully!",
"error_message": "An error occurred. Please try again.",
"required_field_message": "This field is required.",
"invalid_message": "Please enter a valid value.",
"column_gap": {
"unit": "px",
"size": 20
},
"row_gap": {
"unit": "px",
"size": 20
},
"label_spacing": {
"unit": "px",
"size": 8
},
"field_text_color": "#ffffff",
"field_background_color": "rgba(255,255,255,0.1)",
"field_border_color": "rgba(255,255,255,0.2)",
"field_border_width": {
"unit": "px",
"top": "2",
"right": "2",
"bottom": "2",
"left": "2",
"isLinked": true
},
"field_border_radius": {
"unit": "px",
"top": "8",
"right": "8",
"bottom": "8",
"left": "8",
"isLinked": true
},
"field_padding": {
"unit": "px",
"top": "15",
"right": "20",
"bottom": "15",
"left": "20",
"isLinked": false
},
"field_typography_typography": "custom",
"field_typography_font_family": "Roboto",
"field_typography_font_size": {
"unit": "px",
"size": 16
},
"field_focus_border_color": "#e94560",
"field_focus_background_color": "rgba(255,255,255,0.15)",
"label_color": "#ffffff",
"label_typography_typography": "custom",
"label_typography_font_family": "Oswald",
"label_typography_font_size": {
"unit": "px",
"size": 14
},
"label_typography_font_weight": "500",
"label_typography_text_transform": "uppercase",
"label_typography_letter_spacing": {
"unit": "px",
"size": 1
},
"button_background_color": "#e94560",
"button_text_color": "#ffffff",
"button_typography_typography": "custom",
"button_typography_font_family": "Oswald",
"button_typography_font_size": {
"unit": "px",
"size": 18
},
"button_typography_font_weight": "700",
"button_typography_text_transform": "uppercase",
"button_typography_letter_spacing": {
"unit": "px",
"size": 3
},
"button_border_radius": {
"unit": "px",
"top": "8",
"right": "8",
"bottom": "8",
"left": "8",
"isLinked": true
},
"button_text_padding": {
"unit": "px",
"top": "18",
"right": "40",
"bottom": "18",
"left": "40",
"isLinked": false
},
"button_background_hover_color": "#ff6b6b",
"button_hover_animation": "grow",
"button_border_width": {
"unit": "px",
"top": "0",
"right": "0",
"bottom": "0",
"left": "0",
"isLinked": true
},
"_element_width": "initial",
"_element_custom_width": {
"unit": "%",
"size": 100
},
"form_fields_focus_border_type": "solid"
}
}
]
}
]
}
]
}
The example section of raw AI import
Notes:
For best results, use destop and tablet menus alongside a dedicated mobile menu. All menus can incorporate WordPress menu structures with the exception of Mega menus.
Tagged AI Json